在 Xamarin 中保持网格纵横比

Question

我正在尝试在 Xamarin 中使用 Xaml 制作棋盘。我写了以下内容：

<?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="App1.MainPage">

    <Grid RowSpacing="0" ColumnSpacing="0" x:Name="chessGrid" HeightRequest="{Binding Source={x:Reference chessGrid}, Path=Width}">

        <Image Grid.Row="0" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="0" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="0" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="0" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="0" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="1" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="1" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="1" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="1" Grid.Column="7" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="2" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="2" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="2" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="2" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="3" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="3" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="3" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="3" Grid.Column="7" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="4" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="4" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="4" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="4" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="5" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="5" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="5" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="5" Grid.Column="7" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="0" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="1" BackgroundColor="#b58863" />
        <Image Grid.Row="6" Grid.Column="2" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="3" BackgroundColor="#b58863" />
        <Image Grid.Row="6" Grid.Column="4" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="5" BackgroundColor="#b58863" />
        <Image Grid.Row="6" Grid.Column="6" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="6" Grid.Column="7" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="0" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="1" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="7" Grid.Column="2" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="3" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="7" Grid.Column="4" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="5" BackgroundColor="#f0d9b5" />
        <Image Grid.Row="7" Grid.Column="6" BackgroundColor="#b58863" />
        <Image Grid.Row="7" Grid.Column="7" BackgroundColor="#f0d9b5" />
    </Grid>

</ContentPage>

我希望国际象棋网格是一个正方形，因为我已将 HeightRequest 值指定为与宽度相同。但网格占据全屏而不是正方形。为什么 HeightRequest 的事情不起作用？以及如何解决？

Answer 1

要动态给出高度和宽度，你需要重写 OnSizeAllocated ：

 protected override void OnSizeAllocated(double width, double height)
        {
            base.OnSizeAllocated(width, height);
            chessGrid.WidthRequest= width;
            chessGrid.HeightRequest = width;
        }

现在，请确保您也将这些更改包含在 XAML 中：

<Grid RowSpacing="0" ColumnSpacing="0" x:Name="chessGrid" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">

Answer 2

你错过了几件事：

• Width 不是可绑定属性，因此不能在 XAML 中使用。
• HeightRequest 只是对所需高度的请求，如果布局允许，它可能是实际高度，但也可能不是项目的高度

如果您还没有准备好将WidthRequest 和HeightRequest 设置为在当前屏幕上肯定可行的某个值，那么您需要尝试一下ContentPage 的SizeChanged 事件并根据屏幕大小将这些属性设置为适当的值。