Grid 拡張機能

Grid 拡張機能は、Grid の構成をサポートする一連の拡張メソッドを提供します。

行と列を定義する

Grid の行と列を定義するために、CommunityToolkit.Maui.Markup には 2 つのヘルパー メソッドが用意されています。

• Columns.Define
• Rows.Define

これらのヘルパー メソッドを利用するには、まず次の using static ディレクティブをクラスの先頭に追加します。

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

上記の using static ディレクティブを追加した後、次の値を使用して行と列のサイズを定義し、GridLength を設定できます。

Microsoft.Maui.GridLength	XAML	CommunityToolkit.Maui.Markup.GridRowsColumns
GridLength.Auto	Auto	Auto
GridLength.Star	*	Star
new GridLength(2, GridLength.Star)	2*	Stars(2)
new GridLength(20, GridLength.Absolute)	20	20

すべてを組み合わせると、グリッドの行と列を定義できます。

new Grid
{
    ColumnDefinitions = Columns.Define(30, Star, Stars(2)),
    RowDefinitions = Rows.Define(Auto, Star),   
};

例

次の例は、2 行の Grid を作成する方法を示しています。

• 行 0 のサイズ: GridLength.Auto
• 行 1 のサイズ: GridLength.Star

次の例は、3 列の Grid を作成する方法を示しています。

• 列 0 のサイズ: new GridLength(30, GridLength.Absolute)
• 列 1 のサイズ: GridLength.Star
• 列 2 のサイズ: new GridLength(GridLength.Star, 2):

// Add this using static to enable Columns.Define and Rows.Define 
using static CommunityToolkit.Maui.Markup.GridRowsColumns;

// ...

new Grid
{
    ColumnDefinitions = Columns.Define(30, Star, Stars(2)),
    RowDefinitions = Rows.Define(Auto, Star),

    Children = 
    {
        new Label()
            .Text("This Label is in Row 0 Column 0")
            .Row(0).Column(0)

        new Label()
            .Text("This Label is in Row 0 Column 1")
            .Row(0).Column(1)

        new Label()
            .Text("This Label is in Row 0 Column 2")
            .Row(1).Column(2)

        new Label()
            .Text("This Label is in Row 1 Column 0")
            .Row(1).Column(0)

        new Label()
            .Text("This Label is in Row 1 Column 1")
            .Row(1).Column(1)

        new Label()
            .Text("This Label is in Row 1 Column 2")
            .Row(1).Column(2)
    }
}

列挙型を使用して行と列を定義する

また、カスタムの Enum を作成することで、行と列を定義して名前を付けることもできます。 Enum を使用すると、各行と列の名前を定義できるため、コントロールを Grid に配置しやすくなります。

例

次の例は、2 つの Enum を使用して、Grid を定義する方法を示しています。

これらのヘルパー メソッドを利用するには、まず次の using static ディレクティブを追加します。

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

次に、それぞれのカスタム Enum を作成して、行と列の名前を定義します。

enum Row { Username, Password, Submit }

enum Column { Description, UserInput }

次に、これらの Enum を使用して Grid を設定し、行と列を定義し、それに応じて各コントロールを行と列に割り当てます。

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

class LoginPage : ContentPage
{
    public LoginPage()
    {
        Content = new Grid
        {
            RowDefinitions = Rows.Define(
                (Row.Username, 30),
                (Row.Password, 30),
                (Row.Submit, Star)),
    
            ColumnDefinitions = Columns.Define(
                (Column.Description, Star),
                (Column.UserInput, Star)),
    
            Children = 
            {
                new Label()
                    .Text("Username")
                    .Row(Row.Username).Column(Column.Description),
    
                new Entry()
                    .Placeholder("Username")
                    .Row(Row.Username).Column(Column.UserInput),
    
                new Label()
                    .Text("Password")
                    .Row(Row.Password).Column(Column.Description),
    
                new Entry { IsPassword = true }
                    .Placeholder("Password")
                    .Row(Row.Password).Column(Column.UserInput),
    
                new Button()
                    .Text("Submit")
                    .Row(Row.Password).RowSpan(All<Column>())
            }
        }
    }

    enum Row { Username, Password, Submit }

    enum Column { Description, UserInput }
}

行

Row メソッドは、BindableObject の Grid.RowProperty と Grid.RowSpanProperty を設定します。

次の例では、Button の Grid.RowProperty を 0 に設定し、その Grid.RowSpanProperty を 2 に設定してから、Label の Grid.RowProperty を 1 に設定します。

new Grid
{
    Children = 
    {
        new Button()
            .Text("This Button is in Row 0 and spans 2 Columns")
            .Row(0, 2),

        new Label()
            .Text("This Label is in Row 1 and does not span multiple columns")
            .Row(1)
    }
};

Column

Column メソッドは、BindableObject の Grid.ColumnProperty と Grid.ColumnSpanProperty を設定します。

次の例では、Button の Grid.ColumnProperty を 0 に設定し、その Grid.ColumnSpanProperty を 2 に設定してから、Label の Grid.ColumnProperty を 1 に設定します。

new Grid
{
    Children = 
    {
        new Button()
            .Text("This Button is in Row 0 and spans 2 Columns")
            .Column(0, 2),

        new Label()
            .Text("This Label is in Row 1 and does not span multiple columns")
            .Column(1)
    }
};

RowSpan

RowSpan メソッドを使用すると、コントロールがまたがるグリッド行の数を定義できます。 つまり、Grid に 3 つの行がある場合、.RowSpan(3) はコントロールが 3 つの列すべてにまたがるようにします。

以下は、3 つの行に垂直方向にまたがる Button の例です。

new Button()
    .Text("This Button Spans Across 3 Grid Rows")
    .RowSpan(3)

All<TEnum>

Enum を使用して行を定義する場合は、All<TEnum>() を使用して、コントロールがすべての行に垂直方向にまたがるようにすることができます。

enum Row { Username, Password, Submit }

// ...
new Button()
    .Text("This Button Spans Vertically Across Every Row Defined in our Enum")
    .RowSpan(All<Row>());

ColumnSpan

ColumnSpan メソッドを使用すると、コントロールがまたがるグリッド列の数を定義できます。 つまり、Grid に 3 つの列がある場合、.ColumnSpan(3) はコントロールが 3 つの列すべてにまたがるようにします。

以下は、3 つの列に水平方向にまたがる Button の例です。

new Button()
    .Text("This Button Spans Across 3 Grid Columns")
    .ColumnSpan(3)

All<TEnum>

Enum を使用して行を定義する場合は、All<TEnum>() を使用して、コントロールがすべての列に水平方向にまたがるようにすることができます。

enum Column { Description, UserInput }

// ...
new Button()
    .Text("This Button Spans Vertically Across Every Row Defined in our Enum")
    .ColumnSpan(All<Column>());

Last<TEnum>

Enum を使用して行と列を定義する場合は、 .Last<TEnum>() を使用して、コントロールが最後の行または最後の列に追加されるようにすることができます。

この例は、Grid の最後の行と列に Button を追加する方法を示しています

enum Row { Username, Password, Submit }
enum Column { Description, UserInput }

// ...
new Button()
    .Text("This Button Spans Vertically Across Every Row Defined in our Enum")
    .Row(Last<Row>()).Column(Last<Column>());