Xamarin.Forms 스타일 소개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. 예를 들어 응용 프로그램이 여러 있을 Label 동일한 글꼴 옵션 및 있는 레이아웃 옵션을 다음 XAML 코드 예제에 표시 된 대로 인스턴스: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:

반복 될 수 있습니다 각 개별 컨트롤의 모양을 설정 하 고 오류가 발생 하기 쉽습니다.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#:

  • Style XAML에서 만든 인스턴스는 일반적으로 정의 ResourceDictionary 에 할당 된 합니다 Resources 컨트롤의 컬렉션 페이지에서 또는 Resources 응용 프로그램의 컬렉션입니다.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 필요는 Property Value.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 인스턴스를 지정 하 여 정의 되는 TargetType x: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. 다음 코드 예제는 명시적 스타일 (참고는 x:Key) XAML에서 만든: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, 대상 개체 여야 합니다는 VisualElement 일치 하는 TargetType 속성 값을 Style다음 XAML 코드 예제에 나와 있는 것 처럼: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. 예를 들어 설정를 Style 설정 하는 Label.TextColor Red 응용 프로그램 수준 설정 하는 페이지 수준 스타일에 의해 재정의 됩니다 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.Forms에 포함 된 기본 제공 스타일을 사용 하는 방법입니다.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.Forms 2.2 이전 합니다 StyleId 속성은 Pixate 같은 테마 엔진 및 UI 테스트에서 id에 대 한 응용 프로그램의 개별 요소를 식별 하는 데 사용 되었습니다.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.Forms 2.2 도입 합니다 AutomationId 속성에는 StyleId 속성입니다.However, Xamarin.Forms 2.2 introduced the AutomationId property, which has superseded the StyleId property.