Xamarin.ios 스타일 소개Introduction to Xamarin.Forms Styles

스타일을 사용 하면 시각적 요소의 모양을 사용자 지정할 수 있습니다. 스타일은 특정 형식에 대해 정의 되며 해당 형식에 사용할 수 있는 속성에 대 한 값을 포함 합니다.Styles allow the appearance of visual elements to be customized. Styles are defined for a specific type and contain values for the properties available on that type.

Xamarin Forms 응용 프로그램에는 동일한 모양의 여러 컨트롤이 포함 되어 있는 경우가 많습니다.Xamarin.Forms applications often contain multiple controls that have an identical appearance. 예를 들어 다음 XAML 코드 예제에 표시 된 것 처럼 응용 프로그램에 동일한 글꼴 옵션 및 레이아웃 옵션을 포함 하는 여러 개의 Label 인스턴스가 있을 수 있습니다.For example, an application may have multiple Label instances that have the same font options and layout options, as shown in the following XAML code example:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

다음 코드 예제에서는 C#에서 만든 해당 페이지를 보여 줍니다.The following code example shows the equivalent page created in C#:

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Label 인스턴스에는 Label표시 되는 텍스트의 모양을 제어 하는 동일한 속성 값이 있습니다.Each Label instance has identical property values for controlling the appearance of the text displayed by the Label. 이로 인해 결국 다음 스크린샷에 표시된 모양이 됩니다.This results in the appearance shown in the following screenshots:

스타일이 없는레이블 모양Label Appearance without Styles

각 개별 컨트롤의 모양을 반복적으로 설정 하면 오류가 발생할 수 있습니다.Setting the appearance of each individual control can be repetitive and error prone. 대신 모양을 정의 하는 스타일을 만든 다음 필요한 컨트롤에 적용할 수 있습니다.Instead, a style can be created that defines the appearance, and then applied to the required controls.

스타일 만들기Create a style

Style 클래스는 속성 값 컬렉션을 하나의 개체로 그룹화 한 후 여러 시각적 요소 인스턴스에 적용할 수 있습니다.The Style class groups a collection of property values into one object that can then be applied to multiple visual element instances. 이렇게 하면 반복적인 태그를 줄이고 응용 프로그램의 모양을 보다 쉽게 변경할 수 있습니다.This helps to reduce repetitive markup, and allows an applications appearance to be more easily changed.

스타일은 주로 XAML 기반 응용 프로그램용으로 설계 되었지만에서 C#만들 수도 있습니다.Although styles were designed primarily for XAML-based applications, they can also be created in C#:

  • XAML에서 만든 Style 인스턴스는 일반적으로 컨트롤, 페이지의 Resources 컬렉션 또는 응용 프로그램의 Resources 컬렉션에 할당 되는 ResourceDictionary 에 정의 됩니다.Style instances created in XAML are typically defined in a ResourceDictionary that's assigned to the Resources collection of a control, page, or to the Resources collection of the application.
  • Style 에서 C# 만든 인스턴스는 일반적으로 페이지의 클래스 또는 전역으로 액세스할 수 있는 클래스에서 정의 됩니다.Style instances created in C# are typically defined in the page's class, or in a class that can be globally accessed.

Style을 정의할 위치를 선택하면 사용할 수 있는 위치가 결정됩니다.Choosing where to define a Style impacts where it can be used:

  • 컨트롤 수준에서 정의 된 Style 인스턴스는 컨트롤과 해당 자식에만 적용할 수 있습니다.Style instances defined at the control level can only be applied to the control and to its children.
  • 페이지 수준에서 정의 된 Style 인스턴스는 페이지 및 해당 자식에만 적용할 수 있습니다.Style instances defined at the page level can only be applied to the page and to its children.
  • 응용 프로그램 수준에서 정의 된 Style 인스턴스는 응용 프로그램 전체에 적용할 수 있습니다.Style instances defined at the application level can be applied throughout the application.

Style 인스턴스에는 하나 이상의 Setter 개체 컬렉션이 포함 되며 각 Setter에는 PropertyValue있습니다.Each Style instance contains a collection of one or more Setter objects, with each Setter having a Property and a Value. Property은 스타일이 적용 되는 요소의 바인딩 가능한 속성 이름 이며 Value는 속성에 적용 되는 값입니다.The Property is the name of the bindable property of the element the style is applied to, and the Value is the value that is applied to the property.

Style 인스턴스는 명시적이거나 암시적일 수 있습니다.Each Style instance can be explicit, or implicit:

  • 명시적 Style 인스턴스는 TargetTypex:Key 값을 지정 하 고 대상 요소의 Style 속성을 x:Key 참조로 설정 하 여 정의 됩니다.An explicit Style instance is defined by specifying a TargetType and an x:Key value, and by setting the target element's Style property to the x:Key reference. 명시적 스타일에 대 한 자세한 내용은 명시적 스타일을 참조 하세요.For more information about explicit styles, see Explicit Styles.
  • 암시적 Style 인스턴스는 TargetType만 지정 하 여 정의 됩니다.An implicit Style instance is defined by specifying only a TargetType. 그러면 Style 인스턴스가 해당 형식의 모든 요소에 자동으로 적용 됩니다.The Style instance will then automatically be applied to all elements of that type. TargetType의 서브 클래스에는 자동으로 Style 적용 되지 않습니다.Note that subclasses of the TargetType do not automatically have the Style applied. 암시적 스타일에 대 한 자세한 내용은 암시적 스타일을 참조 하세요.For more information about implicit styles, see Implicit Styles.

Style를 만들 때 TargetType 속성은 항상 필요 합니다.When creating a Style, the TargetType property is always required. 다음 코드 예제에서는 XAML에서 만든 명시적 스타일 (x:Key참고)을 보여 줍니다.The following code example shows an explicit style (note the x:Key) created in XAML:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Style를 적용 하려면 다음 XAML 코드 예제에 표시 된 것 처럼 대상 개체가 StyleTargetType 속성 값과 일치 하는 VisualElement 이어야 합니다.To apply a Style, the target object must be a VisualElement that matches the TargetType property value of the Style, as shown in the following XAML code example:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

뷰 계층 구조의 하위 스타일은 상위 수준에서 정의 된 스타일 보다 우선 적용 됩니다.Styles lower in the view hierarchy take precedence over those defined higher up. 예를 들어 응용 프로그램 수준에서 Red Label.TextColor 를 설정 하는 Style 설정은 Label.TextColorGreen로 설정 하는 페이지 수준 스타일에 의해 재정의 됩니다.For example, setting a Style that sets Label.TextColor to Red at the application level will be overridden by a page level style that sets Label.TextColor to Green. 마찬가지로 페이지 수준 스타일은 컨트롤 수준 스타일에 의해 재정의 됩니다.Similarly, a page level style will be overridden by a control level style. 또한 컨트롤 속성에 대 한 Label.TextColor를 직접 설정 하는 경우 스타일 보다 우선 적용 됩니다.In addition, if Label.TextColor is set directly on a control property, this takes precedence over any styles.

이 단원의 문서에서는 명시적암시적 스타일을 만들고 적용 하는 방법, 전역 스타일을 만드는 방법, 스타일 상속, 런타임에 스타일 변경에 응답 하는 방법 및에 포함 된 작성 된 스타일을 사용 하는 방법에 대해 설명 하 고 설명 합니다. Xamarin.ios.The articles in this section demonstrate and explain how to create and apply explicit and implicit styles, how to create global styles, style inheritance, how to respond to style changes at runtime, and how to use the in-built styles included in Xamarin.Forms.

참고

StyleId 란?What is StyleId?

Xamarin.ios 2.2 이전에는 StyleId 속성을 사용 하 여 UI 테스트에서 식별할 수 있도록 응용 프로그램에서 개별 요소를 식별 하 고 Pixate와 같은 테마 엔진을 사용 했습니다.Prior to Xamarin.Forms 2.2, the StyleId property was used to identify individual elements in an application for identification in UI testing, and in theme engines such as Pixate. 그러나 Xamarin.ios 2.2에는 StyleId 속성을 대체 한 AutomationId 속성이 도입 되었습니다.However, Xamarin.Forms 2.2 introduced the AutomationId property, which has superseded the StyleId property.