Udostępnij za pośrednictwem


Style globalne w programie Xamarin.Forms

Style można udostępniać globalnie, dodając je do słownika zasobów aplikacji. Pomaga to uniknąć duplikowania stylów między stronami lub kontrolkami.

Tworzenie stylu globalnego w języku XAML

Domyślnie wszystkie Xamarin.Forms aplikacje utworzone na podstawie szablonu używają klasy App do implementowania podklasy Application . Aby zadeklarować obiekt Style na poziomie aplikacji, w aplikacji ResourceDictionary przy użyciu języka XAML domyślna klasa aplikacji musi zostać zastąpiona klasą aplikacji XAML i skojarzonym kodem. Aby uzyskać więcej informacji, zobacz Praca z klasą aplikacji.

Poniższy przykład kodu przedstawia zadeklarowany Style na poziomie aplikacji:

<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>

Definiuje ResourceDictionary jeden jawny styl , buttonStylektóry będzie używany do ustawiania wyglądu Button wystąpień. Jednak style globalne mogą być jawne lub niejawne.

Poniższy przykład kodu przedstawia stronę XAML stosującą buttonStyle element do wystąpień strony 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>

Spowoduje to wyświetlenie wyglądu pokazanego na poniższych zrzutach ekranu:

Przykład stylów globalnych

Aby uzyskać informacje na temat tworzenia stylów na stronie ResourceDictionary, zobacz Jawne style i Niejawne style.

Zastępowanie stylów

Style niższe w hierarchii widoków mają pierwszeństwo przed zdefiniowanymi wyżej. Na przykład ustawienie wartości ustawianej StyleButton.TextColor na Red wartość na poziomie aplikacji zostanie zastąpione przez styl na poziomie strony ustawiony Button.TextColor na Greenwartość . Podobnie styl poziomu strony zostanie zastąpiony stylem poziomu kontrolki. Ponadto jeśli Button.TextColor właściwość jest ustawiana bezpośrednio na właściwości kontrolki, będzie to mieć pierwszeństwo przed dowolnymi stylami. Ten pierwszeństwo przedstawiono w poniższym przykładzie kodu:

<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>

Oryginalny element buttonStyle, zdefiniowany na poziomie aplikacji, jest zastępowany przez buttonStyle wystąpienie zdefiniowane na poziomie strony. Ponadto styl poziomu strony jest zastępowany przez poziom buttonStylekontrolki . Button W związku z tym wystąpienia są wyświetlane z niebieskim tekstem, jak pokazano na poniższych zrzutach ekranu:

Przykład przesłonięcia stylów

Tworzenie stylu globalnego w języku C#

Style Wystąpienia można dodać do kolekcji aplikacji Resources w języku C#, tworząc nowy ResourceDictionaryelement , a następnie dodając Style wystąpienia do ResourceDictionaryklasy , jak pokazano w poniższym przykładzie kodu:

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);
        ...
    }
    ...
}

Konstruktor definiuje pojedynczy jawny styl stosowania do Button wystąpień w całej aplikacji. JawneStyle wystąpienia są dodawane do ResourceDictionary metody przy użyciu Add metody, określając key ciąg, który ma odwoływać się do Style wystąpienia. Wystąpienie Style można następnie zastosować do dowolnych kontrolek poprawnego typu w aplikacji. Jednak style globalne mogą być jawne lub niejawne.

Poniższy przykład kodu przedstawia stronę języka C# stosującą buttonStyle element do wystąpień strony 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"]
                }
            }
        };
    }
}

Element buttonStyle jest stosowany do Button wystąpień przez ustawienie ich Style właściwości i kontroluje wygląd Button wystąpień.