Question

我是Xamarin.Forms的新手。现在我需要在页面中设计网格，网格为3X2（2行，3列）。但我需要此网格中的所有单元格都是方形的，并且此网格的宽度与其父视图匹配。

换句话说，假设屏幕的宽度（或此网格的父视图）为3，因此每列的宽度为1.我如何强制每行的高度正好为1（这样网格的每个单元格，高度等于宽度）？

这是我的设计但不起作用：

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

是否有针对此问题的纯XAML解决方案？

感谢您的帮助。

Answer 1

Star调整大小会根据方向调整自身空间，因此您需要通过重写OnSizeAllocated方法手动调整（在调整子级大小时请小心嵌套方法调用）。

<强>的Xaml：

<Grid x:Name="mainGrid">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>
</Grid>

<强> Xaml.cs

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    if (3 * height > 2 * height)
        mainGrid.HeightRequest = 2.0 / 3 * width;
    else
        mainGrid.WidthRequest = 3.0 / 2 * height;
}

Answer 2

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    double colsCount = MainGrid.ColumnDefinitions.Count;
    double rowsCount = MainGrid.RowDefinitions.Count;
    if (colsCount > 0 & rowsCount > 0)
    {
        MainGrid.HeightRequest = width / colsCount * rowsCount;
    }
}

Answer 3

    // Calculate the height of a Grid containing square cells
    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);

        if (_grid.ColumnDefinitions.Count == 0 || _grid.RowDefinitions.Count == 0)
            return;

        var totalColSpacing = (_grid.ColumnDefinitions.Count - 1) * _grid.ColumnSpacing;
        var totalRowSpacing = (_grid.RowDefinitions.Count - 1) * _grid.RowSpacing;

        var cellWidth = (width - totalColSpacing) / _grid.ColumnDefinitions.Count;

        _grid.HeightRequest = (cellWidth * _grid.RowDefinitions.Count) + totalRowSpacing;
    }

Answer 4

我有一个更简单的方法来做到这一点。诀窍是命名第一个单元格，并获取其宽度。

首先定义布局：

<Grid x:Name="mainGrid">
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="*"/>
  </Grid.RowDefinitions>

  <StackLayout Grid.Row="0" Grid.Column="0" x:Name="firstCell" />

  <!-- Further declaration of elements inside the grid... -->
</Grid>

然后： （计算行距，并减去1 x [RowSpacing]，因为最后一行中的单元格自身下方没有行距。）

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    int colCount = mainGrid.ColumnDefinitions.Count;
    int rowCount = mainGrid.RowDefinitions.Count;

    if (colCount > 0 && rowCount > 0)
    {
        mainGrid.HeightRequest = (firstCell.Width + mainGrid.RowSpacing) * rowCount - mainGrid.RowSpacing;
    }
}

使用Xamarin.Forms创建一个3X2网格，每个单元格都是方形的

4 个答案: