Grid content priority in Xamarin Forms

Question

I'm trying to make piano-like layout using Grid in Xamarin.Forms. Looks fine but because of using RowSpan when I press one of my white buttons, it corrupts visibility of the black button near to it. Example pressing button "D" I tried to fix this by focusing to the "corrupted" black button when the white one is pressed but it didn't solve anything. I'd appreciate any tip. Here's a part of my XAML:

<Grid.Resources>
            <Style TargetType="Button">
                <Setter Property="BackgroundColor" Value="White"/>
                <Setter Property="Grid.RowSpan" Value="3"/>
                <Setter Property="Grid.Row" Value="0"/>
                <Setter Property="Grid.ColumnSpan" Value="3"/>
            </Style>
        </Grid.Resources>
        <!--white buttons-->
        <Button x:Name="C" Text="C" Grid.Column="0" Clicked="Button_Clicked"/>
        <Button x:Name="D" Text="D" Grid.Column="3" Clicked="Button_Clicked"/>
        <Button x:Name="E" Text="E" Grid.Column="6" Clicked="Button_Clicked"/>
        <Button x:Name="F" Text="F" Grid.Column="9" Clicked="Button_Clicked"/>
        <Button x:Name="G" Text="G" Grid.Column="12" Clicked="Button_Clicked"/>
        <Button x:Name="A" Text="A" Grid.Column="15" Clicked="Button_Clicked"/>
        <Button x:Name="H" Text="H" Grid.Column="18" Clicked="Button_Clicked"/>
        <!--black buttons-->
        <Button x:Name="Cis" Text="Cis" BackgroundColor="Black" TextColor="White" Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="2" Grid.RowSpan="1" Clicked="Button_Clicked"/>
        <Button x:Name="Dis" Text="Dis" BackgroundColor="Black" TextColor="White" Grid.Row="0" Grid.Column="5" Grid.ColumnSpan="2" Grid.RowSpan="1" Clicked="Button_Clicked"/>
        <Button x:Name="Fis" Text="Fis" BackgroundColor="Black" TextColor="White" Grid.Row="0" Grid.Column="11" Grid.ColumnSpan="2" Grid.RowSpan="1" Clicked="Button_Clicked"/>
        <Button x:Name="Gis" Text="Gis" BackgroundColor="Black" TextColor="White" Grid.Row="0" Grid.Column="14" Grid.ColumnSpan="2" Grid.RowSpan="1" Clicked="Button_Clicked"/>
        <Button x:Name="Ais" Text="Ais" BackgroundColor="Black" TextColor="White" Grid.Row="0" Grid.Column="17" Grid.ColumnSpan="2" Grid.RowSpan="1" Clicked="Button_Clicked"/>

I think I'd try separating the black and white keys into separate grids — Jason
Tried this but having two exactly the same grids in the same place, I'm only able to play only white or only black keys (depends whats written later) — Daniel Vágner

Jack Hua Jack Hua · Accepted Answer · 2020-05-15T02:53:18

This is caused by Xamarin.Forms Fast Renderers:

From Xamarin.Forms 4.0 onwards, all applications targeting FormsAppCompatActivity will use these fast renderers by default.

The quickest way to solve this problem is adding the following line of code to your MainActivity class before calling Forms.Init to override the fast renderers:

Forms.SetFlags("UseLegacyRenderers");

You can also write a custom renderer of Button to improve the behavior.

I uploaded a sample project here and you can check it.

Grid content priority in Xamarin Forms

1 Answers