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:StaticExtension x:Static 로 사용할 수 있는 것처럼 중괄호 내의 식에서 축약할 수도 있습니다.
<Label Text="Label No. 4"
FontSize="{x:Static Member=local:AppConstants.NormalFontSize}" />
클래스에는 StaticExtension ContentProperty 이 속성을 클래스의 기본 콘텐츠 속성 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="π × 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}° 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 암시적 Style Label 정의가 포함됩니다. 그러나 세 번째는 Label 암시적 스타일에 정의된 글꼴을 다음으로 설정 FontFamily x: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에서 ContentPage DataTemplatea로 변환됩니다. 이렇게 하면 MonkeysPage 애플리케이션 시작 시가 아니라 페이지 탐색이 발생할 때만 생성됩니다.
Shell 앱에 대한 자세한 내용은 Shell을 참조하세요.
.NET MAUI