XAML 태그 확장 사용Consuming XAML Markup Extensions

샘플 다운로드 샘플 다운로드Download Sample Download the sample

XAML 태그 확장은 다양 한 소스에서 요소 특성을 설정할 수 있도록 하 여 XAML의 기능과 유연성을 향상 시키는 데 도움이 됩니다.XAML markup extensions help enhance the power and flexibility of XAML by allowing element attributes to be set from a variety of sources. 몇 가지 XAML 태그 확장은 XAML 2009 사양의 일부입니다.Several XAML markup extensions are part of the XAML 2009 specification. 이러한 파일은 일반적인 x 네임 스페이스 접두사를 사용 하 여 XAML 파일에 표시 되며 일반적으로이 접두사를 사용 하 여 참조 됩니다.These appear in XAML files with the customary x namespace prefix, and are commonly referred to with this prefix. 이 문서에서는 다음과 같은 태그 확장에 대해 설명 합니다.This article discusses the following markup extensions:

  • x:Static – 정적 속성, 필드 또는 열거형 멤버를 참조 합니다.x:Static – reference static properties, fields, or enumeration members.
  • x:Reference – 페이지에서 명명 된 요소를 참조 합니다.x:Reference – reference named elements on the page.
  • x:Type – 특성을 System.Type 개체로 설정 합니다.x:Type – set an attribute to a System.Type object.
  • x:Array – 특정 형식의 개체 배열을 생성 합니다.x:Array – construct an array of objects of a particular type.
  • x:Null – 특성을 null 값으로 설정 합니다.x:Null – set an attribute to a null value.
  • OnPlatform – 플랫폼 별로 UI 모양을 사용자 지정 합니다.OnPlatform – customize UI appearance on a per-platform basis.
  • OnIdiom – 응용 프로그램이 실행 되 고 있는 장치를 기준으로 UI 모양을 사용자 지정 합니다.OnIdiom – customize UI appearance based on the idiom of the device the application is running on.
  • DataTemplate -형식을 DataTemplate변환 합니다.DataTemplate - converts a type into a DataTemplate.
  • FontImage -ImageSource를 표시할 수 있는 보기에 글꼴 아이콘을 표시 합니다.FontImage - display a font icon in any view that can display an ImageSource.

추가 XAML 태그 확장은 이전에 다른 XAML 구현에서 지원 되었으며 Xamarin.ios 에서도 지원 됩니다.Additional XAML markup extensions have historically been supported by other XAML implementations, and are also supported by Xamarin.Forms. 이에 대해서는 다른 문서에 자세히 설명 되어 있습니다.These are described more fully in other articles:

  • 리소스 사전 문서에설명 된 대로 리소스 사전에서 개체를 참조 StaticResource.StaticResource - reference objects from a resource dictionary, as described in the article Resource Dictionaries.
  • DynamicResource- 동적 스타일문서에 설명 된 대로 리소스 사전에 있는 개체의 변경 내용에 응답 합니다.DynamicResource - respond to changes in objects in a resource dictionary, as described in the article Dynamic Styles.
  • Binding-아티클 데이터 바인딩에설명 된 대로 두 개체의 속성 간에 링크를 설정 합니다.Binding - establish a link between properties of two objects, as described in the article Data Binding.
  • TemplateBinding-컨트롤 템플릿에서 바인딩문서에 설명 된 대로 컨트롤 템플릿에서 데이터 바인딩을 수행 합니다.TemplateBinding - performs data binding from a control template, as discussed in the article Binding from a Control Template.
  • RelativeSource- 상대적인바인딩 문서에 설명 된 대로 바인딩 대상의 위치를 기준으로 바인딩 소스를 설정 합니다.RelativeSource - sets the binding source relative to the position of the binding target, as discussed in the article Relative Bindings.

@No__t_1 레이아웃을 사용 하면 ConstraintExpression사용자 지정 태그 확장을 사용할 수 있습니다.The RelativeLayout layout makes use of the custom markup extension ConstraintExpression. 이 태그 확장은 RelativeLayout문서에 설명 되어 있습니다.This markup extension is described in the article RelativeLayout.

x:Static 태그 확장x:Static markup extension

@No__t_0 태그 확장은 StaticExtension 클래스에서 지원 됩니다.The x:Static markup extension is supported by the StaticExtension class. 클래스에는 public 상수, 정적 속성, 정적 필드 또는 열거형 멤버의 이름으로 설정 하는 string 형식의 Member 라는 단일 속성이 있습니다.The class has a single property named Member of type string that you set to the name of a public constant, static property, static field, or enumeration member.

@No__t_0를 사용 하는 일반적인 방법 중 하나는 먼저 MarkupExtensions 프로그램에서이 작은 AppConstants 클래스와 같은 일부 상수 또는 정적 변수를 사용 하 여 클래스를 정의 하는 것입니다.One common way to use x:Static is to first define a class with some constants or static variables, such as this tiny AppConstants class in the MarkupExtensions program:

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

