Stili globali in Xamarin.Forms

Gli stili possono essere resi disponibili a livello globale aggiungendoli al dizionario risorse dell'applicazione. Ciò consente di evitare la duplicazione di stili tra pagine o controlli.

Creare uno stile globale in XAML

Per impostazione predefinita, tutte le Xamarin.Forms applicazioni create da un modello usano la classe App per implementare la Application sottoclasse. Per dichiarare un oggetto Style a livello di ResourceDictionary applicazione, nell'applicazione usando XAML, la classe App predefinita deve essere sostituita con una classe app XAML e il code-behind associato. Per altre informazioni, vedere Uso della classe App.

L'esempio di codice seguente mostra un Style dichiarato a livello di applicazione:

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

Definisce ResourceDictionary un singolo stile esplicito , buttonStyle, che verrà usato per impostare l'aspetto delle Button istanze. Tuttavia, gli stili globali possono essere espliciti o impliciti.

L'esempio di codice seguente mostra una pagina XAML che applica l'oggetto buttonStyle alle istanze della Button pagina:

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

Il risultato è l'aspetto illustrato negli screenshot seguenti:

Esempio di stili globali

Per informazioni sulla creazione di stili in una pagina, ResourceDictionaryvedere Stili espliciti e stili impliciti.

Eseguire l'override degli stili

Gli stili inferiori nella gerarchia di visualizzazione hanno la precedenza su quelli definiti in alto. Ad esempio, l'impostazione di un Style oggetto che imposta Button.TextColor su a livello di applicazione verrà sottoposto a Red override da uno stile a livello di pagina che imposta Button.TextColor su Green. Analogamente, uno stile a livello di pagina verrà sottoposto a override da uno stile a livello di controllo. Inoltre, se Button.TextColor è impostato direttamente su una proprietà di controllo, questo avrà la precedenza su qualsiasi stile. Questa precedenza è illustrata nell'esempio di codice seguente:

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

L'oggetto originale buttonStyle, definito a livello di applicazione, viene sottoposto a override dall'istanza buttonStyle definita a livello di pagina. Inoltre, lo stile del livello di pagina viene sottoposto a override dal livello buttonStyledi controllo . Di conseguenza, le Button istanze vengono visualizzate con testo blu, come illustrato negli screenshot seguenti:

Esempio di override degli stili

Creare uno stile globale in C#

Style È possibile aggiungere istanze alla raccolta dell'applicazione Resources in C# creando un nuovo ResourceDictionaryoggetto e quindi aggiungendo le Style istanze a ResourceDictionary, come illustrato nell'esempio di codice seguente:

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

Il costruttore definisce un singolo stile esplicito per l'applicazione alle Button istanze in tutta l'applicazione. Le istanze espliciteStyle vengono aggiunte all'oggetto ResourceDictionary usando il Add metodo , specificando una key stringa per fare riferimento all'istanza Style di . L'istanza Style può quindi essere applicata a tutti i controlli del tipo corretto nell'applicazione. Tuttavia, gli stili globali possono essere espliciti o impliciti.

L'esempio di codice seguente mostra una pagina C# che applica l'oggetto buttonStyle alle istanze della Button pagina:

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"]
                }
            }
        };
    }
}

L'oggetto buttonStyle viene applicato alle Button istanze impostando le relative Style proprietà e controlla l'aspetto delle Button istanze.