c# - 将 Grid.RowDefinition 高度绑定(bind)到 Xamarin 中的网格宽度

Question

我已经为这个问题苦苦挣扎了太久。本来应该非常简单的东西.. 我正在 Xamarin.Forms 中制作井字游戏应用程序。面板本身包含 3x3 个按钮，每个按钮都放置在自己的网格单元格中。我有 3 个水平单元格和 3 个垂直单元格。

具有这些单元格的网格被放置在另一个网格的网格行中。棋盘的水平部分会自动扩展，从而占据整个屏幕的宽度，如图所示。但我希望按钮/网格行的高度完全相同，以便它们创建一个完美的正方形。我可以通过在使用 HeightRequest = someValue 创建按钮时硬编码一个值来做到这一点，但我想将它绑定(bind)到按钮/gridColumn 的宽度，这样无论您在什么设备上运行它看起来都不错。

在这个例子中，我硬编码了网格行的高度。如您所见，它在 iPhone 上看起来不错，但在 iPad 上却很糟糕，因为显示屏更大，像素更高。要是我能让高度和宽度一样就好了。

网格是用 XAML 制作的:

 <Grid x:Name="rootGrid">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="70" />
            <RowDefinition Height="60" />
            <RowDefinition Height="400"/>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Label Text="Tic Tac Toe" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Padding="0,50,0,0" FontFamily="Arial" FontAttributes="Bold" FontSize="Large" TextColor="#FFFFFF" Grid.Row="0" Grid.Column="0"/>
        <Grid Grid.Row="1" Margin="0,20,0,0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label HorizontalTextAlignment="Center" Text="X: 0 points" Grid.Column="0" TextColor="#FFFFFF" IsVisible="True"></Label>
            <Label HorizontalTextAlignment="Center" Text="O: 0 points" Grid.Column="1" TextColor="#FFFFFF" IsVisible="True"></Label>
        </Grid>

        <Grid Grid.Row="2" x:Name="theBoard">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="col1" Width="*" />
                <ColumnDefinition x:Name="col2" Width="*" />
                <ColumnDefinition x:Name="col3" Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <!--<RowDefinition BindingContext="{x:Reference Name=col1}" Height="{Binding Path=Width}"/>-->
            </Grid.RowDefinitions>
        </Grid>
    </Grid>

按钮是这样添加的:

        private void CreateFields()
    {


        // Iterate through the rows
        for (int i = 0; i < fields.GetLength(1); i++)
        {

            // Iterate through the columns
            for (int j = 0; j < fields.GetLength(0); j++)
            {
                Button field = new Button()
                {
                    BackgroundColor = Color.WhiteSmoke,
        
                };

                // Adds the new button to the two dimensional array
                fields[i, j] = field;

                theBoard.Children.Add(field, j, i);
                


            }

        }

        //Console.WriteLine("The current width of the button is: " + fields[0,0].Width);
        //Console.WriteLine("The current height of the button is: " + fields[0,0].Height);
        //Console.WriteLine("The current width of the column is: " + col1.Width);
       // Console.WriteLine("The current height of the column is: " + row1.Height);


    }

我真的希望有人能帮助我。它必须是一些我忘记的简单细节。 在 WPF 中，我曾经有一个叫做“ActualWidth”的东西，但这里似乎不是这种情况。

Answer 1

我已经更新了您的 XAML，请查看下面的更改和评论。这应该使您的电路板网格始终呈正方形。

    <Grid x:Name="rootGrid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="70" />
        <RowDefinition Height="60" />
        <!--set this row definition height to Auto -->
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Text="Tic Tac Toe" HorizontalOptions="Center" VerticalOptions="StartAndExpand" Padding="0,50,0,0" FontFamily="Arial" FontAttributes="Bold" FontSize="Large" TextColor="#FFFFFF" Grid.Row="0" Grid.Column="0"/>
    <Grid Grid.Row="1" Margin="0,20,0,0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label HorizontalTextAlignment="Center" Text="X: 0 points" Grid.Column="0" TextColor="#FFFFFF" IsVisible="True"></Label>
        <Label HorizontalTextAlignment="Center" Text="O: 0 points" Grid.Column="1" TextColor="#FFFFFF" IsVisible="True"></Label>
    </Grid>

    <!--Bind the HeightRequest of the board grid to its own width-->
    <Grid Grid.Row="2" x:Name="theBoard" HeightRequest="{Binding Source={x:Reference theBoard}, Path=Width}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="col1" Width="*" />
            <ColumnDefinition x:Name="col2" Width="*" />
            <ColumnDefinition x:Name="col3" Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>