Share via

그리드 확장

  • 아티클

확장은 Grid 구성을 지원하는 일련의 확장 메서드를 Grid제공합니다.

행 + 열 정의

행과 열을 GridCommunityToolkit.Maui.Markup 정의하려면 다음 두 가지 도우미 메서드를 제공합니다.

  • Columns.Define
  • Rows.Define

이러한 도우미 메서드를 활용하려면 먼저 다음 using static 지시문을 클래스의 맨 위에 추가합니다.

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

위의 using static 지시문을 추가한 후 다음 값을 사용하여 행 + 열 크기를 정의하여 다음을 설정할 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

이제 그리드의 행 + 열을 정의할 수 있습니다.

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

예시

다음 예제에서는 2개의 행을 사용하여 Grid 만드는 방법을 보여 줍니다.

  • 행 0 크기: GridLength.Auto
  • 행 1 크기: GridLength.Star

다음 예제에서는 세 개의 열을 사용하여 Grid 만드는 방법을 보여 줍니다.

  • 열 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.

예시

다음 예제에서는 using 2Enum에 대한 Grid 행 + 열을 정의하는 방법을 보여 줍니다.

이러한 도우미 메서드를 활용하려면 먼저 다음 using static 지시문을 추가합니다.

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

그런 다음 각각에 대한 사용자 지정 Enum 을 만들어 행 및 열의 이름을 정의합니다.

enum Row { Username, Password, Submit }

enum Column { Description, UserInput }

그런 다음 Grid 이러한 Enums를 사용하여 행 + 열을 정의하고 그에 따라 각 컨트롤을 행 + 열에 할당합니다.

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

메서드는 Row .에 대해 Grid.RowPropertyBindableObject설정합니다Grid.RowSpanProperty.

다음 예제에서는 to 및 해당 Grid.RowSpanProperty2값을 설정한 ButtonGrid.RowProperty 다음, to의 1Label 값을 설정합니다Grid.RowProperty.0

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.ColumnPropertyBindableObject설정합니다Grid.ColumnSpanProperty.

다음 예제에서는 to 및 해당 Grid.ColumnSpanProperty2값을 설정한 ButtonGrid.ColumnProperty 다음, to의 1Label 값을 설정합니다Grid.ColumnProperty.0

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 메서드를 사용하면 컨트롤에 걸쳐 있는 그리드 행 수를 정의할 수 있습니다. 즉, .RowSpan(3) 행이 3개인 경우 Grid 컨트롤이 모든 3개의 열에 걸쳐 있는지 확인합니다.

다음은 세로로 세로 Button 행에 걸쳐 있는 예제입니다.

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

모든<테넘>

행을 사용하여 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 메서드를 사용하면 컨트롤에 걸쳐 있는 그리드 열 수를 정의할 수 있습니다. 즉, 열이 3개 .ColumnSpan(3) 인 경우 Grid 컨트롤이 열 3개 모두에 걸쳐 있는지 확인합니다.

다음은 세 개의 열에 걸쳐 가로로 확장되는 예제 Button 입니다.

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

모든<테넘>

행을 사용하여 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 >의 마지막 행과 열에 a를 추가하는 방법을 보여 줍니다. 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>());