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

本文关键字：网格 单元格 方形 一个 创建 Forms Xamarin 使用 3X2 | 更新日期: 2023-09-27 18:03:08

我是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解决方案来解决这个问题?

谢谢你的帮助。

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

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;
}

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;
    }
}

    // 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;
    }

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

布局定义优先: 

<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>

Then:(考虑行间距，加上扣除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;
    }
}
相关文章：