Xamarin.Forms 스타일 소개

  • 아티클

스타일을 사용하면 시각적 요소의 모양을 사용자 지정할 수 있습니다. 스타일은 특정 형식에 대해 정의되며 해당 형식에서 사용할 수 있는 속성에 대한 값을 포함합니다.

Xamarin.Forms 애플리케이션에는 모양이 동일한 여러 컨트롤이 포함되어 있는 경우가 많습니다. 예를 들어 애플리케이션에는 다음 XAML 코드 예제와 같이 동일한 글꼴 옵션 및 레이아웃 옵션이 있는 여러 Label 인스턴스가 있을 수 있습니다.

<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#에서 만든 해당 페이지를 보여 줍니다.

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. 이로 인해 결국 다음 스크린샷에 표시된 모양이 됩니다.

Label Appearance without Styles

각 개별 컨트롤의 모양을 설정하는 것은 반복적이고 오류가 발생하기 쉽습니다. 대신 모양을 정의하는 스타일을 만든 다음 필요한 컨트롤에 적용할 수 있습니다.

스타일 만들기

Style 클래스는 속성 값 컬렉션을 하나의 개체로 그룹화한 다음 여러 시각적 요소 인스턴스에 적용할 수 있습니다. 이렇게 하면 반복적인 태그를 줄일 수 있으며 애플리케이션 모양을 보다 쉽게 변경할 수 있습니다.

스타일은 주로 XAML 기반 애플리케이션용으로 설계되었지만 C#으로 만들 수도 있습니다.

  • StyleXAML에서 만든 인스턴스는 일반적으로 컨트롤, 페이지 또는 애플리케이션 컬렉션에 할당된 인스턴스에 Resources 정의 ResourceDictionary 됩니다Resources.
  • Style C#에서 만든 인스턴스는 일반적으로 페이지의 클래스 또는 전역적으로 액세스할 수 있는 클래스에 정의됩니다.

Style을 정의할 위치를 선택하면 사용할 수 있는 위치가 결정됩니다.

  • Style 컨트롤 수준에서 정의된 인스턴스는 컨트롤과 해당 자식에만 적용할 수 있습니다.
  • Style 페이지 수준에서 정의된 인스턴스는 페이지 및 해당 자식에만 적용할 수 있습니다.
  • 애플리케이션 수준에서 정의한 Style 인스턴스는 애플리케이션 전체에 적용할 수 있습니다.

각 Style 인스턴스에는 하나 이상의 Setter 개체의 컬렉션이 포함되며, 각 Setter는 Property과 Value를 가지고 있습니다. Property는 스타일이 적용된 요소의 바인딩 가능한 속성 이름이며 Value는 속성에 적용되는 값입니다.

각 Style 인스턴스는 명시적이거나 암시적일 수 있습니다.

  • 명시적Style 인스턴스는 a TargetType 및 값을 지정하고 x:Key 대상 요소의 Style 속성을 참조로 x:Key 설정하여 정의됩니다. 명시적 스타일에 대한 자세한 내용은 명시 적 스타일을 참조 하세요.
  • 암시적Style 인스턴스는 을 지정하여 정의됩니다TargetType. 그러면 인스턴스가 Style 해당 형식의 모든 요소에 자동으로 적용됩니다. 서브클래스는 TargetType 자동으로 Style 적용되지 않습니다. 암시적 스타일에 대한 자세한 내용은 암시 적 스타일을 참조 하세요.

Style을 만들 때 TargetType 속성이 항상 필요합니다. 다음 코드 예제에서는 XAML에서 만든 명시적 스타일(참고 x:Key)을 보여 줍니다.

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

대상 개체를 Style적용하려면 다음 XAML 코드 예제와 같이 대상 개체가 Style속성 값과 일치하는 TargetType 개체여야 합니다VisualElement.

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

뷰 계층 구조에서 낮은 스타일이 정의된 스타일보다 우선합니다. 예를 들어 애플리케이션 수준에서 해당 집합을 Red 설정하는 Label.TextColorStyle 것은 페이지 수준 스타일로 설정 Label.TextColorGreen하여 재정의됩니다. 마찬가지로 페이지 수준 스타일은 컨트롤 수준 스타일에 의해 재정의됩니다. 또한 컨트롤 속성에 직접 설정된 경우 Label.TextColor 스타일보다 우선합니다.

이 섹션의 문서에서는 명시적 및 암시적 스타일을 만들고 적용하는 방법, 전역 스타일을 만드는 방법, 스타일 상속, 런타임 시 스타일 변경에 응답하는 방법 및 포함된 Xamarin.Forms기본 제공 스타일을 사용하는 방법을 설명하고 설명합니다.

참고 항목

StyleId란?

Xamarin.Forms 2.2 StyleId 이전에는 UI 테스트 및 Pixate와 같은 테마 엔진에서 식별하기 위해 애플리케이션의 개별 요소를 식별하는 데 이 속성을 사용했습니다. 그러나 Xamarin.Forms 2.2는 AutomationId 속성을 대체한 속성을 도입했습니다 StyleId .