Xamarin 形成方形按钮网格

Question

我正在尝试在一个网格中制作 9 个方形按钮（我目前所拥有的图片如下）。我在 Visual Studio 2019 中使用 Xamarin Forms。似乎无论我做什么，我总是得到 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

设置为 Auto 时，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。我从下面的文档中提供了一张表格的屏幕截图

希望这对你有帮助。

Answer 2

既然你已经设置了

<ColumnDefinition Width="*" />

当你有 3 列时，每列的宽度将设置为屏幕宽度的 1/3。

<ScrollView>
        <Grid x:Name="MainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button Text="aaaaaaaaaaaaaaaaaa"
            x:Name="btn1"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
            HeightRequest="{Binding Width, Source={x:Reference btn1}}"
            Grid.Row="0"
            Grid.Column="0"/>

            <Button Text="Text2..."
            x:Name="btn2"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
            WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn2}}"
            Grid.Row="0"
            Grid.Column="1"/>

            <Button Text="Text3..."
             x:Name="btn3"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
            WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn3}}"
            Grid.Row="0"
            Grid.Column="2"/>

            <Button Text="aaaaaaaaaaaaaaaaa"
            x:Name="btn4"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
                    WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn4}}"
            Grid.Row="1"
            Grid.Column="0"/>

            <Button Text="Text5..."
            x:Name="btn5"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
                    WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn5}}"
            Grid.Row="1"
            Grid.Column="1"/>

            <Button Text="Text6..."
             x:Name="btn6"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="Center"
                    WidthRequest="{Binding Width, Source={x:Reference btn1}}"
            HeightRequest="{Binding Width, Source={x:Reference btn6}}"
            Grid.Row="1"
            Grid.Column="2"/>

        </Grid>
    </ScrollView>

Answer 3

您可以尝试使用固定的 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 填充。