Condividi tramite

Estensioni griglia

  • Articolo

Le Grid estensioni forniscono una serie di metodi di estensione che supportano la configurazione di un oggetto Grid.

Definizione di righe e colonne

Per definire righe e colonne per un , GridCommunityToolkit.Maui.Markup fornisce due metodi helper:

  • Columns.Define
  • Rows.Define

Per sfruttare questi metodi helper, aggiungere prima di tutto la direttiva seguente using static all'inizio della classe:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

Dopo aver aggiunto la direttiva precedenteusing static, è possibile definire le dimensioni riga e colonna usando i valori seguenti per impostare :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

Mettendo tutto insieme, è ora possibile definire le righe e le colonne di una griglia:

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

Esempio

Nell'esempio seguente viene illustrato come creare un oggetto Grid con 2 righe:

  • Dimensione riga 0: GridLength.Auto
  • Dimensione riga 1: GridLength.Star

Nell'esempio seguente viene illustrato come creare un Grid oggetto con 3 colonne:

  • Dimensioni colonna 0: new GridLength(30, GridLength.Absolute)
  • Dimensioni colonna 1: GridLength.Star
  • Dimensione colonna 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)
    }
}

Definizione di righe e colonne tramite enumerazioni

È anche possibile definire e assegnare un nome alle righe e alle colonne creando un oggetto personalizzato Enum. L'uso di consente Enum di definire un nome per ogni riga e colonna, rendendo più semplice posizionare i controlli in Grid.

Esempio

Nell'esempio seguente viene illustrato come definire righe e colonne per un Grid oggetto usando due Enums.

Per sfruttare questi metodi helper, aggiungere prima di tutto la direttiva seguente using static :

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

I nomi delle righe e delle colonne vengono quindi definiti creando un oggetto personalizzato Enum per ognuno di essi:

enum Row { Username, Password, Submit }

enum Column { Description, UserInput }

Viene quindi popolato Grid usando questi Enumper definire le righe e le colonne e per assegnare ogni controllo a una riga e a una colonna di conseguenza:

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

Riga

Il Row metodo imposta e Grid.RowPropertyGrid.RowSpanProperty su un oggetto BindableObject.

L'esempio seguente imposta l'oggetto Grid.RowProperty di un Button oggetto su 0 e il relativo Grid.RowSpanProperty su 2, quindi imposta l'oggetto di un Label oggetto Grid.RowProperty su 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)
    }
};

Colonna

Il Column metodo imposta e Grid.ColumnPropertyGrid.ColumnSpanProperty su un oggetto BindableObject.

L'esempio seguente imposta l'oggetto Grid.ColumnProperty di un Button oggetto su 0 e il relativo Grid.ColumnSpanProperty su 2, quindi imposta l'oggetto di un Label oggetto Grid.ColumnProperty su 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

Il RowSpan metodo consente di definire il numero di righe griglia in cui un controllo si estenderà. Se ad esempio sono Grid presenti 3 righe, .RowSpan(3) il controllo si estende su tutte e 3 le colonne.

Di seguito è riportato un esempio di che Button si estende verticalmente su 3 righe:

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

Tutti i<valori TEnum>

Quando si definiscono le righe usando un Enumoggetto , è possibile usare All<TEnum>() per garantire che il controllo si estenda verticalmente su ogni riga:

enum Row { Username, Password, Submit }

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

ColumnSpan

Il ColumnSpan metodo consente di definire il numero di colonne griglia estese da un controllo. Se ad esempio sono Grid presenti 3 colonne, .ColumnSpan(3) il controllo si estende su tutte le 3 colonne.

Di seguito è riportato un esempio di che Button si estende orizzontalmente tra 3 colonne:

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

Tutti i<valori TEnum>

Quando si definiscono le righe usando un Enumoggetto , è possibile usare All<TEnum>() per garantire che il controllo si estenda orizzontalmente su ogni colonna:

enum Column { Description, UserInput }

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

Ultimo<TEnum>

Quando si definiscono le righe e le colonne usando un Enumoggetto , è possibile assicurarsi che un controllo venga aggiunto all'ultima riga o all'ultima colonna usando .Last<TEnum>().

In questo esempio viene illustrato come aggiungere un Button oggetto alla riga e alla colonna finale in un oggetto 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>());