Rutnätstillägg

Tilläggen Grid innehåller en serie tilläggsmetoder som stöder konfiguration av en Grid.

Definiera rader + kolumner

Om du vill definiera rader och kolumner för en Gridtillhandahåller CommunityToolkit.Maui.Markup du två hjälpmetoder:

• Columns.Define
• Rows.Define

För att utnyttja dessa hjälpmetoder lägger vi först till följande using static direktiv överst i vår klass:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

När du har lagt till ovanstående using static direktiv kan vi sedan definiera våra rad- och kolumnstorlekar med hjälp av följande värden för att ange GridLength:

Om vi sätter ihop allt kan vi nu definiera ett rutnäts rader + kolumner:

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

Example

I följande exempel visas hur du skapar en Grid med 2 rader:

• Rad 0 storlek: GridLength.Auto
• Rad 1 storlek: GridLength.Star

I följande exempel visas hur du skapar en Grid med 3 kolumner:

• Kolumn 0 Storlek: new GridLength(30, GridLength.Absolute)
• Storlek på kolumn 1: GridLength.Star
• Kolumn 2 Storlek: 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)
    }
}

Definiera rader + kolumner med uppräkningar

Vi kan också definiera och namnge våra rader och kolumner genom att skapa en anpassad Enum. Med hjälp av en Enum kan vi definiera ett namn för varje rad och kolumn, vilket gör det enklare att placera kontrollerna i Grid.

Example

I följande exempel visas hur du definierar rader + kolumner för en Grid med två Enums.

För att utnyttja dessa hjälpmetoder lägger vi först till följande using static direktiv:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

Sedan definierar vi namnen på våra rader och kolumner genom att skapa en anpassad Enum för varje:

enum Row { Username, Password, Submit }

enum Column { Description, UserInput }

Sedan fyller vi i våra Grid med hjälp av dessa Enumför att definiera våra rader + kolumner och tilldela varje kontroll till en rad + kolumn i enlighet med detta:

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

Rad

Metoden Row anger Grid.RowProperty och Grid.RowSpanProperty på en BindableObject.

I följande exempel ställs Grid.RowProperty för en Button in till 0 och dess Grid.RowSpanProperty till 2, och sedan ställs Grid.RowProperty för en Label in till 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)
    }
};

Kolumn

Metoden Column anger Grid.ColumnProperty och Grid.ColumnSpanProperty på en BindableObject.

I följande exempel ställs Grid.ColumnProperty för en Button in på 0 och dess Grid.ColumnSpanProperty på 2, och sedan ställs Grid.ColumnProperty för en Label in på 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)
    }
};

Radspännvidd

Med RowSpan metoden kan vi definiera hur många rutnätsrader en kontroll ska sträcka sig över. Dvs. om vår Grid har 3 rader kommer .RowSpan(3) att säkerställa att kontrollen sträcker sig över alla 3 kolumner.

Här är ett exempel på en Button som sträcker sig lodrätt över 3 rader:

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

Alla<TEnum>

När vi definierar rader med hjälp av Enum, kan vi använda All<TEnum>() för att säkerställa att kontrollen spänner lodrätt över alla rader:

enum Row { Username, Password, Submit }

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

Kolumnspann

Med ColumnSpan metoden kan vi definiera hur många rutnätskolumner en kontroll ska sträcka sig över. Dvs. om vårt Grid har 3 kolumner säkerställer .ColumnSpan(3) att kontrollen sträcker sig över alla 3 kolumner.

Här är ett exempel på en Button som sträcker sig vågrätt över 3 kolumner:

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

Alla<TEnum>

När vi definierar våra rader med Enum, kan vi använda All<TEnum>() för att säkerställa att vår kontroll sträcker sig vågrätt över varje kolumn:

enum Column { Description, UserInput }

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

Last<TEnum>

När vi definierar våra rader och kolumner med hjälp av Enum kan vi se till att en kontroll läggs till på den sista raden eller i den sista kolumnen genom att använda .Last<TEnum>().

Det här exemplet visar hur du lägger till en Button till den sista raden och kolumnen i en 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>());