X:Static Demo 페이지는 x:Static 태그 확장을 사용 하는 여러 가지 방법을 보여 줍니다.The x:Static Demo page demonstrates several ways to use the x:Static markup extension. 가장 자세한 방법은 Label.FontSize 속성-요소 태그 사이에 StaticExtension 클래스를 인스턴스화합니다.The most verbose approach instantiates the StaticExtension class between Label.FontSize property-element tags:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             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으로 약식으로 지정할 수 있습니다.The XAML parser also allows the StaticExtension class to be abbreviated as x:Static:

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

이 작업은 더 간단 하 게 수행할 수 있지만, 변경 내용에는 StaticExtension 클래스 및 멤버 설정을 중괄호 안에 배치 하는 기능이 포함 되어 있습니다.This can be simplified even further, but the change introduces some new syntax: It consists of putting the StaticExtension class and the member setting in curly braces. 결과 식은 FontSize 특성에 직접 설정 됩니다.The resulting expression is set directly to the FontSize attribute:

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

중괄호 안에는 따옴표가 없습니다 .Notice that there are no quotation marks within the curly braces. @No__t_1의 Member 속성은 더 이상 XML 특성이 아닙니다.The Member property of StaticExtension is no longer an XML attribute. 대신 태그 확장에 대 한 식의 일부입니다.It is instead part of the expression for the markup extension.

@No__t_0 약어를 개체 요소로 사용 하는 경우 x:Static 하는 것과 마찬가지로 중괄호 안의 식에서 약어를 약어로 지정할 수도 있습니다.Just as you can abbreviate x:StaticExtension to x:Static when you use it as an object element, you can also abbreviate it in the expression within curly braces:

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

@No__t_0 클래스에는이 속성을 클래스의 기본 콘텐츠 속성으로 표시 하는 Member 속성을 참조 하는 ContentProperty 특성이 있습니다.The StaticExtension class has a ContentProperty attribute referencing the property Member, which marks this property as the class's default content property. 중괄호로 표시 된 XAML 태그 확장의 경우 식의 Member= 부분을 제거할 수 있습니다.For XAML markup extensions expressed with curly braces, you can eliminate the Member= part of the expression:

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

이는 x:Static 태그 확장의 가장 일반적인 형식입니다.This is the most common form of the x:Static markup extension.

정적 데모 페이지에는 다른 두 가지 예가 포함 되어 있습니다.The Static Demo page contains two other examples. XAML 파일의 루트 태그에는 .NET System 네임 스페이스에 대 한 XML 네임 스페이스 선언이 포함 되어 있습니다.The root tag of the XAML file contains an XML namespace declaration for the .NET System namespace:

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

이렇게 하면 Label 글꼴 크기를 정적 필드 Math.PI 설정할 수 있습니다.This allows the Label font size to be set to the static field Math.PI. 이로 인해 크기가 작은 텍스트가 되므로 Scale 속성이 Math.E로 설정 됩니다.That results in rather small text, so the Scale property is set to Math.E:

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

마지막 예제는 Device.RuntimePlatform 값을 표시 합니다.The final example displays the Device.RuntimePlatform value. @No__t_0 static 속성은 두 Span 개체 사이에 줄 바꿈 문자를 삽입 하는 데 사용 됩니다.The Environment.NewLine static property is used to insert a new-line character between the two Span objects:

<Label HorizontalTextAlignment="Center"
       FontSize="{x:Static local:AppConstants.NormalFontSize}">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Runtime Platform: " />
            <Span Text="{x:Static sys:Environment.NewLine}" />
            <Span Text="{x:Static Device.RuntimePlatform}" />
        </FormattedString>
    </Label.FormattedText>
</Label>

실행 되는 샘플은 다음과 같습니다.Here's the sample running:

x:Static Demox:Static Demo

x:Reference 태그 확장x:Reference markup extension

@No__t_0 태그 확장은 ReferenceExtension 클래스에서 지원 됩니다.The x:Reference markup extension is supported by the ReferenceExtension class. 클래스에는 x:Name 이름이 지정 된 페이지의 요소 이름으로 설정 된 string 형식의 Name 이라는 단일 속성이 있습니다.The class has a single property named Name of type string that you set to the name of an element on the page that has been given a name with x:Name. Name 속성은 ReferenceExtension의 content 속성 이므로 x:Reference 중괄호로 표시 되는 경우 Name= 필요 하지 않습니다.This Name property is the content property of ReferenceExtension, so Name= is not required when x:Reference appears in curly braces.

@No__t_0 태그 확장은 데이터 바인딩에만 사용 되며 문서 데이터 바인딩에자세히 설명 되어 있습니다.The x:Reference markup extension is used exclusively with data bindings, which are described in more detail in the article Data Binding.

X:reference Demo 페이지는 데이터 바인딩과 x:Reference의 두 가지 사용, 즉 Binding 개체의 Source 속성을 설정 하는 데 사용 되는 첫 번째 및 두 번째 데이터 바인딩에 대 한 BindingContext 속성을 설정 하는 데 사용 되는 두 번째를 보여 줍니다. :The x:Reference Demo page shows two uses of x:Reference with data bindings, the first where it's used to set the Source property of the Binding object, and the second where it's used to set the BindingContext property for two data bindings:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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="CenterAndExpand"
               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="CenterAndExpand" />

    </StackLayout>
