의 전역 스타일 Xamarin.Forms

Download Sample 샘플 다운로드

스타일을 애플리케이션의 리소스 사전에 추가하여 전역적으로 사용할 수 있습니다. 이렇게 하면 페이지 또는 컨트롤에서 스타일이 중복되는 것을 방지할 수 있습니다.

XAML에서 전역 스타일 만들기

기본적으로 템플릿에서 만든 모든 Xamarin.Forms 애플리케이션은 App 클래스를 사용하여 하위 클래스를 Application 구현합니다. 애플리케이션 수준에서 선언 Style 하려면 애플리케이션에서 ResourceDictionary XAML을 사용하여 기본 클래스를 XAML 클래스 및 연결된 코드 숨김으로 바꿔야 합니다. 자세한 내용은 앱 클래스 작업을 참조 하세요.

다음 코드 예제는 애플리케이션 수준에서 선언된 것을 보여줍니다 Style .

<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.App">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="buttonStyle" TargetType="Button">
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="BorderColor" Value="Lime" />
                <Setter Property="BorderRadius" Value="5" />
                <Setter Property="BorderWidth" Value="5" />
                <Setter Property="WidthRequest" Value="200" />
                <Setter Property="TextColor" Value="Teal" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

인스턴스 ResourceDictionaryButton 모양을 설정하는 데 사용되는 단일 명시적 스타일을 buttonStyle정의합니다. 그러나 전역 스타일은 명시적이거나암시적수 있습니다.

다음 코드 예제에서는 페이지의 인스턴스에 buttonStyle 적용하는 XAML 페이지를 Button 보여 줍니다.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Button Text="These buttons" Style="{StaticResource buttonStyle}" />
            <Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
            <Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

이로 인해 결국 다음 스크린샷에 표시된 모양이 됩니다.

Global Styles Example

페이지에서 ResourceDictionary스타일을 만드는 방법에 대한 자세한 내용은 명시적 스타일 및 암시적 스타일을 참조하세요.

스타일 재정의

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="buttonStyle" TargetType="Button">
                ...
                <Setter Property="TextColor" Value="Red" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style x:Key="buttonStyle" TargetType="Button">
                        ...
                        <Setter Property="TextColor" Value="Blue" />
                    </Style>
                </ResourceDictionary>
            </StackLayout.Resources>
            <Button Text="These buttons" Style="{StaticResource buttonStyle}" />
            <Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
            <Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

애플리케이션 수준에서 정의된 원본 buttonStyle은 페이지 수준에서 정의된 인스턴스에 의해 재정의 buttonStyle 됩니다. 또한 페이지 수준 스타일은 컨트롤 수준에서 buttonStyle재정의됩니다. 따라서 인스턴스는 Button 다음 스크린샷과 같이 파란색 텍스트로 표시됩니다.

Overriding Styles Example

C에서 전역 스타일 만들기#

Style다음 코드 예제와 같이 새 ResourceDictionary인스턴스를 만든 다음 인스턴스를 추가하여 C#에서 애플리케이션의 Resources 컬렉션에 인스턴스ResourceDictionary를 추가할 Style 수 있습니다.

public class App : Application
{
    public App ()
    {
        var buttonStyle = new Style (typeof(Button)) {
            Setters = {
                ...
                new Setter { Property = Button.TextColorProperty,    Value = Color.Teal }
            }
        };

        Resources = new ResourceDictionary ();
        Resources.Add ("buttonStyle", buttonStyle);
        ...
    }
    ...
}

생성자는 애플리케이션 전체의 인스턴스에 적용하기 Button 위한 단일 명시적 스타일을 정의합니다. 명시적Style 인스턴스는 메서드를 ResourceDictionary 사용하여 Add 인스턴스를 참조 Style 할 문자열을 key 지정하여 추가됩니다. Style 그런 다음 애플리케이션에서 올바른 형식의 컨트롤에 인스턴스를 적용할 수 있습니다. 그러나 전역 스타일은 명시적이거나암시적수 있습니다.

다음 코드 예제에서는 페이지의 인스턴스에 buttonStyle 적용하는 C# 페이지를 Button 보여 줍니다.

public class ApplicationStylesPageCS : ContentPage
{
    public ApplicationStylesPageCS ()
    {
        ...
        Content = new StackLayout {
            Children = {
                new Button { Text = "These buttons", Style = (Style)Application.Current.Resources ["buttonStyle"] },
                new Button { Text = "are demonstrating", Style = (Style)Application.Current.Resources ["buttonStyle"] },
                new Button { Text = "application styles", Style = (Style)Application.Current.Resources ["buttonStyle"]
                }
            }
        };
    }
}

해당 buttonStyle 속성을 설정 Style 하여 Button 인스턴스에 적용되고 인스턴스의 Button 모양을 제어합니다.