Xamarin.ios 스타일 클래스Xamarin.Forms Style Classes

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

Xamarin.ios 스타일 클래스를 사용 하면 스타일 상속을 사용 하지 않고 컨트롤에 여러 스타일을 적용할 수 있습니다.Xamarin.Forms style classes enable multiple styles to be applied to a control, without resorting to style inheritance.

스타일 클래스 만들기Create style classes

스타일 클래스는 클래스 이름을 나타내는에 Class Stylestring 한 속성을 설정 하 여 만들 수 있습니다.A style class can be created by setting the Class property on a Style to a string that represents the class name. 이에서 제공 하는 이점에는 x:Key 특성을 사용 하 여 명시적 스타일을 정의 하는 것 보다 여러 스타일 클래스를에 적용할 VisualElement수 있습니다.The advantage this offers, over defining an explicit style using the x:Key attribute, is that multiple style classes can be applied to a VisualElement.

중요

여러 스타일이 서로 다른 형식을 대상으로 하는 경우 동일한 클래스 이름을 공유할 수 있습니다.Multiple styles can share the same class name, provided they target different types. 이렇게 하면 이름이 같은 여러 스타일 클래스를 사용 하 여 다른 형식을 대상으로 지정할 수 있습니다.This enables multiple style classes, that are identically named, to target different types.

다음 예제에서는 세 가지 BoxView 스타일 클래스 VisualElement 와 스타일 클래스를 보여 줍니다.The following example shows three BoxView style classes, and a VisualElement style class:

<ContentPage ...>
    <ContentPage.Resources>
        <Style TargetType="BoxView"
               Class="Separator">
            <Setter Property="BackgroundColor"
                    Value="#CCCCCC" />
            <Setter Property="HeightRequest"
                    Value="1" />
        </Style>

        <Style TargetType="BoxView"
               Class="Rounded">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="10" />
        </Style>    

        <Style TargetType="BoxView"
               Class="Circle">
            <Setter Property="BackgroundColor"
                    Value="#1FAECE" />
            <Setter Property="WidthRequest"
                    Value="100" />
            <Setter Property="HeightRequest"
                    Value="100" />
            <Setter Property="HorizontalOptions"
                    Value="Start" />
            <Setter Property="CornerRadius"
                    Value="50" />
        </Style>

        <Style TargetType="VisualElement"
               Class="Rotated"
               ApplyToDerivedTypes="true">
            <Setter Property="Rotation"
                    Value="45" />
        </Style>        
    </ContentPage.Resources>
</ContentPage>

, Separator 및스타일Circle 클래스는 각각 속성을 BoxView 특정 값으로 설정 합니다. RoundedThe Separator, Rounded, and Circle style classes each set BoxView properties to specific values.

Style 클래스에는 TargetTypeVisualElement가 있습니다. 즉, VisualElement 인스턴스에만 적용할 수 있습니다. RotatedThe Rotated style class has a TargetType of VisualElement, which means it can only be applied to VisualElement instances. 그러나 해당 ApplyToDerivedTypes 속성은로 true설정 됩니다. 그러면와 BoxView같이에서 VisualElement파생 된 모든 컨트롤에 적용할 수 있습니다.However, its ApplyToDerivedTypes property is set to true, which ensures that it can be applied to any controls that derive from VisualElement, such as BoxView. 파생 형식에 스타일을 적용 하는 방법에 대 한 자세한 내용은 파생 형식에 스타일 적용을 참조 하세요.For more information about applying a style to a derived type, see Apply a style to derived types.

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

var separatorBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Separator",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#CCCCCC")
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 1
        }
    }
};

var roundedBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Rounded",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 10
        }
    }
};

var circleBoxViewStyle = new Style(typeof(BoxView))
{
    Class = "Circle",
    Setters =
    {
        new Setter
        {
            Property = VisualElement.BackgroundColorProperty,
            Value = Color.FromHex("#1FAECE")
        },
        new Setter
        {
            Property = VisualElement.WidthRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = VisualElement.HeightRequestProperty,
            Value = 100
        },
        new Setter
        {
            Property = View.HorizontalOptionsProperty,
            Value = LayoutOptions.Start
        },
        new Setter
        {
            Property = BoxView.CornerRadiusProperty,
            Value = 50
        }
    }
};

var rotatedVisualElementStyle = new Style(typeof(VisualElement))
{
    Class = "Rotated",
    ApplyToDerivedTypes = true,
    Setters =
    {
        new Setter
        {
            Property = VisualElement.RotationProperty,
            Value = 45
        }
    }
};

Resources = new ResourceDictionary
{
    separatorBoxViewStyle,
    roundedBoxViewStyle,
    circleBoxViewStyle,
    rotatedVisualElementStyle
};

스타일 클래스 사용Consume style classes

스타일 클래스는 형식의 StyleClass IList<string>컨트롤 속성을 스타일 클래스 이름 목록으로 설정 하 여 사용할 수 있습니다.Style classes can be consumed by setting the StyleClass property of the control, which is of type IList<string>, to a list of style class names. 컨트롤의 형식이 스타일 클래스 TargetType 의와 일치 하는 경우 스타일 클래스가 적용 됩니다.The style classes will be applied, provided that the type of the control matches the TargetType of the style classes.

다음 예제에서는 각각 다른 BoxView 스타일 클래스로 설정 된 세 가지 인스턴스를 보여 줍니다.The following example shows three BoxView instances, each set to different style classes:

<ContentPage ...>
    <ContentPage.Resources>
        ...
    </ContentPage.Resources>
    <StackLayout Margin="20">
        <BoxView StyleClass="Separator" />       
        <BoxView WidthRequest="100"
                 HeightRequest="100"
                 HorizontalOptions="Center"
                 StyleClass="Rounded, Rotated" />
        <BoxView HorizontalOptions="Center"
                 StyleClass="Circle" />
    </StackLayout>
</ContentPage>    

이 예제에서 첫 BoxView 번째는 줄 분리자로 스타일이 지정 되 고 세 BoxView 번째는 원형입니다.In this example, the first BoxView is styled to be a line separator, while the third BoxView is circular. 두 번째 BoxView 는 두 개의 스타일 클래스를 적용 하며,이 클래스는 둥근 모퉁이를 제공 하 고 45도 회전 합니다.The second BoxView has two style classes applied to it, which give it rounded corners and rotate it 45 degrees:

스타일 클래스를 사용 하 여 스타일 지정 된 BoxViews

중요

StyleClass 속성이 형식이IList<string>기 때문에 여러 스타일 클래스를 컨트롤에 적용할 수 있습니다.Multiple style classes can be applied to a control because the StyleClass property is of type IList<string>. 이 경우 스타일 클래스는 오름차순 목록 순서로 적용 됩니다.When this occurs, style classes are applied in ascending list order. 따라서 여러 스타일 클래스가 동일한 속성을 설정 하는 경우 가장 높은 목록 위치에 있는 스타일 클래스의 속성이 우선적으로 적용 됩니다.Therefore, when multiple style classes set identical properties, the property in the style class that's in the highest list position will take precedence.

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

...
Content = new StackLayout
{
    Children =
    {
        new BoxView { StyleClass = new [] { "Separator" } },
        new BoxView { WidthRequest = 100, HeightRequest = 100, HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Rounded", "Rotated" } },
        new BoxView { HorizontalOptions = LayoutOptions.Center, StyleClass = new [] { "Circle" } }
    }
};