默认情况下，网格中每个单元格的大小都相同。
如果未提供 Rows 和 Columns 的值，则 UniformGrid 将基于可见项的总数创建正方形布局。
如果提供了 Rows 和 Columns 的固定大小，则不会显示无法容纳所提供单元格数的其他子级。
此外，UniformGrid 是 Panel，而不是 ItemsControl。 因此，它可以在 ItemsControls 中用作面板。
UniformGrid 继承自 Grid 与其前身相比提供了许多附加功能，详细信息请参阅以下内容。
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
<Page x:Class="PrimitivesExperiment.Samples.UniformGridSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:PrimitivesExperiment.Samples"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d">
<Grid>
<controls:UniformGrid Columns="{x:Bind (x:Int32)Columns, Mode=OneWay}"
FirstColumn="{x:Bind (x:Int32)FirstColumn, Mode=OneWay}"
Orientation="{x:Bind local:UniformGridSample.ConvertStringToOrientation(OrientationProperty), Mode=OneWay}"
Rows="{x:Bind (x:Int32)Rows, Mode=OneWay}">
<Border Grid.Row="1"
Grid.RowSpan="{x:Bind (x:Int32)Item1RowSpan, Mode=OneWay}"
Grid.Column="1"
Grid.ColumnSpan="{x:Bind (x:Int32)Item1ColumnSpan, Mode=OneWay}"
Background="AliceBlue">
<TextBlock Text="1" />
</Border>
<Border Background="Cornsilk">
<TextBlock Text="2" />
</Border>
<Border Background="DarkSalmon">
<TextBlock Text="3" />
</Border>
<Border Background="Gainsboro">
<TextBlock Text="4" />
</Border>
<Border Background="LightBlue">
<TextBlock Text="5" />
</Border>
<Border Background="MediumAquamarine">
<TextBlock Text="6" />
</Border>
<Border Background="MistyRose">
<TextBlock Text="7" />
</Border>
<Border Background="LightCyan">
<TextBlock Text="8" />
</Border>
<Border Background="Salmon">
<TextBlock Text="9" />
</Border>
<Border Background="Goldenrod">
<TextBlock Text="10" />
</Border>
<Border Background="Pink">
<TextBlock Text="11" />
</Border>
</controls:UniformGrid>
</Grid>
</Page>
// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.
// See the LICENSE file in the project root for more information.
using CommunityToolkit.WinUI.Controls;
namespace PrimitivesExperiment.Samples;
[ToolkitSampleNumericOption("FirstColumn", initial: 1, min: 0, max: 3, step: 1, Title = "FirstColumn")]
[ToolkitSampleMultiChoiceOption("OrientationProperty", "Horizontal", "Vertical", Title = "Orientation")]
[ToolkitSampleNumericOption("Rows", initial: 0, min: 0, max: 5, step: 1, Title = "Rows")]
[ToolkitSampleNumericOption("Columns", initial: 0, min: 0, max: 5, step: 1, Title = "Columns")]
[ToolkitSampleNumericOption("Item1RowSpan", initial: 2, min: 1, max: 3, step: 1, Title = "Item 1 RowSpan")]
[ToolkitSampleNumericOption("Item1ColumnSpan", initial: 2, min: 1, max: 3, step: 1, Title = "Item 1 ColumnSpan")]
[ToolkitSample(id: nameof(UniformGridSample), "UniformGrid", description: $"A sample for showing how to create and use a {nameof(UniformGrid)}.")]
public sealed partial class UniformGridSample : Page
{
public UniformGridSample()
{
this.InitializeComponent();
}
public static Orientation ConvertStringToOrientation(string orientation) => orientation switch
{
"Horizontal" => Orientation.Horizontal,
"Vertical" => Orientation.Vertical,
_ => throw new System.NotImplementedException(),
};
}
WPF 转换说明
从 WPF 移植 UniformGrid XAML 时，只需将 controls: 命名空间前缀添加到 UniformGrid，并将 xmlns:controls="using:CommunityToolkit.WinUI.Controls" 添加到 XAML 命名空间列表。
有关 UWP UniformGrid 提供的附加功能（相较于 WPF UniformGrid）详细信息，请参阅以下内容。 FirstColumn 的行为已略有更改，但仅限于以前在 WPF 中被忽略的情况下。
其他功能
网格属性
UniformGrid 支持在 16299 中添加的 RowSpacing 和 ColumnSpacing 属性，以及以前的 Padding、Margin 和 CornerRadius 属性。
<controls:UniformGrid ColumnSpacing="24" RowSpacing="24">
依据大小排列的子级
如果子级使用 Grid.RowSpan 或 Grid.ColumnSpan 附加属性，则可以将其放大，并且面板中的其他子级将在布局时跳过这些单元格。这可以与上述固定项结合使用。
<controls:UniformGrid>
<Border Background="AliceBlue" Grid.ColumnSpan="2"><TextBlock Text="1"/></Border>
<Border Background="Cornsilk"><TextBlock Text="2"/></Border>
<Border Background="DarkSalmon"><TextBlock Text="3"/></Border>
<Border Background="Gainsboro" Grid.RowSpan="2"><TextBlock Text="4"/></Border>
<Border Background="LightBlue"><TextBlock Text="5"/></Border>
<Border Background="MediumAquamarine"><TextBlock Text="6"/></Border>
<Border Background="MistyRose"><TextBlock Text="7"/></Border>
</controls:UniformGrid>
注意
如果某个项的布局位置使其大小对于当前布局来说太大，则可以将其裁剪为适合网格。 但是，在确定网格的大小时，通常会考虑它的大小。
例如，如果 UniformGrid 的下一个可用单元格是该行的最后一个单元格，但子级请求的 ColumnSpan 为 2，则该项不会换行到下一行，从而留下空白或填充较小的项，而是忽略 ColumnSpan 请求。
固定子级位置
如果子级使用 Grid.Row 或 Grid.Column 附加属性，则它在网格中的位置将被固定，且面板中的其他子级将改为围绕它布局。 这可以与以下依据大小排列的项组合在一起。
<controls:UniformGrid>
<Border Background="AliceBlue" Grid.Row="1" Grid.Column="1"><TextBlock Text="1"/></Border>
<Border Background="Cornsilk"><TextBlock Text="2"/></Border>
<Border Background="DarkSalmon"><TextBlock Text="3"/></Border>
<Border Background="Gainsboro"><TextBlock Text="4"/></Border>
<Border Background="LightBlue"><TextBlock Text="5"/></Border>
<Border Background="MediumAquamarine"><TextBlock Text="6"/></Border>
<Border Background="MistyRose"><TextBlock Text="7"/></Border>
</controls:UniformGrid>
重要
必须在初始布局之前提供固定位置。 否则，将标记元素以始终参与自动布局。
注意
要将子级固定到左上角位置 (0, 0)，必须将 controls:UniformGrid.AutoLayout 属性指定为 False。 （这应是使用 AutoLayout 属性的唯一方法。）否则，UniformGrid 无法区分网格子级 (0, 0) 的默认位置，并且知道你不希望它在布局期间自动排列。
例如 <Border Background="Gainsboro" controls:UniformGrid.AutoLayout="{ex:NullableBool Value=False}"><TextBlock Text="4"/></Border>
此特定边缘案例仅在 16299 及更高版本的标记中受所需标记扩展支持；否则，请命名元素并使用代码隐藏设置属性。
重写行和列
虽然 UniformGrid 不需要指定 RowDefinitions 或 ColumnDefinitions，但可以在 UWP UniformGrid 中重写它们。 通过指定一组定义，可以更改网格中项的布局大小。 将添加布局所需的任何其他列或行。
<controls:UniformGrid>
<controls:UniformGrid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="20"/>
<RowDefinition/>
</controls:UniformGrid.RowDefinitions>
<controls:UniformGrid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="20"/>
<ColumnDefinition/>
</controls:UniformGrid.ColumnDefinitions>
<Border Background="AliceBlue"><TextBlock Text="1"/></Border>
<Border Background="Cornsilk"><TextBlock Text="2"/></Border>
<Border Background="DarkSalmon"><TextBlock Text="3"/></Border>
<Border Background="Gainsboro"><TextBlock Text="4"/></Border>
<Border Background="LightBlue"><TextBlock Text="5"/></Border>
<Border Background="MediumAquamarine"><TextBlock Text="6"/></Border>
<Border Background="MistyRose"><TextBlock Text="7"/></Border>
</controls:UniformGrid>
方向
除 FlowDirection 之外，还可以从右到左布局项。 UWP UniformGrid 还支持 Orientation 从上到下布局项。 这两个属性可以组合在一起来控制布局流。
<controls:UniformGrid Orientation="Vertical">
<Border Background="AliceBlue"><TextBlock Text="1"/></Border>
<Border Background="Cornsilk"><TextBlock Text="2"/></Border>
<Border Background="DarkSalmon"><TextBlock Text="3"/></Border>
<Border Background="Gainsboro"><TextBlock Text="4"/></Border>
<Border Background="LightBlue"><TextBlock Text="5"/></Border>
<Border Background="MediumAquamarine"><TextBlock Text="6"/></Border>
<Border Background="MistyRose"><TextBlock Text="7"/></Border>
</controls:UniformGrid>
注意
更改 FlowDirection 或 Orientation 属性会影响 FirstColumn 的解释方式。 FlowDirection 将有效地反映纵轴上的布局。 Orientation 的行为反而更像转置，并将第一列中的项向下推送。