</ContentPage>

x:Reference 식 모두 ReferenceExtension 클래스 이름의 약식 버전을 사용 하 고 식의 Name= 부분을 제거 합니다.Both x:Reference expressions use the abbreviated version of the ReferenceExtension class name and eliminate the Name= part of the expression. 첫 번째 예제에서는 x:Reference 태그 확장이 Binding 태그 확장에 포함 되어 있습니다.In the first example, the x:Reference markup extension is embedded in the Binding markup extension. @No__t_0 및 StringFormat 설정은 쉼표로 구분 됩니다.Notice that the Source and StringFormat settings are separated by commas. 실행 중인 프로그램은 다음과 같습니다.Here's the program running:

x:Reference 데모x:Reference Demo

x:Type 태그 확장x:Type markup extension

@No__t_0 태그 확장은 C# typeof 키워드와 동일한 XAML입니다.The x:Type markup extension is the XAML equivalent of the C# typeof keyword. 클래스 또는 구조체 이름으로 설정 된 string 형식의 TypeName 라는 속성 하나를 정의 하는 TypeExtension 클래스에서 지원 됩니다.It is supported by the TypeExtension class, which defines one property named TypeName of type string that is set to a class or structure name. @No__t_0 태그 확장은 해당 클래스 또는 구조체의 System.Type 개체를 반환 합니다.The x:Type markup extension returns the System.Type object of that class or structure. TypeNameTypeExtension의 content 속성 이므로 x:Type 중괄호와 함께 표시 되는 경우 TypeName= 필요 하지 않습니다.TypeName is the content property of TypeExtension, so TypeName= is not required when x:Type appears with curly braces.

Xamarin.ios 내에는 Type 형식의 인수가 있는 여러 속성이 있습니다.Within Xamarin.Forms, there are several properties that have arguments of type Type. 예를 들면 StyleTargetType 속성 및 제네릭 클래스에서 인수를 지정 하는 데 사용 되는 x:TypeArguments 특성이 있습니다.Examples include the TargetType property of Style, and the x:TypeArguments attribute used to specify arguments in generic classes. 그러나 XAML 파서는 typeof 작업을 자동으로 수행 하 고 x:Type 태그 확장은 이러한 경우에 사용 되지 않습니다.However, the XAML parser performs the typeof operation automatically, and the x:Type markup extension is not used in these cases.

@No__t_0 필요한 한 위치 x:Array 태그 확장을 사용 하는 것입니다 .이에 대해서는 다음 섹션에서 설명 합니다.One place where x:Type is required is with the x:Array markup extension, which is described in the next section.

@No__t_0 태그 확장은 각 메뉴 항목이 특정 형식의 개체에 해당 하는 메뉴를 생성할 때에도 유용 합니다.The x:Type markup extension is also useful when constructing a menu where each menu item corresponds to an object of a particular type. @No__t_0 개체를 각 메뉴 항목과 연결한 다음 메뉴 항목을 선택할 때 개체를 인스턴스화할 수 있습니다.You can associate a Type object with each menu item, and then instantiate the object when the menu item is selected.

태그 확장 프로그램의 MainPage 탐색 메뉴가 작동 하는 방법입니다.This is how the navigation menu in MainPage in the Markup Extensions program works. Mainpage 파일에는 프로그램의 특정 페이지에 해당 하는 각 TextCellTableView 포함 되어 있습니다.The MainPage.xaml file contains a TableView with each TextCell corresponding to a particular page in the program:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MarkupExtensions"
             x:Class="MarkupExtensions.MainPage"
             Title="Markup Extensions"
             Padding="10">
    <TableView Intent="Menu">
        <TableRoot>
            <TableSection>
                <TextCell Text="x:Static Demo"
                          Detail="Access constants or statics"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:StaticDemoPage}" />

                <TextCell Text="x:Reference Demo"
                          Detail="Reference named elements on the page"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:ReferenceDemoPage}" />

                <TextCell Text="x:Type Demo"
                          Detail="Associate a Button with a Type"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:TypeDemoPage}" />

                <TextCell Text="x:Array Demo"
                          Detail="Use an array to fill a ListView"
                          Command="{Binding NavigateCommand}"
                          CommandParameter="{x:Type local:ArrayDemoPage}" />

                ···                          

        </TableRoot>
    </TableView>
</ContentPage>

태그 확장에서 열리는 기본 페이지는 다음과 같습니다.Here's the opening main page in Markup Extensions:

기본 페이지Main Page

CommandParameter 속성은 다른 페이지 중 하나를 참조 하는 x:Type 태그 확장으로 설정 됩니다.Each CommandParameter property is set to an x:Type markup extension that references one of the other pages. @No__t_0 속성은 NavigateCommand 라는 속성에 바인딩됩니다.The Command property is bound to a property named NavigateCommand. 이 속성은 코드 MainPage 파일에 정의 되어 있습니다.This property is defined in the MainPage code-behind file:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        NavigateCommand = new Command<Type>(async (Type pageType) =>
        {
            Page page = (Page)Activator.CreateInstance(pageType);
            await Navigation.PushAsync(page);
        });

        BindingContext = this;
    }

    public ICommand NavigateCommand { private set; get; }
}

