C# 태그

  • 아티클

개요

C# 태그는 코드에서 선언적 .NET 다중 플랫폼 앱 UI(.NET MAUI) 사용자 인터페이스를 빌드하는 프로세스를 간소화하도록 설계된 흐름 도우미 메서드 및 클래스 집합입니다. C# 태그에서 제공하는 흐름 API는 네임스페이스에서 CommunityToolkit.Maui.Markup 사용할 수 있습니다.

XAML과 마찬가지로 C# 태그를 사용하면 UI(보기)와 비즈니스 논리(모델 보기) 간의 클린 구분이 가능합니다.

C# 태그는 .NET MAUI에서 지원하는 모든 플랫폼에서 사용할 수 있으며 .NET 핫 다시 로드 지원합니다.

NuGet 패키지

시작 가이드에 설명된 대로 C# 태그 패키지를 프로젝트에 포함할 수 있습니다.

예제

다음은 태그 패키지를 사용하여 일반적인 작업을 수행할 수 있는 방법을 보여 주는 몇 가지 간단한 예입니다.

바인딩

C# 태그를 사용하면 바인딩을 유창하게 정의할 수 있으므로 여러 메서드를 함께 연결하여 코드의 세부 정보를 줄일 수 있습니다.

new Entry().Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)

메서드의 가능한 옵션에 대한 Bind 자세한 내용은 확장 설명서를 참조 BindableObject 하세요.

크기 조정

C# 태그를 사용하면 크기 조정을 유창하게 정의할 수 있으므로 여러 메서드를 함께 연결하여 코드의 세부 정보를 줄일 수 있습니다.

new Entry().Size(200, 40);

메서드의 가능한 옵션에 대한 Size 자세한 내용은 확장 설명서를 참조 VisualElement 하세요.

심층 예제

이 예제에서는 자식 Label 및 Entry 개체를 사용하여 Grid 개체를 만듭니다. Label 텍스트가 표시되고 Entry 데이터가 viewmodel의 RegistrationCode 속성에 바인딩됩니다. 각 자식 뷰는 해당 행의 특정 행에 Grid표시되도록 설정되며 Entry 해당 뷰는 해당 열의 모든 열에 Grid걸쳐 있습니다. 또한 키보드, 색, 텍스트의 Entry 글꼴 크기 및 높이와 Margin함께 높이가 설정됩니다.

또한 C# 태그 확장을 사용하면 개발자가 열을 사용하여 enum열 및 행(예: Column.Input)의 이름을 정의할 수 있습니다.

C# 태그를 사용하면 흐름 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,
                }.Row(Row.TextEntry).Column(Column.Input)
                 .BackgroundColor(Colors.AliceBlue)
                 .FontSize(15)
                 .Placeholder("Enter number")
                 .TextColor(Colors.Black)
                 .Height(44)
                 .Margin(5, 5)
                 .Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode, static (ViewModel vm, string text) => vm.RegistrationCode = text)
            }
        };
    }

    enum Row { TextEntry }
    enum Column { Description, Input }
}

변환기

C# 태그 패키지는 애플리케이션 UI를 빌드할 때 인라인으로 정의 IValueConverter 하고 IMultiValueConverter 구현하는 기능을 제공합니다.

변환기 설명
FuncConverter FuncConverter UI를 빌드할 때 인라인으로 구현을 IValueConverter 정의하는 기능을 제공합니다.
FuncMultiConverter FuncMultiConverter UI를 빌드할 때 인라인으로 구현을 IMultiValueConverter 정의하는 기능을 제공합니다.

확장

참고 항목

C# Markup에는 특정 뷰 속성을 설정하는 확장 메서드가 포함되어 있습니다. 코드 가독성을 향상하도록 설계되었으며 속성 setter와 함께 사용할 수 있습니다. 속성에 대해 확장 메서드가 있는 경우 항상 사용하는 것이 좋지만 원하는 잔액을 선택할 수 있습니다.

내선 번호 설명
AbsoluteLayout AbsoluteLayout 확장은 위치 지정을 지원하는 일련의 확장 메서드를 ViewAbsoluteLayout제공합니다.
AutomationProperties 확장은 AutomationProperties 접근성 관련 설정의 구성을 지원하는 일련의 확장 메서드를 제공합니다.
BindableLayout 확장은 BindableLayout 구성을 지원하는 EmptyViewItemSource 일련의 확장 메서드를 ItemTemplate제공합니다.
BindableObject 확장은 BindableObject 에 대한 구성 Binding을 지원하는 일련의 확장 메서드를 BindableObject제공합니다.
DynamicResourceHandler 확장은 DynamicResourceHandler 앱의 테마를 지정하는 데 사용할 수 있는 구성 IDynamicResourceHandler 을 지원하는 일련의 확장 메서드를 제공합니다.
Element 확장은 Element 안쪽 여백, 효과, 글꼴 특성, 동적 리소스, 텍스트 및 텍스트 색의 구성을 지원하는 일련의 확장 메서드를 Element제공합니다.
FlexLayout FlexLayout 확장은 에 위치 지정을 지원하는 일련의 확장 메서드를 ViewFlexLayout제공합니다.
Grid Grid 확장은 Grid 구성을 지원하는 일련의 확장 메서드를 제공합니다.
Image 확장은 Image 컨트롤 구성 IImage 을 지원하는 일련의 확장 메서드를 제공합니다.
ItemsView 확장은 ItemsView 다음과 같은 CarouselViewCollectionView컨트롤 구성 ItemsView 을 지원하는 일련의 확장 메서드를 제공합니다.
Label 확장은 Label 컨트롤 구성 Label 을 지원하는 일련의 확장 메서드를 제공합니다.
Placeholder 확장은 Placeholder 컨트롤 구성 IPlaceholder 을 지원하는 일련의 확장 메서드를 제공합니다.
SemanticProperties 확장은 SemanticProperties 접근성 관련 설정의 구성을 지원하는 일련의 확장 메서드를 제공합니다.
Style Style<T> 는 구성 Microsoft.Maui.Controls.Style을 지원하는 일련의 흐름 확장 메서드를 제공합니다.
TextAlignment 확장은 TextAlignment 구현하는 컨트롤에서 속성 및 VeticalTextAlignment 구성을 HorizontalTextAlignment 지원하는 일련의 확장 메서드를 ITextAlignment제공합니다.
View 확장은 View 상속되는 컨트롤의 맞춤 구성을 지원하는 일련의 확장 메서드를 View제공합니다.
VisualElement 확장은 VisualElement 크기 조정, 스타일 지정 및 동작 구성을 지원하는 일련의 확장 메서드를 VisualElement제공합니다.