Extensões da grelha

As Grid extensões fornecem uma série de métodos de extensão que suportam a configuração de um Grid.

Definição de Linhas + Colunas

Para definir linhas e colunas para um Grid, CommunityToolkit.Maui.Markup fornece dois métodos auxiliares:

• Columns.Define
• Rows.Define

Para tirar partido destes métodos auxiliares, adicionamos primeiro a diretiva using static seguinte no início da nossa classe:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

Após adicionar a diretiva acima using static , podemos então definir os tamanhos das nossas Linhas + Colunas usando os seguintes valores para definir o GridLength:

Juntando tudo, podemos agora definir as Linhas + Colunas de uma grelha:

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

Example

O exemplo seguinte demonstra como criar um Grid com 2 linhas:

• Tamanho da Fila 0: GridLength.Auto
• Tamanho da Fila 1: GridLength.Star

O exemplo seguinte demonstra como criar um Grid com 3 Colunas:

• Tamanho da Coluna 0: new GridLength(30, GridLength.Absolute)
• Tamanho da Coluna 1: GridLength.Star
• Coluna 2 Tamanho: 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)
    }
}

Definição de Linhas + Colunas Usando Enums

Também podemos definir e dar nome às nossas linhas e colunas criando um elemento personalizado Enum. Usar um Enum permite-nos definir um nome para cada linha e coluna, facilitando a colocação dos nossos controlos no Grid.

Example

O exemplo seguinte demonstra como definir linhas + colunas para a Grid usando dois Enums.

Para tirar partido destes métodos auxiliares, acrescentamos primeiro a seguinte using static diretiva:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

Depois definimos os nomes das nossas Linhas e Colunas criando um personalizado Enum para cada uma:

enum Row { Username, Password, Submit }

enum Column { Description, UserInput }

Depois, preenchemos o nosso Grid usando esses Enums para definir as nossas linhas + colunas e atribuir cada controlo a uma linha + coluna em conformidade:

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

Linha

O método Row define o Grid.RowProperty e o Grid.RowSpanProperty num BindableObject.

O exemplo seguinte define o Grid.RowProperty de um Button para 0 e o seu Grid.RowSpanProperty para 2, depois define o Grid.RowProperty de um Label para 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)
    }
};

Coluna

O método Column define o Grid.ColumnProperty e Grid.ColumnSpanProperty num BindableObject.

O exemplo seguinte define o Grid.ColumnProperty de um Button para 0 e o seu Grid.ColumnSpanProperty para 2, depois define o Grid.ColumnProperty de um Label para 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

O RowSpan método permite-nos definir quantas linhas de grelha um controlo irá abranger. Ou seja, se o nosso Grid tiver 3 linhas, .RowSpan(3) garantirá que o controlo abrange as 3 colunas.

Aqui está um exemplo de um Button que se estende verticalmente por 3 filas:

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

Todos<TEnum>

Ao definir as nossas Linhas usando um Enum, podemos usar All<TEnum>() para garantir que o nosso controlo se estende verticalmente por todas as linhas:

enum Row { Username, Password, Submit }

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

Abrangência da coluna

O método ColumnSpan permite-nos definir quantas colunas da grelha um controlo irá ocupar. Ou seja, se o nosso Grid tiver 3 colunas, .ColumnSpan(3) garantirá que o controlo abrange as 3 colunas.

Aqui está um exemplo de um Button que se estende horizontalmente por 3 Colunas:

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

Todos<TEnum>

Ao definir as nossas linhas usando um Enum, podemos usar All<TEnum>() para garantir que o nosso controlo se estende horizontalmente por cada coluna:

enum Column { Description, UserInput }

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

Último<TEnum>

Ao definir as nossas linhas e colunas usando um Enum, podemos garantir que um controlo é adicionado à última linha ou à última coluna usando .Last<TEnum>().

Este exemplo demonstra como adicionar a Button à última linha e coluna em um Grid

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>());