@No__t_0 속성은 CommandParameter 값 — Type 형식의 인수를 사용 하 여 execute 명령을 구현 하는 Command 개체입니다.The NavigateCommand property is a Command object that implements an execute command with an argument of type Type — the value of CommandParameter. 메서드는 Activator.CreateInstance를 사용 하 여 페이지를 인스턴스화한 다음 탐색 합니다.The method uses Activator.CreateInstance to instantiate the page and then navigates to it. 생성자는 페이지의 BindingContext를 자신으로 설정 하 여 종료 됩니다 .이를 통해 CommandBinding를 사용할 수 있습니다.The constructor concludes by setting the BindingContext of the page to itself, which enables the Binding on Command to work. 이러한 코드 형식에 대 한 자세한 내용은 데이터 바인딩 문서 및 특히 명령 문서를 참조 하세요.See the Data Binding article and particularly the Commanding article for more details about this type of code.

X:Type Demo 페이지는 유사한 기법을 사용 하 여 xamarin.ios 요소를 인스턴스화하고 StackLayout에 추가 합니다.The x:Type Demo page uses a similar technique to instantiate Xamarin.Forms elements and to add them to a StackLayout. XAML 파일은 처음에 Binding로 설정 된 Command 속성이 있는 세 개의 Button 요소와 CommandParameter 속성을 세 가지 Xamarin 양식 보기 형식으로 설정 합니다.The XAML file initially consists of three Button elements with their Command properties set to a Binding and the CommandParameter properties set to types of three Xamarin.Forms views:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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="CenterAndExpand"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Slider}" />

        <Button Text="Create a Stepper"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Stepper}" />

        <Button Text="Create a Switch"
                HorizontalOptions="Center"
                VerticalOptions="CenterAndExpand"
                Command="{Binding CreateCommand}"
                CommandParameter="{x:Type Switch}" />
    </StackLayout>
</ContentPage>

코드 숨김이 파일은 CreateCommand 속성을 정의 하 고 초기화 합니다.The code-behind file defines and initializes the CreateCommand property:

public partial class TypeDemoPage : ContentPage
{
    public TypeDemoPage()
    {
        InitializeComponent();

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

        BindingContext = this;
    }

    public ICommand CreateCommand { private set; get; }
}

@No__t_0를 누를 때 실행 되는 메서드는 인수의 새 인스턴스를 만들고 해당 VerticalOptions 속성을 설정한 다음 StackLayout에 추가 합니다.The method that is executed when a Button is pressed creates a new instance of the argument, sets its VerticalOptions property, and adds it to the StackLayout. 그런 다음 세 개의 Button 요소가 동적으로 생성 된 뷰와 페이지를 공유 합니다.The three Button elements then share the page with dynamically created views:

x:Type 데모x:Type Demo

x:Array 태그 확장x:Array markup extension

@No__t_0 태그 확장을 사용 하면 태그에서 배열을 정의할 수 있습니다.The x:Array markup extension allows you to define an array in markup. 이 클래스는 두 가지 속성을 정의 하는 ArrayExtension 클래스에서 지원 됩니다.It is supported by the ArrayExtension class, which defines two properties:

  • 배열에 있는 요소의 형식을 나타내는 Type 형식의 Type입니다.Type of type Type, which indicates the type of the elements in the array.
  • 항목 자체의 컬렉션인 IList 형식의 Items입니다.Items of type IList, which is a collection of the items themselves. @No__t_0의 콘텐츠 속성입니다.This is the content property of ArrayExtension.

@No__t_0 태그 확장 자체는 중괄호로 표시 되지 않습니다.The x:Array markup extension itself never appears in curly braces. 대신 시작 및 끝 태그 x:Array 항목 목록을 구분 합니다.Instead, x:Array start and end tags delimit the list of items. @No__t_0 속성을 x:Type 태그 확장으로 설정 합니다.Set the Type property to an x:Type markup extension.

X:Array Demo 페이지에서는 ItemsSource 속성을 배열로 설정 하 여 x:Array를 사용 하 여 ListView에 항목을 추가 하는 방법을 보여 줍니다.The x:Array Demo page shows how to use x:Array to add items to a ListView by setting the ItemsSource property to an array:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             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>        

@No__t_0는 각 색 항목에 대해 간단한 BoxView를 만듭니다.The ViewCell creates a simple BoxView for each color entry:

x:Array Demox:Array Demo

이 배열에서 개별 Color 항목을 지정 하는 방법에는 여러 가지가 있습니다.There are several ways to specify the individual Color items in this array. @No__t_0 태그 확장을 사용할 수 있습니다.You can use an x:Static markup extension:

<x:Static Member="Color.Blue" />

또는 StaticResource를 사용 하 여 리소스 사전에서 색을 검색할 수 있습니다.Or, you can use StaticResource to retrieve a color from a resource dictionary:

