스타일 상속 Xamarin.Forms

아티클
03/05/2024

스타일은 다른 스타일에서 상속하여 중복을 줄이고 재사용을 사용하도록 설정할 수 있습니다.

XAML의 스타일 상속

스타일 상속은 속성을 기존 속성으로 설정 Style.BasedOn 하여 수행됩니다 Style. XAML에서 이 작업은 이전에 만든 Style태그 확장을 참조하는 StaticResource 태그 확장으로 속성을 설정 BasedOn 하여 수행됩니다. C#에서 이 작업은 속성을 인스턴스로 설정 BasedOn 하여 Style 수행됩니다.

기본 스타일에서 상속되는 스타일은 새 속성에 대한 인스턴스를 포함 Setter 하거나 기본 스타일에서 스타일을 재정의하는 데 사용할 수 있습니다. 또한 기본 스타일에서 상속되는 스타일은 동일한 형식 또는 기본 스타일이 대상으로 하는 형식에서 파생되는 형식을 대상으로 해야 합니다. 예를 들어 기본 스타일이 인스턴스를 View 대상으로 하는 경우 기본 스타일을 기반으로 하는 스타일은 클래스에서 View 파생되는 인스턴스 또는 형식(예: LabelButton 인스턴스)을 대상으로 할 View 수 있습니다.

다음 코드는 XAML 페이지의 명시적 스타일 상속을 보여 줍니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.StyleInheritancePage" Title="Inheritance" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="baseStyle" TargetType="View">
                <Setter Property="HorizontalOptions"
                        Value="Center" />
                <Setter Property="VerticalOptions"
                        Value="CenterAndExpand" />
            </Style>
            <Style x:Key="labelStyle" TargetType="Label"
                   BasedOn="{StaticResource baseStyle}">
                ...
                <Setter Property="TextColor" Value="Teal" />
            </Style>
            <Style x:Key="buttonStyle" TargetType="Button"
                   BasedOn="{StaticResource baseStyle}">
                <Setter Property="BorderColor" Value="Lime" />
                ...
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   Style="{StaticResource labelStyle}" />
            ...
            <Button Text="So is the button"
                    Style="{StaticResource buttonStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

대상 baseStyle 인스턴스 및 속성을 설정합니다 HorizontalOptionsVerticalOptions.View 컨트롤 baseStyle 에서 직접 설정되지 않습니다. 대신 바인딩 labelStylebuttonStyle 가능한 추가 속성 값을 설정하여 상속합니다. buttonStyle 그런 labelStyle 다음 해당 속성을 설정 Style 하여 Label 인스턴스 및 Button 인스턴스에 적용됩니다. 이로 인해 결국 다음 스크린샷에 표시된 모양이 됩니다.

참고 항목

암시적 스타일은 명시적 스타일에서 파생될 수 있지만 명시적 스타일은 암시적 스타일에서 파생될 수 없습니다.

상속 체인 존중

스타일은 뷰 계층 구조에서 같은 수준 이상의 스타일에서만 상속할 수 있습니다. 이는 다음을 의미합니다.

애플리케이션 수준 리소스는 다른 애플리케이션 수준 리소스에서만 상속할 수 있습니다.
페이지 수준 리소스는 애플리케이션 수준 리소스 및 기타 페이지 수준 리소스에서 상속할 수 있습니다.
제어 수준 리소스는 애플리케이션 수준 리소스, 페이지 수준 리소스 및 기타 제어 수준 리소스에서 상속할 수 있습니다.

이 상속 체인은 다음 코드 예제에서 설명합니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.StyleInheritancePage" Title="Inheritance" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="baseStyle" TargetType="View">
              ...
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style x:Key="labelStyle" TargetType="Label" BasedOn="{StaticResource baseStyle}">
                      ...
                    </Style>
                    <Style x:Key="buttonStyle" TargetType="Button" BasedOn="{StaticResource baseStyle}">
                      ...
                    </Style>
                </ResourceDictionary>
            </StackLayout.Resources>
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

이 예제 labelStylebuttonStyle 에서는 컨트롤 수준 리소스 baseStyle 이지만 페이지 수준 리소스입니다. 그러나 labelStylebuttonStylebaseStyle뷰 계층 구조의 해당 위치로 인해 상속하거나 buttonStyle상속 labelStyle 할 수는 baseStyle 없습니다.

C의 스타일 상속#

인스턴스가 Style 필요한 컨트롤의 속성에 Style 직접 할당되는 해당하는 C# 페이지는 다음 코드 예제에 나와 있습니다.

public class StyleInheritancePageCS : ContentPage
{
    public StyleInheritancePageCS ()
    {
        var baseStyle = new Style (typeof(View)) {
            Setters = {
                new Setter {
                    Property = View.HorizontalOptionsProperty, Value = LayoutOptions.Center    },
                ...
            }
        };

        var labelStyle = new Style (typeof(Label)) {
            BasedOn = baseStyle,
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Teal    }
            }
        };

        var buttonStyle = new Style (typeof(Button)) {
            BasedOn = baseStyle,
            Setters = {
                new Setter { Property = Button.BorderColorProperty, Value =    Color.Lime },
                ...
            }
        };
        ...

        Content = new StackLayout {
            Children = {
                new Label { Text = "These labels", Style = labelStyle },
                ...
                new Button { Text = "So is the button", Style = buttonStyle }
            }
        };
    }
}

스타일 상속 Xamarin.Forms

XAML의 스타일 상속

상속 체인 존중

C의 스타일 상속#

관련 링크

추가 리소스