UniformGrid

2024-11-07

既定では、グリッド内の各セルは同じサイズになります。

Rows と Columns の値が指定されていない場合、UniformGrid は表示される項目の合計数に基づいて正方形のレイアウトを作成します。

Rows と Columns に固定サイズが指定されている場合、指定されたセルの数に収まらない追加の子は表示されません。

さらに、UniformGrid は ItemsControl ではなく Panel です。そのため、そのような ItemsControl 内のパネルとして使用できます。

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 名前空間の一覧に追加するだけです。

提供される機能を WPF UniformGrid と比べたとき、UWP UniformGrid で追加されているものについて詳しくは、以下をご覧ください。 FirstColumn の動作は少し変わりましたが、以前 WPF で無視されていた場合に限られます。

追加機能

グリッドのプロパティ

UniformGrid では、前からあった Padding、Margin、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>

Note

項目が現在のレイアウトに対してサイズが大きくなりすぎるような位置にレイアウトされている場合は、代わりにグリッド内に収まるようにトリミングされることがあります。ただし、グリッドに必要な大きさを決定するときは、通常、そのサイズが考慮されます。

たとえば、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>

重要

最初のレイアウトの前に固定の場所を指定する必要があります。そうしないと、要素は常に自動レイアウトに参加するようにマークされます。

Note

子を左上の位置 (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 もサポートされています。これら 2 つのプロパティを組み合わせて、レイアウトのフローを制御できます。

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

Note

FlowDirection または Orientation プロパティを変更すると、FirstColumn の解釈方法が変わります。 FlowDirection は、実質的に縦軸のレイアウトを反映します。 Orientation は、そうではなく、入れ替えのように機能し、1 列目の項目を下にプッシュします。

次の方法で共有

UniformGrid

WPF の変換についての注意事項

追加機能

グリッドのプロパティ

サイズ設定された子

固定の子の場所

行と列をオーバーライドする

オリエンテーション

フィードバック

その他のリソース