<StaticResource Key="myColor" />

이 문서의 끝 부분을 향해 새 색 값을 만드는 사용자 지정 XAML 태그 확장이 표시 됩니다.Towards the end of this article, you'll see a custom XAML markup extension that also creates a new color value:

<local:HslColor H="0.5" S="1.0" L="0.5" />

문자열이 나 숫자와 같은 공용 형식의 배열을 정의할 때는 생성자 인수 전달 문서에 나열 된 태그를 사용 하 여 값을 구분 합니다.When defining arrays of common types like strings or numbers, use the tags listed in the Passing Constructor Arguments article to delimit the values.

x:Null 태그 확장x:Null markup extension

@No__t_0 태그 확장은 NullExtension 클래스에서 지원 됩니다.The x:Null markup extension is supported by the NullExtension class. 이 클래스에는 속성이 없으며 단순히 C# null 키워드에 해당 하는 XAML이 있습니다.It has no properties and is simply the XAML equivalent of the C# null keyword.

@No__t_0 태그 확장은 거의 필요 하지 않지만 거의 사용 되지 않지만, 필요한 경우에는 존재 하는 것이 좋습니다.The x:Null markup extension is rarely needed and seldom used, but if you do find a need for it, you'll be glad that it exists.

X:Null Demo 페이지는 x:Null 편리 하 게 사용할 수 있는 한 가지 시나리오를 보여 줍니다.The x:Null Demo page illustrates one scenario when x:Null might be convenient. @No__t_3 속성을 플랫폼에 종속 된 패밀리 이름으로 설정 하는 Setter를 포함 하는 Label에 대해 암시적 Style를 정의 한다고 가정 합니다.Suppose that you define an implicit Style for Label that includes a Setter that sets the FontFamily property to a platform-dependent family name:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MarkupExtensions.NullDemoPage"
             Title="x:Null Demo">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="FontSize" Value="48" />
                <Setter Property="FontFamily">
                    <Setter.Value>
                        <OnPlatform x:TypeArguments="x:String">
                            <On Platform="iOS" Value="Times New Roman" />
                            <On Platform="Android" Value="serif" />
                            <On Platform="UWP" Value="Times New Roman" />
                        </OnPlatform>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <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.Content>
</ContentPage>   

그런 다음 Label 요소 중 하나에 대해 FontFamily를 제외 하 고 암시적 Style의 모든 속성 설정을 선택 하 여 기본값을 사용할 수 있습니다.Then you discover that for one of the Label elements, you want all the property settings in the implicit Style except for the FontFamily, which you want to be the default value. 이 목적을 위해 다른 Style를 정의할 수 있지만, 가운데 Label에 설명 된 것 처럼 간단한 방법은 단순히 특정 LabelFontFamily 속성을 x:Null로 설정 하는 것입니다.You could define another Style for that purpose but a simpler approach is simply to set the FontFamily property of the particular Label to x:Null, as demonstrated in the center Label.

실행 중인 프로그램은 다음과 같습니다.Here's the program running:

x:Null 데모x:Null Demo

@No__t_0 요소 중 4 개에는 세리프 글꼴이 있지만 가운데 Label에는 기본 sans-serif 글꼴이 있습니다.Notice that four of the Label elements have a serif font, but the center Label has the default sans-serif font.

OnPlatform 태그 확장OnPlatform markup extension

@No__t_0 태그 확장을 사용 하 여 플랫폼 별로 UI 모양을 사용자 지정할 수 있습니다.The OnPlatform markup extension allows you to customize UI appearance on a per-platform basis. @No__t_1On 클래스와 동일한 기능을 제공 하지만 보다 간결한 표현을 제공 합니다.It provides the same functionality as the OnPlatform and On classes, but with a more concise representation.

@No__t_0 태그 확장은 다음 속성을 정의 하는 OnPlatformExtension 클래스에서 지원 됩니다.The OnPlatform markup extension is supported by the OnPlatformExtension class, which defines the following properties:

  • object 형식의 Default 이며, 플랫폼을 나타내는 속성에 적용 되는 기본값으로 설정 됩니다.Default of type object, that you set to a default value to be applied to the properties that represent platforms.
  • Android에 적용할 값으로 설정 하는 object 유형의 Android입니다.Android of type object, that you set to a value to be applied on Android.
  • GTK 플랫폼에 적용 되는 값으로 설정 하는 object 형식의 GTK입니다.GTK of type object, that you set to a value to be applied on GTK platforms.
  • iOS에 적용할 값으로 설정 하는 object 형식의 iOS입니다.iOS of type object, that you set to a value to be applied on iOS.
  • macOS에 적용 되는 값으로 설정 하는 object 유형의 macOS입니다.macOS of type object, that you set to a value to be applied on macOS.
  • Tizen 플랫폼에 적용 되는 값으로 설정 하는 object 형식의 Tizen입니다.Tizen of type object, that you set to a value to be applied on the Tizen platform.
  • 유니버설 Windows 플랫폼에 적용할 값으로 설정 하는 object 형식의 UWP입니다.UWP of type object, that you set to a value to be applied on the Universal Windows Platform.
  • Windows Presentation Foundation 플랫폼에 적용 되는 값으로 설정 하는 object 형식의 WPF입니다.WPF of type object, that you set to a value to be applied on the Windows Presentation Foundation platform.
  • IValueConverter 구현으로 설정 된 IValueConverter 형식의 Converter입니다.Converter of type IValueConverter, that you set to an IValueConverter implementation.
  • IValueConverter 구현에 전달할 값으로 설정 하는 object 형식의 ConverterParameter입니다.ConverterParameter of type object, that you set to a value to pass to the IValueConverter implementation.

