XAML 태그 확장 사용

샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) XAML 태그 확장은 다양한 원본에서 요소 특성을 설정할 수 있도록 하여 XAML의 성능과 유연성을 향상시키는 데 도움이 됩니다.

예를 들어 일반적으로 다음과 같은 속성을 BoxView 설정합니다Color.

<BoxView Color="Blue" />

그러나 리소스 사전에 저장된 값이나 사용자가 만든 클래스의 정적 속성 값 또는 페이지에 있는 다른 요소 형식 Color 의 속성에서 또는 별도의 색조, 채도 및 광도 값으로 생성된 속성에서 특성을 설정하는 Color 것이 좋습니다. 이러한 모든 옵션은 XAML 태그 확장을 사용할 수 있습니다.

태그 확장은 요소의 특성을 표현하는 다른 방법입니다. .NET MAUI XAML 태그 확장은 일반적으로 중괄호로 묶인 특성 값으로 식별할 수 있습니다.

<BoxView Color="{StaticResource themeColor}" />

중괄호의 모든 특성 값은 항상 XAML 태그 확장입니다. 그러나 중괄호를 사용하지 않고도 XAML 태그 확장을 참조할 수 있습니다.

참고 항목

여러 XAML 태그 확장은 XAML 2009 사양의 일부입니다. 이러한 항목은 사용자 지정 네임스페이스 접두사를 x 사용하여 XAML 파일에 표시되며 일반적으로 이 접두사로 참조됩니다.

이 문서에서 설명하는 태그 확장 외에도 다음 태그 확장은 .NET MAUI에 포함되어 있으며 다른 문서에서 설명합니다.

• AppThemeBinding - 현재 시스템 테마에 따라 사용할 리소스를 지정합니다. 자세한 내용은 AppThemeBinding 태그 확장을 참조 하세요.
• Binding - 두 개체의 속성 간에 연결을 설정합니다. 자세한 내용은 데이터 바인딩을 참조하세요.
• DynamicResource - 리소스 사전의 개체 변경 내용에 응답합니다. 자세한 내용은 동적 스타일을 참조 하세요.
• FontImage - 표시할 수 있는 모든 보기에 글꼴 아이콘을 표시합니다 ImageSource. 자세한 내용은 글꼴 로드 아이콘을 참조하세요.
• OnIdiom - 애플리케이션이 실행 중인 디바이스의 관용구에 따라 UI 모양을 사용자 지정합니다. 자세한 내용은 디바이스 관용구를 기반으로 UI 모양 사용자 지정을 참조하세요.
• OnPlatform - 플랫폼별로 UI 모양을 사용자 지정합니다. 자세한 내용은 플랫폼에 따라 UI 모양 사용자 지정을 참조하세요.
• RelativeSource - 바인딩 대상의 위치를 기준으로 바인딩 소스를 설정합니다. 자세한 내용은 상대 바인딩을 참조 하세요.
• StaticResource - 리소스 사전의 개체를 참조합니다. 자세한 내용은 리소스 사전을 참조 하세요.
• TemplateBinding - 컨트롤 템플릿에서 데이터 바인딩을 수행합니다. 자세한 내용은 컨트롤 템플릿을 참조 하세요.

x:Static 태그 확장

x:Static 태그 확장은 클래스에서 지원됩니다StaticExtension. 클래스에는 public 상수, 정적 속성, 정적 필드 또는 열거형 멤버의 이름으로 설정한 형식 string 의 단일 Member 속성이 있습니다.

사용하는 x:Static 한 가지 방법은 먼저 이 AppConstants 클래스와 같은 일부 상수 또는 정적 변수를 사용하여 클래스를 정의하는 것입니다.

static class AppConstants
{
    public static double NormalFontSize = 18;
}

다음 XAML에서는 속성 요소 태그 간에 Label.FontSize 클래스를 인스턴스화하는 StaticExtension 가장 자세한 방법을 보여 줍니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             xmlns:local="clr-namespace:MarkupExtensions"
             x:Class="MarkupExtensions.StaticDemoPage"
             Title="x:Static Demo">
    <StackLayout Margin="10, 0">
        <Label Text="Label No. 1">
            <Label.FontSize>
                <x:StaticExtension Member="local:AppConstants.NormalFontSize" />
            </Label.FontSize>
        </Label>
        ···
    </StackLayout>
</ContentPage>

XAML 파서에서는 클래스를 StaticExtension 다음과 같이 x:Static축약할 수도 있습니다.

<Label Text="Label No. 2">
    <Label.FontSize>
        <x:Static Member="local:AppConstants.NormalFontSize" />
    </Label.FontSize>
</Label>

이 구문은 클래스와 멤버 설정을 중괄호로 묶 StaticExtension 어 더욱 간소화할 수 있습니다. 결과 식은 특성으로 FontSize 직접 설정됩니다.

<Label Text="Label No. 3"
       FontSize="{x:StaticExtension Member=local:AppConstants.NormalFontSize}" />

이 예제에서는 중괄호 안에 따옴표가 없습니다 . 이 속성 StaticExtension 은 Member 더 이상 XML 특성이 아닙니다. 대신 태그 확장에 대한 식의 일부입니다.

개체 요소로 사용할 때 약어 x:StaticExtensionx:Static 로 사용할 수 있는 것처럼 중괄호 내의 식에서 축약할 수도 있습니다.

<Label Text="Label No. 4"
       FontSize="{x:Static Member=local:AppConstants.NormalFontSize}" />

클래스에는 StaticExtensionContentProperty 이 속성을 클래스의 기본 콘텐츠 속성 Member으로 표시하는 속성을 참조하는 특성이 있습니다. 중괄호로 표현된 XAML 태그 확장의 경우 식의 일부를 제거할 Member= 수 있습니다.

<Label Text="Label No. 5"
       FontSize="{x:Static local:AppConstants.NormalFontSize}" />

태그 확장의 x:Static 가장 일반적인 형태입니다.

XAML 예제의 루트 태그에는 .NET System 네임스페이스에 대한 XML 네임스페이스 선언도 포함되어 있습니다. 이렇게 하면 Label 글꼴 크기를 정적 필드 Math.PI로 설정할 수 있습니다. 그러면 텍스트가 작으므로 속성이 Scale 다음으로 Math.E설정됩니다.

<Label Text="&#x03C0; &#x00D7; E sized text"
       FontSize="{x:Static sys:Math.PI}"
       Scale="{x:Static sys:Math.E}"
       HorizontalOptions="Center" />

다음 스크린샷은 XAML 출력을 보여줍니다.

x:Reference 태그 확장

x:Reference 태그 확장은 클래스에서 지원됩니다ReferenceExtension. 클래스에는 이름을 지정한 페이지의 요소 이름으로 설정한 형식 string 의 단일 속성 Name 이 있습니다x:Name. 이 Name 속성은 콘텐츠 속성 ReferenceExtension이므로 Name= 중괄호로 표시할 때 x:Reference 는 필요하지 않습니다. x:Reference 태그 확장은 데이터 바인딩과 함께 단독으로 사용됩니다. 데이터 바인딩에 대한 자세한 내용은 데이터 바인딩을 참조하세요.

다음 XAML 예제에서는 두 가지 데이터 바인딩 사용x:Reference, 개체의 Binding 속성을 설정하는 Source 데 사용되는 첫 번째 및 두 번째 데이터 바인딩에 대한 속성을 설정하는 BindingContext 데 사용되는 두 번째 사용을 보여 줍니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.ReferenceDemoPage"
             x:Name="page"
             Title="x:Reference Demo">    
    <StackLayout Margin="10, 0">        
        <Label Text="{Binding Source={x:Reference page},
                              StringFormat='The type of this page is {0}'}"
               FontSize="18"
               VerticalOptions="Center"
               HorizontalTextAlignment="Center" />
        <Slider x:Name="slider"
                Maximum="360"
                VerticalOptions="Center" />
        <Label BindingContext="{x:Reference slider}"
               Text="{Binding Value, StringFormat='{0:F0}&#x00B0; rotation'}"
               Rotation="{Binding Value}"
               FontSize="24"
               HorizontalOptions="Center"
               VerticalOptions="Center" />        
    </StackLayout>
</ContentPage>

이 예제에서 두 식은 클래스 x:Reference 이름의 약어 버전을 ReferenceExtension 사용하고 식의 일부를 제거 Name= 합니다. 첫 번째 예제 x:Reference 에서 태그 확장은 태그 확장에 Binding 포함되고 Source 속성은 StringFormat 쉼표로 구분됩니다.

다음 스크린샷은 XAML 출력을 보여줍니다.

x:Type 태그 확장

x:Type 태그 확장은 C# typeof 키워드(keyword) 해당하는 XAML입니다. 클래스 또는 구조체 이름으로 설정해야 하는 형식 string 의 명명된 TypeName 속성을 정의하는 클래스에서 지원 TypeExtension 됩니다. 태그 확장은 x:Type 해당 클래스 또는 구조체의 개체를 반환 Type 합니다. TypeName 의 콘텐츠 속성 TypeExtension이므로 TypeName= 중괄호와 함께 표시할 때 x:Type 는 필요하지 않습니다.

x:Type 태그 확장은 일반적으로 태그 확장과 x:Array 함께 사용됩니다. 자세한 내용은 x:Array 태그 확장을 참조 하세요.

다음 XAML 예제에서는 태그 확장을 사용하여 x:Type .NET MAUI 개체를 인스턴스화하고 에 추가하는 방법을 StackLayout보여 줍니다. XAML은 속성이 a Binding 로 Command 설정되고 CommandParameter 속성이 세 개의 .NET MAUI 뷰 형식으로 설정된 세 개의 요소로 구성됩니다Button.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.TypeDemoPage"
             Title="x:Type Demo">    
    <StackLayout x:Name="stackLayout"
                 Padding="10, 0">        
        <Button Text="Create a Slider"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Slider}" />
        <Button Text="Create a Stepper"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Stepper}" />
        <Button Text="Create a Switch"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Switch}" />
    </StackLayout>
</ContentPage>

코드 숨김 파일은 속성을 정의하고 초기화합니다.CreateCommand

public partial class TypeDemoPage : ContentPage
{
    public ICommand CreateCommand { get; private set; }

    public TypeDemoPage()
    {
        InitializeComponent();

        CreateCommand = new Command<Type>((Type viewType) =>
        {
            View view = (View)Activator.CreateInstance(viewType);
            view.VerticalOptions = LayoutOptions.Center;
            stackLayout.Add(view);
        });

        BindingContext = this;
    }
}

a를 Button 누르면 인수의 새 인스턴스가 CommandParameter 만들어지고 에 추가 StackLayout됩니다. 그런 다음 세 Button 개체는 동적으로 만든 뷰와 페이지를 공유합니다.

x:Array 태그 확장

x:Array 태그 확장을 사용하면 태그에서 배열을 정의할 수 있습니다. 다음 두 가지 속성을 정의하는 클래스에서 ArrayExtension 지원됩니다.

• Type 배열에 있는 요소의 형식을 나타내는 형식 Type의 형식입니다. 이 속성은 태그 확장으로 x:Type 설정해야 합니다.
• Items 형식 IList입니다. 항목 자체의 컬렉션입니다. 의 콘텐츠 속성 ArrayExtension입니다.

x:Array 태그 확장 자체는 중괄호로 표시되지 않습니다. 대신 x:Array 시작 및 끝 태그는 항목 목록을 구분합니다.

다음 XAML 예제에서는 속성을 배열로 ListView 설정 ItemsSource 하여 항목을 추가하는 방법을 x:Array 보여줍니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.ArrayDemoPage"
             Title="x:Array Demo Page">
    <ListView Margin="10">
        <ListView.ItemsSource>
            <x:Array Type="{x:Type Color}">
                <Color>Aqua</Color>
                <Color>Black</Color>
                <Color>Blue</Color>
                <Color>Fuchsia</Color>
                <Color>Gray</Color>
                <Color>Green</Color>
                <Color>Lime</Color>
                <Color>Maroon</Color>
                <Color>Navy</Color>
                <Color>Olive</Color>
                <Color>Pink</Color>
                <Color>Purple</Color>
                <Color>Red</Color>
                <Color>Silver</Color>
                <Color>Teal</Color>
                <Color>White</Color>
                <Color>Yellow</Color>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <BoxView Color="{Binding}"
                             Margin="3" />
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>     

이 예제에서는 ViewCell 각 색 항목에 대해 간단한 BoxView 항목을 만듭니다.

참고 항목

문자열 또는 숫자와 같은 공통 형식의 배열을 정의할 때 Pass 인수에 나열된 XAML 언어 기본 형식 태그를 사용합니다.

x:Null 태그 확장

x:Null 태그 확장은 클래스에서 지원됩니다NullExtension. 속성이 없으며 단순히 C# null 키워드(keyword) 해당하는 XAML입니다.

다음 XAML 예제에서는 태그 확장을 사용하는 x:Null 방법을 보여 줍니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.NullDemoPage"
             Title="x:Null Demo">
    <ContentPage.Resources>
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="48" />
            <Setter Property="FontFamily" Value="OpenSansRegular" />
        </Style>
    </ContentPage.Resources>

    <StackLayout Padding="10, 0">
        <Label Text="Text 1" />
        <Label Text="Text 2" />
        <Label Text="Text 3"
               FontFamily="{x:Null}" />
        <Label Text="Text 4" />
        <Label Text="Text 5" />
    </StackLayout>
</ContentPage>      

이 예제에서는 속성을 특정 글꼴로 Setter 설정하는 FontFamily 암시적 StyleLabel 정의가 포함됩니다. 그러나 세 번째는 Label 암시적 스타일에 정의된 글꼴을 다음으로 설정 FontFamilyx:Null하여 사용하지 않습니다.

DataTemplate 태그 확장

DataTemplate 태그 확장을 사용하면 형식을 .로 변환할 수 있습니다DataTemplate. 변환할 DataTemplate형식의 이름으로 설정된 형식string의 속성을 정의하는 TypeName 클래스에서 지원 DataTemplateExtension 됩니다. 속성은 TypeName .의 콘텐츠 속성입니다 DataTemplateExtension. 따라서 중괄호가 사용된 XAML 태그 식의 경우 식의 TypeName= 부분을 제거할 수 있습니다.

참고 항목

XAML 파서를 사용하면 DataTemplateExtension 클래스를 DataTemplate로 축약할 수 있습니다.

이 태그 확장의 일반적인 사용은 다음 예제와 같이 셸 애플리케이션에 있습니다.

<ShellContent Title="Monkeys"
              Icon="monkey.png"
              ContentTemplate="{DataTemplate views:MonkeysPage}" />

이 예제 MonkeysPage 에서는 속성 값 ShellContent.ContentTemplate 으로 설정된 a에서 ContentPageDataTemplatea로 변환됩니다. 이렇게 하면 MonkeysPage 애플리케이션 시작 시가 아니라 페이지 탐색이 발생할 때만 생성됩니다.

Shell 앱에 대한 자세한 내용은 Shell을 참조하세요.