Share via

Расширения сетки

  • Статья

Расширения Grid предоставляют ряд методов расширения, поддерживающих настройку Grid.

Определение строк и столбцов

Чтобы определить строки и столбцы для a Grid, CommunityToolkit.Maui.Markup предоставляет два вспомогательных метода:

  • Columns.Define
  • Rows.Define

Чтобы использовать эти вспомогательные методы, сначала добавьте следующую using static директиву в верхнюю часть нашего класса:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

После добавления приведенной выше using static директивы мы можем определить размеры строк и столбцов, используя следующие значения, чтобы задать GridLengthследующие значения:

Microsoft.Maui.GridLength XAML Сообщество набор средств. 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),   
};

Пример

В следующем примере показано, как создать с Grid 2 строками:

  • Размер строки 0: GridLength.Auto
  • Размер строки 1: GridLength.Star

В следующем примере показано, как создать с Grid 3 столбцами:

  • Размер столбца 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управления.

Пример

В следующем примере показано, как определить строки и столбцы для Grid двух Enums.

Чтобы использовать эти вспомогательные методы, сначала добавьте следующую using static директиву:

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

Затем мы определим имена наших строк и столбцов, создав настраиваемый Enum для каждого из них:

enum Row { Username, Password, Submit }

enum Column { Description, UserInput }

Затем мы заполняем Grid эти Enumзначения, чтобы определить строки и столбцы, а затем назначить каждому элементу управления строку + столбец соответствующим образом:

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 задает Grid.RowProperty и Grid.RowSpanProperty на объекте BindableObject.

Следующий пример задает Grid.RowProperty значение to 0Button и его Grid.RowSpanProperty2, а затем задает Grid.RowProperty значение 1:Label:

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 задает Grid.ColumnProperty и Grid.ColumnSpanProperty на объекте BindableObject.

Следующий пример задает Grid.ColumnProperty значение to 0Button и его Grid.ColumnSpanProperty2, а затем задает Grid.ColumnProperty значение 1:Label:

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 столбца.

Ниже приведен пример Button вертикального диапазона между 3 строками:

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

Все<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 столбца.

Ниже приведен пример Button горизонтального диапазона между 3 столбцами:

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

Все<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>());

Последний<TEnum>

При определении строк и столбцов с помощью элемента Enumуправления можно убедиться, что элемент управления добавляется в последнюю строку или последний столбец с помощью .Last<TEnum>().

В этом примере показано, как добавить в окончательную Button строку и столбец в 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>());