참고

XAML 파서는 OnPlatformExtension 클래스를 OnPlatform으로 약식으로 지정할 수 있습니다.The XAML parser allows the OnPlatformExtension class to be abbreviated as OnPlatform.

@No__t_0 속성은 OnPlatformExtension의 content 속성입니다.The Default property is the content property of OnPlatformExtension. 따라서 중괄호로 표시 되는 XAML 태그 식의 경우 첫 번째 인수인 경우 식의 Default= 부분을 제거할 수 있습니다.Therefore, for XAML markup expressions expressed with curly braces, you can eliminate the Default= part of the expression provided that it's the first argument. @No__t_0 속성이 설정 되지 않은 경우 태그 확장이 BindableProperty를 대상으로 하는 경우 BindableProperty.DefaultValue 속성 값으로 기본 설정 됩니다.If the Default property isn't set, it will default to the BindableProperty.DefaultValue property value, provided that the markup extension is targeting a BindableProperty.

중요

XAML 파서는 OnPlatform 태그 확장을 사용 하는 속성에 올바른 형식의 값이 제공 될 것으로 예상 합니다.The XAML parser expects that values of the correct type will be provided to properties consuming the OnPlatform markup extension. 형식 변환이 필요한 경우 OnPlatform 태그 확장에서 Xamarin.ios에서 제공 하는 기본 변환기를 사용 하 여이를 수행 하려고 시도 합니다.If type conversion is necessary, the OnPlatform markup extension will attempt to perform it using the default converters provided by Xamarin.Forms. 그러나 기본 변환기에서 수행할 수 없는 일부 형식 변환이 있습니다. 이러한 경우에는 Converter 속성이 IValueConverter 구현으로 설정 되어야 합니다.However, there are some type conversions that can't be performed by the default converters and in these cases the Converter property should be set to an IValueConverter implementation.

Onplatform Demo 페이지는 OnPlatform 태그 확장을 사용 하는 방법을 보여 줍니다.The OnPlatform Demo page shows how to use the OnPlatform markup extension:

<BoxView Color="{OnPlatform Yellow, iOS=Red, Android=Green, UWP=Blue}"
         WidthRequest="{OnPlatform 250, iOS=200, Android=300, UWP=400}"  
         HeightRequest="{OnPlatform 250, iOS=200, Android=300, UWP=400}"
         HorizontalOptions="Center" />

이 예제에서는 세 개의 OnPlatform 식이 OnPlatformExtension 클래스 이름의 약식 버전을 사용 합니다.In this example, all three OnPlatform expressions use the abbreviated version of the OnPlatformExtension class name. 3 개의 OnPlatform 태그 확장은 BoxViewColor, WidthRequestHeightRequest 속성을 iOS, Android 및 UWP의 다른 값으로 설정 합니다.The three OnPlatform markup extensions set the Color, WidthRequest, and HeightRequest properties of the BoxView to different values on iOS, Android, and UWP. 태그 확장은 또한 지정 되지 않은 플랫폼에서 이러한 속성에 대 한 기본값을 제공 하지만 식의 Default= 부분을 제거 합니다.The markup extensions also provide default values for these properties on the platforms that aren't specified, while eliminating the Default= part of the expression. 설정 된 태그 확장 속성은 쉼표로 구분 됩니다.Notice that the markup extension properties that are set are separated by commas.

실행 중인 프로그램은 다음과 같습니다.Here's the program running:

OnPlatform DemoOnPlatform Demo

OnIdiom 태그 확장OnIdiom markup extension

@No__t_0 태그 확장을 사용 하면 응용 프로그램이 실행 되 고 있는 장치를 기준으로 UI 모양을 사용자 지정할 수 있습니다.The OnIdiom markup extension allows you to customize UI appearance based on the idiom of the device the application is running on. 다음 속성을 정의 하는 OnIdiomExtension 클래스에서 지원 됩니다.It's supported by the OnIdiomExtension class, which defines the following properties:

  • object 형식의 Default 장치 관용구을 나타내는 속성에 적용 되는 기본값으로 설정 됩니다.Default of type object, that you set to a default value to be applied to the properties that represent device idioms.
  • 휴대폰에 적용 되는 값으로 설정 하는 object 형식의 Phone입니다.Phone of type object, that you set to a value to be applied on phones.
  • 태블릿에 적용할 값으로 설정 하는 object 형식의 Tablet입니다.Tablet of type object, that you set to a value to be applied on tablets.
  • 데스크톱 플랫폼에 적용 되는 값으로 설정 하는 object 형식의 Desktop입니다.Desktop of type object, that you set to a value to be applied on desktop platforms.
  • TV 플랫폼에 적용 되는 값으로 설정 하는 object 유형의 TV입니다.TV of type object, that you set to a value to be applied on TV platforms.
  • 조사식 플랫폼에 적용 되는 값으로 설정 하는 object 형식의 Watch입니다.Watch of type object, that you set to a value to be applied on Watch platforms.
  • IValueConverter 구현으로 설정 된 IValueConverter 형식의 Converter입니다.Converter of type IValueConverter, that you set to an IValueConverter implementation.
  • IValueConverter 구현에 전달할 값으로 설정 하는 object 형식의 ConverterParameter입니다.ConverterParameter of type object, that you set to a value to pass to the IValueConverter implementation.

참고

XAML 파서는 OnIdiomExtension 클래스를 OnIdiom으로 약식으로 지정할 수 있습니다.The XAML parser allows the OnIdiomExtension class to be abbreviated as OnIdiom.

@No__t_0 속성은 OnIdiomExtension의 content 속성입니다.The Default property is the content property of OnIdiomExtension. 따라서 중괄호로 표시 되는 XAML 태그 식의 경우 첫 번째 인수인 경우 식의 Default= 부분을 제거할 수 있습니다.Therefore, for XAML markup expressions expressed with curly braces, you can eliminate the Default= part of the expression provided that it's the first argument.

중요

XAML 파서는 OnIdiom 태그 확장을 사용 하는 속성에 올바른 형식의 값이 제공 될 것으로 예상 합니다.The XAML parser expects that values of the correct type will be provided to properties consuming the OnIdiom markup extension. 형식 변환이 필요한 경우 OnIdiom 태그 확장에서 Xamarin.ios에서 제공 하는 기본 변환기를 사용 하 여이를 수행 하려고 시도 합니다.If type conversion is necessary, the OnIdiom markup extension will attempt to perform it using the default converters provided by Xamarin.Forms. 그러나 기본 변환기에서 수행할 수 없는 일부 형식 변환이 있습니다. 이러한 경우에는 Converter 속성이 IValueConverter 구현으로 설정 되어야 합니다.However, there are some type conversions that can't be performed by the default converters and in these cases the Converter property should be set to an IValueConverter implementation.

Onidiom Demo 페이지에서는 OnIdiom 태그 확장을 사용 하는 방법을 보여 줍니다.The OnIdiom Demo page shows how to use the OnIdiom markup extension:

<BoxView Color="{OnIdiom Yellow, Phone=Red, Tablet=Green, Desktop=Blue}"
         WidthRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HeightRequest="{OnIdiom 100, Phone=200, Tablet=300, Desktop=400}"
         HorizontalOptions="Center" />

이 예제에서는 세 개의 OnIdiom 식이 OnIdiomExtension 클래스 이름의 약식 버전을 사용 합니다.In this example, all three OnIdiom expressions use the abbreviated version of the OnIdiomExtension class name. 3 개의 OnIdiom 태그 확장은 BoxViewColor, WidthRequestHeightRequest 속성을 phone, 태블릿 및 데스크톱 관용구의 다른 값으로 설정 합니다.The three OnIdiom markup extensions set the Color, WidthRequest, and HeightRequest properties of the BoxView to different values on the phone, tablet, and desktop idioms. 또한 태그 확장은 지정 되지 않은 관용구의 이러한 속성에 대 한 기본값을 제공 하는 한편 식의 Default= 부분을 제거 합니다.The markup extensions also provide default values for these properties on the idioms that aren't specified, while eliminating the Default= part of the expression. 설정 된 태그 확장 속성은 쉼표로 구분 됩니다.Notice that the markup extension properties that are set are separated by commas.

실행 중인 프로그램은 다음과 같습니다.Here's the program running:

OnonedemoOnIdiom Demo

DataTemplate 태그 확장DataTemplate markup extension

@No__t_0 태그 확장을 사용 하 여 형식을 DataTemplate변환할 수 있습니다.The DataTemplate markup extension allows you to convert a type into a DataTemplate. @No__t_3로 변환할 형식의 이름으로 설정 된 string 형식의 TypeName 속성을 정의 하는 DataTemplateExtension 클래스에서 지원 됩니다.It's supported by the DataTemplateExtension class, which defines a TypeName property, of type string, that is set to the name of the type to be converted into a DataTemplate. @No__t_0 속성은 DataTemplateExtension의 content 속성입니다.The TypeName property is the content property of DataTemplateExtension. 따라서 중괄호로 표현 된 XAML 태그 식의 경우 식의 TypeName= 부분을 제거할 수 있습니다.Therefore, for XAML markup expressions expressed with curly braces, you can eliminate the TypeName= part of the expression.

참고

XAML 파서는 DataTemplateExtension 클래스를 DataTemplate으로 약식으로 지정할 수 있습니다.The XAML parser allows the DataTemplateExtension class to be abbreviated as DataTemplate.

이 태그 확장은 다음 예제와 같이 셸 응용 프로그램에서 일반적으로 사용 됩니다.A typical usage of this markup extension is in a Shell application, as shown in the following example:

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

이 예제에서 MonkeysPageContentPage 에서 DataTemplate로 변환 되며, ShellContent.ContentTemplate 속성 값으로 설정 됩니다.In this example, MonkeysPage is converted from a ContentPage to a DataTemplate, which is set as the value of the ShellContent.ContentTemplate property. 이렇게 하면 MonkeysPage는 응용 프로그램 시작이 아닌 페이지 탐색이 발생 하는 경우에만 만들어집니다.This ensures that MonkeysPage is only created when navigation to the page occurs, rather than at application startup.

셸 응용 프로그램에 대 한 자세한 내용은 Xamarin.ios shell(영문)을 참조 하세요.For more information about Shell applications, see Xamarin.Forms Shell.

FontImage 태그 확장FontImage markup extension

@No__t_0 태그 확장을 사용 하면 ImageSource를 표시할 수 있는 모든 보기에 글꼴 아이콘을 표시할 수 있습니다.The FontImage markup extension allows you to display a font icon in any view that can display an ImageSource. @No__t_0 클래스와 동일한 기능을 제공 하지만 보다 간결한 표현을 제공 합니다.It provides the same functionality as the FontImageSource class, but with a more concise representation.

@No__t_0 태그 확장은 다음 속성을 정의 하는 FontImageExtension 클래스에서 지원 됩니다.The FontImage markup extension is supported by the FontImageExtension class, which defines the following properties:

  • string 형식의 FontFamily 글꼴 아이콘이 속한 글꼴 패밀리입니다.FontFamily of type string, the font family to which the font icon belongs.
  • string 형식의 Glyph 글꼴 아이콘의 유니코드 문자 값입니다.Glyph of type string, the unicode character value of the font icon.
  • Color 형식의 Color 글꼴 아이콘을 표시할 때 사용 되는 색입니다.Color of type Color, the color to be used when displaying the font icon.
  • 렌더링 된 글꼴 아이콘의 크기 (장치 독립적 단위) 인 double 형식의 Size입니다.Size of type double, the size, in device-independent units, of the rendered font icon.

참고

XAML 파서는 FontImageExtension 클래스를 FontImage으로 약식으로 지정할 수 있습니다.The XAML parser allows the FontImageExtension class to be abbreviated as FontImage.

@No__t_0 속성은 FontImageExtension의 content 속성입니다.The Glyph property is the content property of FontImageExtension. 따라서 중괄호로 표시 되는 XAML 태그 식의 경우 첫 번째 인수인 경우 식의 Glyph= 부분을 제거할 수 있습니다.Therefore, for XAML markup expressions expressed with curly braces, you can eliminate the Glyph= part of the expression provided that it's the first argument.

FontImage Demo 페이지에서는 FontImage 태그 확장을 사용 하는 방법을 보여 줍니다.The FontImage Demo page shows how to use the FontImage markup extension:

<Image BackgroundColor="#D1D1D1"
       Source="{FontImage &#xf30c;, FontFamily={OnPlatform iOS=Ionicons, Android=ionicons.ttf#}, Size=44}" />

이 예제에서는 FontImageExtension 클래스 이름의 축약 된 버전을 사용 하 여 Image에 있는 아이콘 글꼴 제품군에서 XBox 아이콘을 표시 합니다.In this example, the abbreviated version of the FontImageExtension class name is used to display an XBox icon, from the Ionicons font family, in an Image. 또한이 식은 OnPlatform 태그 확장을 사용 하 여 iOS 및 Android에서 다른 FontFamily 속성 값을 지정 합니다.The expression also uses the OnPlatform markup extension to specify different FontFamily property values on iOS and Android. 또한 식의 Glyph= 부분이 제거 되며 설정 된 태그 확장 속성은 쉼표로 구분 됩니다.In addition, the Glyph= part of the expression is eliminated, and the markup extension properties that are set are separated by commas. 아이콘의 유니코드 문자는 \uf30c 있지만 XAML로 이스케이프 되어야 하므로 &#xf30c; 됩니다.Note that while the unicode character for the icon is \uf30c, it has to be escaped in XAML and so becomes &#xf30c;.

실행 중인 프로그램은 다음과 같습니다.Here's the program running:

FontImage 태그 확장의 스크린샷Screenshot of the FontImage markup extension

@No__t_0 개체에서 글꼴 아이콘 데이터를 지정 하 여 글꼴 아이콘을 표시 하는 방법에 대 한 자세한 내용은 글꼴 아이콘 표시를 참조 하세요.For information about displaying font icons by specifying the font icon data in a FontImageSource object, see Display font icons.

사용자 고유의 태그 확장 정의Define Your Own Markup Extensions

Xamarin.ios에서 사용할 수 없는 XAML 태그 확장이 필요한 경우 직접 만들수 있습니다.If you've encountered a need for a XAML markup extension that isn't available in Xamarin.Forms, you can create your own.