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值指定为与width相同。但网格会全屏显示，而不是正方形。为什么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设置为在当前屏幕上肯定可行的某个值，那么您需要对SizeChanged进行一些操作ContentPage的事件，并根据屏幕尺寸将这些属性设置为适当的值。

保持Xamarin中的网格长宽比

2 个答案: