XAML 태그 확장

샘플 찾아보기

.NET 다중 플랫폼 앱 UI(.NET MAUI) XAML 태그 확장을 사용하면 속성을 다른 원본에서 간접적으로 참조되는 개체 또는 값으로 설정할 수 있습니다. XAML 태그 확장은 개체를 공유하고 앱 전체에서 사용되는 상수를 참조하는 데 특히 중요하지만 데이터 바인딩에서 가장 큰 유틸리티를 찾습니다.

일반적으로 XAML을 사용하여 개체의 속성을 문자열, 숫자, 열거형 멤버 또는 백그라운드에서 값으로 변환되는 문자열과 같은 명시적 값으로 설정합니다. 그러나 속성이 다른 위치에 정의된 값을 대신 참조해야 하거나 런타임에 코드를 약간 처리해야 하는 경우도 있습니다. 이러한 목적을 위해 XAML 태그 확장을 사용할 수 있습니다.

XAML 태그 확장은 구현 IMarkupExtension하는 클래스의 코드에 의해 지원되기 때문에 이름이 지정됩니다. 사용자 고유의 사용자 지정 태그 확장을 작성할 수도 있습니다.

대부분의 경우 XAML 태그 확장은 중괄호, { 및 }로 구분된 특성 값으로 표시되기 때문에 XAML 파일에서 즉시 인식할 수 있지만 태그 확장도 기존 요소로 태그에 표시되기도 합니다.

Important

태그 확장에는 속성이 있을 수 있지만 XML 특성처럼 설정되지는 않습니다. 태그 확장에서 속성 설정은 쉼표로 구분되며 중괄호 안에 따옴표가 나타나지 않습니다.

공유 리소스

일부 XAML 페이지에는 속성이 동일한 값으로 설정된 여러 보기가 포함되어 있습니다. 예를 들어 이러한 Button 개체에 대한 많은 속성 설정은 동일합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">
    <StackLayout>
        <Button Text="Do this!"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                BorderWidth="3"
                Rotation="-15"
                TextColor="Red"
                FontSize="24" />
        <Button Text="Do that!"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                BorderWidth="3"
                Rotation="-15"
                TextColor="Red"
                FontSize="24" />
        <Button Text="Do the other thing!"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                BorderWidth="3"
                Rotation="-15"
                TextColor="Red"
                FontSize="24" />
    </StackLayout>
</ContentPage>

이러한 속성 중 하나를 변경해야 하는 경우 세 번이 아니라 한 번만 변경하는 것이 좋습니다. 코드인 경우 상수 및 정적 읽기 전용 개체를 사용하여 이러한 값을 일관되고 쉽게 수정할 수 있습니다.

XAML에서 인기 있는 솔루션 중 하나는 이러한 값 또는 개체를 리소스 사전에 저장하는 것입니다. 클래스는 VisualElement 형식의 키와 형식 ResourceDictionary값이 있는 사전인 형식 string 의 object속성을 Resources 정의합니다. 이 사전에 개체를 배치한 다음 XAML의 태그에서 참조할 수 있습니다.

페이지에서 리소스 사전을 사용하려면 페이지 맨 위에 속성 요소 태그 쌍 Resources 을 포함하고 이러한 태그 내에 리소스를 추가합니다. 다양한 형식의 개체와 값을 리소스 사전에 추가할 수 있습니다. 이러한 형식은 인스턴스화할 수 있어야 합니다. 예를 들어 추상 클래스일 수는 없습니다. 이러한 형식에는 공용 매개 변수가 없는 생성자도 있어야 합니다. 각 항목에는 특성으로 x:Key 지정된 사전 키가 필요합니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">
    <ContentPage.Resources>
        <LayoutOptions x:Key="horzOptions"
                       Alignment="Center" />
        <LayoutOptions x:Key="vertOptions"
                       Alignment="Center" />
    </ContentPage.Resources>
    ...
</ContentPage>

이 예제에서 두 리소스는 구조체 형식 LayoutOptions의 값이며 각각에는 고유한 키와 하나 또는 두 개의 속성 집합이 있습니다. 코드 및 태그에서는 정적 필드를 LayoutOptions사용하는 것이 훨씬 더 일반적이지만 여기서는 속성을 설정하는 것이 더 편리합니다.

참고 항목

선택적 ResourceDictionary 태그는 태그의 Resources 자식으로 포함할 수 있습니다.

그런 다음, XAML 태그 확장을 사용하여 해당 리소스와 VerticalOptions 속성을 설정 HorizontalOptions 하여 개체에서 리소스를 사용할 Button StaticResource 수 있습니다.

<Button Text="Do this!"
        HorizontalOptions="{StaticResource horzOptions}"
        VerticalOptions="{StaticResource vertOptions}"
        BorderWidth="3"
        Rotation="-15"
        TextColor="Red"
        FontSize="24" />

StaticResource 태그 확장은 항상 중괄호로 구분되며 사전 키를 포함합니다. 이름은 StaticResource .NET MAUI에서도 DynamicResource지원하는 이름을 구분합니다. DynamicResource 는 런타임에 변경될 수 있는 값과 연결된 사전 키에 대한 것이며 StaticResource 페이지의 요소가 생성될 때 사전의 요소에 한 번만 액세스합니다. XAML 파서가 태그 확장을 발견 StaticResource 할 때마다 시각적 트리를 검색하고 해당 키를 포함하는 첫 번째 ResourceDictionary 검색을 사용합니다.

및 속성에 대한 사전에 double을 BorderWidthRotationFontSize 저장해야 합니다. XAML은 다음과 같은 x:Double x:Int32일반적인 데이터 형식에 대한 태그를 편리하게 정의합니다.

<ContentPage.Resources>
        <LayoutOptions x:Key="horzOptions"
                       Alignment="Center" />
        <LayoutOptions x:Key="vertOptions"
                       Alignment="Center" />
        <x:Double x:Key="borderWidth">3</x:Double>
        <x:Double x:Key="rotationAngle">-15</x:Double>
        <x:Double x:Key="fontSize">24</x:Double>        
</ContentPage.Resources>

이러한 추가 3개 리소스는 값과 동일한 방식으로 LayoutOptions 참조할 수 있습니다.

<Button Text="Do this!"
        HorizontalOptions="{StaticResource horzOptions}"
        VerticalOptions="{StaticResource vertOptions}"
        BorderWidth="{StaticResource borderWidth}"
        Rotation="{StaticResource rotationAngle}"
        TextColor="Red"
        FontSize="{StaticResource fontSize}" />

형식의 리소스의 경우 이러한 형식 Color의 특성을 직접 할당할 때 사용하는 것과 동일한 문자열 표현을 사용할 수 있습니다. .NET MAUI에 포함된 형식 변환기는 리소스를 만들 때 호출됩니다. 리소스 사전 내에서 클래스를 OnPlatform 사용하여 플랫폼에 대해 다른 값을 정의할 수도 있습니다. 다음 예제에서는 이 클래스를 사용하여 다른 텍스트 색을 설정합니다.

<OnPlatform x:Key="textColor"
            x:TypeArguments="Color">
    <On Platform="iOS" Value="Red" />
    <On Platform="Android" Value="Aqua" />
</OnPlatform>

리소스는 OnPlatform 사전의 개체이기 때문에 특성을 가져오고x:TypeArguments, 제네릭 클래스이기 때문에 특성을 가져옵니다x:Key. 개체가 iOS초기화될 때 , 및 Android 특성이 값으로 변환 Color 됩니다.

다음 예제에서는 6개의 공유 값에 액세스하는 세 개의 단추를 보여 줍니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SharedResourcesPage"
             Title="Shared Resources Page">
    <ContentPage.Resources>
        <LayoutOptions x:Key="horzOptions"
                       Alignment="Center" />
        <LayoutOptions x:Key="vertOptions"
                       Alignment="Center" />
        <x:Double x:Key="borderWidth">3</x:Double>
        <x:Double x:Key="rotationAngle">-15</x:Double>
        <x:Double x:Key="fontSize">24</x:Double>    
        <OnPlatform x:Key="textColor"
                    x:TypeArguments="Color">
            <On Platform="iOS" Value="Red" />
            <On Platform="Android" Value="Aqua" />
            <On Platform="WinUI" Value="#80FF80" />
        </OnPlatform>
    </ContentPage.Resources>

    <StackLayout>
        <Button Text="Do this!"
                HorizontalOptions="{StaticResource horzOptions}"
                VerticalOptions="{StaticResource vertOptions}"
                BorderWidth="{StaticResource borderWidth}"
                Rotation="{StaticResource rotationAngle}"
                TextColor="{StaticResource textColor}"
                FontSize="{StaticResource fontSize}" />
        <Button Text="Do that!"
                HorizontalOptions="{StaticResource horzOptions}"
                VerticalOptions="{StaticResource vertOptions}"
                BorderWidth="{StaticResource borderWidth}"
                Rotation="{StaticResource rotationAngle}"
                TextColor="{StaticResource textColor}"
                FontSize="{StaticResource fontSize}" />
        <Button Text="Do the other thing!"
                HorizontalOptions="{StaticResource horzOptions}"
                VerticalOptions="{StaticResource vertOptions}"
                BorderWidth="{StaticResource borderWidth}"
                Rotation="{StaticResource rotationAngle}"
                TextColor="{StaticResource textColor}"
                FontSize="{StaticResource fontSize}" />
    </StackLayout>
</ContentPage>

다음 스크린샷은 일관된 스타일을 확인합니다.

페이지 맨 위에 컬렉션을 정의하는 Resources 것이 일반적이지만 페이지의 다른 요소에 컬렉션을 가질 Resources 수 있습니다. 예를 들어 다음 예제에서는 다음에 추가된 리소스를 보여 줍니다.StackLayout

<StackLayout>
    <StackLayout.Resources>
        <Color x:Key="textColor">Blue</Color>
    </StackLayout.Resources>
    ...
</StackLayout>

리소스 사전에 저장된 가장 일반적인 개체 유형 중 하나는 속성 설정 컬렉션을 정의하는 .NET MAUI Style입니다. 스타일에 대한 자세한 내용은 XAML을 사용하는 스타일 앱을 참조하세요.

참고 항목

리소스 사전의 목적은 개체를 공유하는 것입니다. 따라서 리소스 사전이나 Button 같은 Label 컨트롤을 배치하는 것은 의미가 없습니다. 동일한 인스턴스가 페이지에 두 번 표시될 수 없으므로 시각적 요소를 공유할 수 없습니다.

x:Static 태그 확장

태그 확장 외에도 StaticResource 태그 확장도 x:Static 있습니다. 그러나 리소스 사전에서 개체를 반환하는 동안 StaticResource 공용 정적 필드,x:Static 공용 정적 속성, 공용 상수 필드 또는 열거형 멤버에 액세스합니다.

참고 항목

StaticResource 태그 확장은 리소스 사전을 정의하는 XAML 구현에서 지원되지만 x:Static 접두사에서 알 수 있듯이 x XAML의 내장 부분입니다.

다음 예제에서는 정적 필드 및 열거형 멤버를 명시적으로 참조하는 방법을 x:Static 보여 줍니다.

<Label Text="Hello, XAML!"
       VerticalOptions="{x:Static LayoutOptions.Start}"
       HorizontalTextAlignment="{x:Static TextAlignment.Center}"
       TextColor="{x:Static Colors.Aqua}" />

태그 확장의 x:Static 주요 용도는 사용자 고유의 코드에서 정적 필드 또는 속성을 참조하는 것입니다. 예를 들어 앱 전체의 AppConstants 여러 페이지에서 사용할 수 있는 일부 정적 필드가 포함된 클래스는 다음과 같습니다.

namespace XamlSamples
{
    static class AppConstants
    {
        public static readonly Color BackgroundColor = Colors.Aqua;
        public static readonly Color ForegroundColor = Colors.Brown;
    }
}

XAML 파일에서 이 클래스의 정적 필드를 참조하려면 XML 네임스페이스 선언을 사용하여 이 파일이 있는 위치를 지정해야 합니다. 각 추가 XML 네임스페이스 선언은 새 접두사를 정의합니다. 루트 앱 네임스페 AppConstants이스에 대한 로컬 클래스에 액세스하려면 접두 local사를 사용할 수 있습니다. 네임스페이스 선언은 C# namespace 정의 또는 using 지시문에 표시되는 이름인 .NET 네임스페이스 이름이라고도 하는 CLR(공용 언어 런타임) 네임스페이스 이름을 나타내야 합니다.

xmlns:local="clr-namespace:XamlSamples"

.NET 네임스페이스에 대한 XML 네임스페이스 선언을 정의할 수도 있습니다. 예를 들어 어셈블리에 있는 sys 표준 .NET System 네임스페이스의 netstandard 접두사는 다음과 같습니다. 이 어셈블리는 다른 어셈블리이므로 어셈블리 이름도 지정해야 합니다. 이 경우 netstandard:

xmlns:sys="clr-namespace:System;assembly=netstandard"

참고 항목

키워드 clr-namespace 뒤에 콜론과 .NET 네임스페이스 이름, 세미콜론, 키워드 assembly, 등호 및 어셈블리 이름이 옵니다.

그런 다음 XML 네임스페이스를 선언한 후 정적 필드를 사용할 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamlSamples"
             xmlns:sys="clr-namespace:System;assembly=netstandard"
             x:Class="XamlSamples.StaticConstantsPage"
             Title="Static Constants Page"
             Padding="5,25,5,0">
    <StackLayout>
       <Label Text="Hello, XAML!"
              TextColor="{x:Static local:AppConstants.BackgroundColor}"
              BackgroundColor="{x:Static local:AppConstants.ForegroundColor}"
              FontAttributes="Bold"
              FontSize="30"
              HorizontalOptions="Center" />
      <BoxView WidthRequest="{x:Static sys:Math.PI}"
               HeightRequest="{x:Static sys:Math.E}"
               Color="{x:Static local:AppConstants.ForegroundColor}"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand"
               Scale="100" />
    </StackLayout>
</ContentPage>

이 예제 BoxView 에서는 차원이 100으로 설정 Math.PI 되고 Math.E크기가 100으로 조정됩니다.

기타 태그 확장

여러 태그 확장은 XAML에 내장되어 있으며 .NET MAUI XAML에서 지원됩니다. 이들 중 일부는 자주 사용되지 않지만 필요할 때 필수적입니다.

• 속성에 기본적으로 값 null 이 아닌 값이 있지만 설정 null하려는 경우 태그 확장으로 {x:Null} 설정합니다.
• 속성이 형식Type인 경우 태그 확장을 {x:Type someClass}사용하여 개체에 할당할 Type 수 있습니다.
• 태그 확장을 사용하여 XAML에서 배열을 정의할 x:Array 수 있습니다. 이 태그 확장에는 배열에 있는 요소의 형식을 나타내는 명명된 Type 필수 특성이 있습니다.

XAML 태그 확장에 대한 자세한 내용은 XAML 태그 확장 사용을 참조 하세요.

다음 단계

.NET MAUI 데이터 바인딩을 사용하면 두 개체의 속성을 연결하여 한 개체의 변경으로 인해 다른 개체가 변경되도록 할 수 있습니다.

데이터 바인딩 기본 사항