마크업 커뮤니티 툴킷 - Fluent C# 확장 메서드를 통해 MAUI의 UI를 구성

❎ MAUI 소모임
1

Community Toolkit에서 유지 관리하고 있는 마크업 확장입니다.

이를 통해서 UI를 Fluent API 스타일로 구성할 수 있습니다.

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

class SampleContentPage : ContentPage
{
    public SampleContentPage()
    {
        Content = new Grid
        {
            RowDefinitions = Rows.Define(
                (Row.TextEntry, 36)),

            ColumnDefinitions = Columns.Define(
                (Column.Description, Star),
                (Column.Input, Stars(2))),

            Children =
            {
                new Label()
                    .Text("Code:")
                    .Row(Row.TextEntry).Column(Column.Description),

                new Entry
                {
                    Keyboard = Keyboard.Numeric,
                    BackgroundColor = Colors.AliceBlue,
                }.Row(Row.TextEntry).Column(Column.Input)
                 .FontSize(15)
                 .Placeholder("Enter number")
                 .TextColor(Colors.Black)
                 .Height(44)
                 .Margin(5, 5)
                 .Bind(Entry.TextProperty, nameof(ViewModel.RegistrationCode))
            }
        };
    }

    enum Row { TextEntry }
    enum Column { Description, Input }
}
2개의 좋아요
2

예시안 주신거 외에 제가 느꼈던 유용했던 기능들이 있었는데

첫번째로 Marin값의 왼쪽과 아래쪽만 따로 줄 경우

.Margins(left:5, bottom:5)

두번째로 HorizontalOptions 과 VerticalOptions의 확장

.Start()  // HorizontalOptions.Start

.CenterHorizontal() // HorizontalOptions.Center

.End() // HorizontalOptions.End

.Top() // VerticalOptions.Start

.CenterVertical() // VerticalOptions.Center

.Bottom() // VerticalOptions.End

이 외에도 좀 더 다양한 Extention들이 있는데 링크를 통해 보시면 더 좋을 것 같습니다.

3개의 좋아요
3

오홋… 좋네유~ 메서드체인 형식이 적극 쓰이는군요. :smile: