Xamarin表单方形按钮网格

Question

我正在尝试在一个网格中制作9个方形按钮（下面是我到目前为止的图片）。我将Xamarin Forms与Visual Studio 2019一起使用。无论我做什么，似乎总是得到8个方形按钮和1个矩形按钮。有什么建议吗？

       <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                mc:Ignorable="d"
                x:Class="Chess_test13.MainPage">

       <StackLayout>
           <Grid Padding="50,50" RowSpacing="0" ColumnSpacing="0" >

               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto" />
                   <RowDefinition Height="Auto" />
                   <RowDefinition Height="Auto" />
               </Grid.RowDefinitions>

               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*" />
                   <ColumnDefinition Width="*" />
               </Grid.ColumnDefinitions>

               <Button x:Name="00" ClassId="00" PropertyChanged="PropertyChanged" Text="" Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 00}}" />
               <Button x:Name="01" ClassId="01" PropertyChanged="PropertyChanged" Text="" Grid.Row="0" Grid.Column="1" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 01}}" />
               <Button x:Name="02" ClassId="02" PropertyChanged="PropertyChanged" Text="" Grid.Row="0" Grid.Column="2" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 02}}" />
               <Button x:Name="10" ClassId="10" PropertyChanged="PropertyChanged" Text="" Grid.Row="1" Grid.Column="0" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 10}}" />
               <Button x:Name="11" ClassId="11" PropertyChanged="PropertyChanged" Text="" Grid.Row="1" Grid.Column="1" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 11}}" />
               <Button x:Name="12" ClassId="12" PropertyChanged="PropertyChanged" Text="" Grid.Row="1" Grid.Column="2" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 12}}" />
               <Button x:Name="20" ClassId="20" PropertyChanged="PropertyChanged" Text="" Grid.Row="2" Grid.Column="0" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 20}}" />
               <Button x:Name="21" ClassId="21" PropertyChanged="PropertyChanged" Text="" Grid.Row="2" Grid.Column="1" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 21}}" />
               <Button x:Name="22" ClassId="22" PropertyChanged="PropertyChanged" Text="" Grid.Row="2" Grid.Column="2" BackgroundColor="Transparent"  Clicked="buttonClick" VerticalOptions="CenterAndExpand" HorizontalOptions="Fill" HeightRequest="{Binding Width,Source= {x:Reference 22}}" />

           </Grid>
       </StackLayout>

   </ContentPage>

Image of from my XAML code

Answer 1

您可以尝试使用固定的RowDefinition和ColumnDefinition值，例如

<Grid.RowDefinitions>
    <RowDefinition
        Height="80" />
    <RowDefinition
        Height="80" />
    <RowDefinition
        Height="80" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
    <ColumnDefinition
        Width="80" />
    <ColumnDefinition
        Width="80" />
    <ColumnDefinition
        Width="80" />
</Grid.ColumnDefinitions>

然后，对于每个按钮，应保持HorizontalOptions和VerticalOptions为填充。

Answer 2

RowDefinition的高度设置为Auto时，将根据其子视图填充该空间。这里的网格有一个空按钮的子元素，因此第一个元素的大小较小。

使用*代替自动，以便将整个高度分成相等的部分。如果需要将网格划分为相等的部分或比例的部分，请首选*

<Grid
        RowSpacing="1"
        ColumnSpacing="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button Grid.Row="0" Grid.Column="0" />
        <Button Grid.Row="0" Grid.Column="1" />
        <Button Grid.Row="0" Grid.Column="2" />

        <Button Grid.Row="1" Grid.Column="0" />
        <Button Grid.Row="1" Grid.Column="1" />
        <Button Grid.Row="1" Grid.Column="2" />

        <Button Grid.Row="2" Grid.Column="0" />
        <Button Grid.Row="2" Grid.Column="1" />
        <Button Grid.Row="2" Grid.Column="2" />
    </Grid>

请务必参考以下Microsoft Docs。我提供了以下文档中表格的屏幕截图

希望这可以帮助您。