Compartir a través de

Extensiones de cuadrícula

Las extensiones Grid proporcionan una serie de métodos de extensión que admiten la configuración de controles Grid.

Definir filas y columnas

Para definir filas y columnas para una Grid, CommunityToolkit.Maui.Markupproporciona dos métodos auxiliares:

  • Columns.Define
  • Rows.Define

Para aprovechar estos métodos auxiliares, primero agregamos la siguiente directiva using static a la parte superior de nuestra clase:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

Después de agregar la directiva de using static anterior, podemos definir los tamaños de fila y columna mediante los siguientes valores para establecer el 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

Ahora podemos definir las filas y columnas de una cuadrícula:

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

Ejemplo

En el ejemplo siguiente se muestra cómo crear un Grid con 2 filas:

  • Tamaño de fila 0: GridLength.Auto
  • Tamaño de fila 1: GridLength.Star

En el ejemplo siguiente se muestra cómo crear un Grid con 3 columnas:

  • Tamaño de columna 0: new GridLength(30, GridLength.Absolute)
  • Tamaño de columna 1: GridLength.Star
  • Tamaño de columna 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)
    }
}

Definir filas y columnas mediante enumeraciones

También podemos definir y asignar un nombre a nuestras filas y columnas mediante la creación de un personalizadoEnum. El uso de un Enum nos permite definir un nombre para cada fila y columna, lo que facilita la colocación de los controles en el Grid.

Ejemplo

En el ejemplo siguiente se muestra cómo definir filas y columnas para un Grid mediante dos Enums.

Para aprovechar estos métodos auxiliares, primero agregamos la siguiente directiva using static:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

A continuación, definimos los nombres de nuestras filas y columnas mediante la creación de un Enum personalizado para cada uno:

enum Row { Username, Password, Submit }

enum Column { Description, UserInput }

A continuación, rellenamos nuestra Grid usando estos Enums para definir nuestras filas y columnas y asignar cada control a una fila + columna según corresponda:

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

El método Row establece el Grid.RowProperty y el Grid.RowSpanProperty en un BindableObject.

En el ejemplo siguiente se establece el Grid.RowProperty de un Button en 0 y su Grid.RowSpanProperty en 2 y, a continuación, se establece el Grid.RowProperty de un Label en 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)
    }
};

Columna

El método Column establece el Grid.ColumnProperty y el Grid.ColumnSpanProperty en un BindableObject.

En el ejemplo siguiente se establece el Grid.ColumnProperty de un Button en 0 y su Grid.ColumnSpanProperty en 2 y, a continuación, se establece el Grid.ColumnProperty de un Label en 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

El método RowSpan permite definir cuántos filas de cuadrícula abarcará un control. Es decir, Si nuestra Grid tiene 3 filas, .RowSpan(3) garantizará que el control abarque todas las tres columnas.

Este es un ejemplo de un Button que abarca verticalmente entre 3 filas:

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

Todos los>TEnum<

Al definir nuestras filas mediante un Enum, podemos usar All<TEnum>() para asegurarnos de que nuestro control abarca verticalmente en cada fila:

enum Row { Username, Password, Submit }

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

ColumnSpan

El método ColumnSpan permite definir cuántos columnas de cuadrícula abarcará un control. Es decir, Si nuestra Grid tiene 3 columnas, .ColumnSpan(3) garantizará que el control abarque todas las 3 columnas.

Este es un ejemplo de un Button que abarca horizontalmente entre 3 columnas:

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

Todos los>TEnum<

Al definir nuestras filas mediante un Enum, podemos usar All<TEnum>() para asegurarnos de que nuestro control abarca horizontalmente en cada columna:

enum Column { Description, UserInput }

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

Último<TEnum>

Al definir nuestras filas y columnas mediante un Enum, podemos asegurarnos de que se agrega un control a la última fila o a la última columna mediante .Last<TEnum>().

En este ejemplo se muestra cómo agregar un Button a la fila y columna finales de un 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>());