使用 Xamarin.Forms 创建每个单元格为方形的 3X2 网格答案

【问题标题】：Create a 3X2 Grid that each cell is square-shaped using Xamarin.Forms使用 Xamarin.Forms 创建每个单元格为方形的 3X2 网格
【发布时间】：2016-08-19 06:56:33
【问题描述】：

我是 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 解决方案？

感谢您的帮助。

【问题讨论】：

标签： c# xaml xamarin.forms

【解决方案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;
}

【讨论】：

谢谢。但是，我对if (3 * height > 2 * height) 有点困惑
让我们用一个例子来解释一下：如果我们假设每个方形边缘都是 1"，那么你的容器应该是 3" 和高度 2"。你的 Grid 应该遵守这个 3x2 比例。这个条件检查如果我们减少Width 或Height。
@eakgul - 大概你的意思是 3 * width - 比较 height 和 height 是不明智的 - 因此 Alan 很困惑。
... 或者它的第二个height 应该是width。任何使用它的人都应该以两种方式测试不同的情况......更清晰的测试将是if (width / 3 > height / 2)。我不知道之后的公式是否正确。 需要注释来解释算法的很好的代码示例。

【解决方案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;
    }
}

【讨论】：

值得一提的是，这是在 XAML 中假设的：<Grid x:Name="MainGrid" ... 另外，为什么 colsCount 和 rowsCount double 而不是 int？您想确保除法不会被截断吗？
这对我不起作用。高度比宽度大一点。

【解决方案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;
    }

【讨论】：

【解决方案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;
    }
}

【讨论】：