UniformGrid
기본적으로 그리드의 각 셀 크기는 동일합니다.
값 RowsColumns 이 없고 제공된 경우 UniformGrid는 표시되는 총 항목 수에 따라 제곱 레이아웃을 만듭니다.
고정 크기가 제공된 경우 제공된 RowsColumns 셀 수에 맞지 않는 추가 자식이 표시되지 않습니다.
또한 UniformGrid는 .PanelItemsControl 따라서 이러한 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을 포팅할 때 네임스페이스 접두사를 추가하고 UniformGrid XAML 네임스페이스 목록에 추가 xmlns:controls="using:CommunityToolkit.WinUI.Controls" 하기만 controls: 하면 됩니다.
UWP UniformGrid가 WPF UniformGrid와 비교하여 제공하는 추가 기능에 대한 아래의 추가 정보를 참조하세요. 동작 FirstColumn 이 약간 변경되었지만 이전에 WPF에서 무시된 경우에만 변경되었습니다.
추가 기능
그리드 속성
UniformGrid는 이전 안쪽 여백, 여백 및 CornerRadius 속성과 함께 16299년에 추가된 RowSpacing 및 ColumnSpacing 속성을 지원합니다.
<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>
Important
초기 레이아웃 전에 고정된 위치를 제공해야 합니다. 그렇지 않으면 요소가 항상 자동 레이아웃에 참여하도록 표시됩니다.
참고 항목
자식이 왼쪽 위 위치(0, 0)에 고정하려면 속성을 False지정 controls:UniformGrid.AutoLayout 해야 합니다. (이 방법은 속성을 사용해야 하는 유일한 방법입니다 AutoLayout .) 그렇지 않으면 UniformGrid는 Grid 자식(0, 0)의 기본 위치와 레이아웃 중에 자동으로 정렬되지 않도록 할 수 없습니다.
예: <Border Background="Gainsboro" controls:UniformGrid.AutoLayout="{ex:NullableBool Value=False}"><TextBlock Text="4"/></Border>
이 특정 에지 케이스는 16299 이상에서 필요한 태그 확장에 대해서만 지원됩니다. 그렇지 않으면 요소 이름을 지정하고 코드 숨김을 사용하여 속성을 설정합니다.
행 및 열 재정의
UniformGrid에는 사양이 ColumnDefinitions필요하지 않지만 UWP UniformGrid에서 재정의 RowDefinitions 할 수 있습니다. 정의 집합을 지정하여 표에 있는 항목의 레이아웃 크기를 변경할 수 있습니다. 레이아웃에 필요한 다른 모든 열 또는 행이 추가됩니다.
<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>
Orientation
오른쪽에서 왼쪽으로 레이아웃 항목 외 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>
참고 항목
또는 Orientation 속성을 변경하면 FlowDirection 해석 방법이 FirstColumn 적용됩니다. FlowDirection는 세로 축의 레이아웃을 효과적으로 미러. Orientation 대신 트랜스포지스처럼 작동하고 첫 번째 열의 항목을 아래로 푸시합니다.
Windows Community Toolkit
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기