Stili espliciti in Xamarin.Forms

Download Sample Scaricare l'esempio

Uno stile esplicito è uno che viene applicato in modo selettivo ai controlli impostando le proprietà Style.

Creare uno stile esplicito in XAML

Per dichiarare un oggetto a livello di pagina, è necessario aggiungere un StyleResourceDictionary oggetto alla pagina e quindi una o più Style dichiarazioni possono essere incluse in ResourceDictionary. Un Style oggetto viene reso esplicito assegnando alla sua dichiarazione un x:Key attributo, che fornisce una chiave descrittiva nell'oggetto ResourceDictionary. Gli stili espliciti devono quindi essere applicati a elementi visivi specifici impostandone Style le proprietà.

L'esempio ResourceDictionary di codice seguente mostra gli stili espliciti dichiarati in XAML in una pagina e applicati alle istanze della Label pagina:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="labelRedStyle" TargetType="Label">
                <Setter Property="HorizontalOptions"
                        Value="Center" />
                <Setter Property="VerticalOptions"
                        Value="CenterAndExpand" />
                <Setter Property="FontSize" Value="Large" />
                <Setter Property="TextColor" Value="Red" />
            </Style>
            <Style x:Key="labelGreenStyle" TargetType="Label">
                ...
                <Setter Property="TextColor" Value="Green" />
            </Style>
            <Style x:Key="labelBlueStyle" TargetType="Label">
                ...
                <Setter Property="TextColor" Value="Blue" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   Style="{StaticResource labelRedStyle}" />
            <Label Text="are demonstrating"
                   Style="{StaticResource labelGreenStyle}" />
            <Label Text="explicit styles,"
                   Style="{StaticResource labelBlueStyle}" />
            <Label Text="and an explicit style override"
                   Style="{StaticResource labelBlueStyle}"
                   TextColor="Teal" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Definisce ResourceDictionary tre stili espliciti applicati alle istanze della Label pagina. Ogni Style oggetto viene usato per visualizzare il testo in un colore diverso, impostando anche le opzioni di layout orizzontale e orizzontale e verticale. Ogni Style oggetto viene applicato a un oggetto diverso Label impostandone Style le proprietà usando l'estensione di StaticResource markup. Il risultato è l'aspetto illustrato negli screenshot seguenti:

Explicit Styles Example

Inoltre, l'ultima Label ha un'applicazione Style , ma esegue anche l'override della TextColor proprietà in un valore diverso Color .

Creare uno stile esplicito a livello di controllo

Oltre a creare stili espliciti a livello di pagina, possono essere creati anche a livello di controllo, come illustrato 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.ExplicitStylesPage" Title="Explicit" IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style x:Key="labelRedStyle" TargetType="Label">
                      ...
                    </Style>
                    ...
                </ResourceDictionary>
            </StackLayout.Resources>
            <Label Text="These labels" Style="{StaticResource labelRedStyle}" />
            ...
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

In questo esempio le istanze espliciteStyle vengono assegnate alla Resources raccolta del StackLayout controllo. Gli stili possono quindi essere applicati al controllo e ai relativi elementi figlio.

Per informazioni sulla creazione di stili in un'applicazione ResourceDictionary, vedere Stili globali.

Creare uno stile esplicito in C #

Style Le istanze possono essere aggiunte alla raccolta di Resources una pagina in C# creando un nuovo ResourceDictionaryoggetto e quindi aggiungendo le Style istanze a ResourceDictionary, come illustrato nell'esempio di codice seguente:

public class ExplicitStylesPageCS : ContentPage
{
    public ExplicitStylesPageCS ()
    {
        var labelRedStyle = new Style (typeof(Label)) {
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Red    }
            }
        };
        var labelGreenStyle = new Style (typeof(Label)) {
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Green }
            }
        };
        var labelBlueStyle = new Style (typeof(Label)) {
            Setters = {
                ...
                new Setter { Property = Label.TextColorProperty, Value = Color.Blue }
            }
        };

        Resources = new ResourceDictionary ();
        Resources.Add ("labelRedStyle", labelRedStyle);
        Resources.Add ("labelGreenStyle", labelGreenStyle);
        Resources.Add ("labelBlueStyle", labelBlueStyle);
        ...

        Content = new StackLayout {
            Children = {
                new Label { Text = "These labels",
                            Style = (Style)Resources ["labelRedStyle"] },
                new Label { Text = "are demonstrating",
                            Style = (Style)Resources ["labelGreenStyle"] },
                new Label { Text = "explicit styles,",
                            Style = (Style)Resources ["labelBlueStyle"] },
                new Label {    Text = "and an explicit style override",
                            Style = (Style)Resources ["labelBlueStyle"], TextColor = Color.Teal }
            }
        };
    }
}

Il costruttore definisce tre stili espliciti applicati alle istanze della Label pagina. Ogni oggetto esplicitoStyle viene aggiunto all'uso ResourceDictionary del Add metodo, specificando una key stringa per fare riferimento all'istanza Style . Ogni Style oggetto viene applicato a un oggetto diverso Label impostando le relative Style proprietà.

Tuttavia, non esiste alcun vantaggio per l'uso di un ResourceDictionary oggetto qui. Le istanze possono invece Style essere assegnate direttamente alle Style proprietà degli elementi visivi necessari e possono ResourceDictionary essere rimosse, come illustrato nell'esempio di codice seguente:

public class ExplicitStylesPageCS : ContentPage
{
    public ExplicitStylesPageCS ()
    {
        var labelRedStyle = new Style (typeof(Label)) {
            ...
        };
        var labelGreenStyle = new Style (typeof(Label)) {
            ...
        };
        var labelBlueStyle = new Style (typeof(Label)) {
            ...
        };
        ...
        Content = new StackLayout {
            Children = {
                new Label { Text = "These labels", Style = labelRedStyle },
                new Label { Text = "are demonstrating", Style = labelGreenStyle },
                new Label { Text = "explicit styles,", Style = labelBlueStyle },
                new Label { Text = "and an explicit style override", Style = labelBlueStyle,
                            TextColor = Color.Teal }
            }
        };
    }
}

Il costruttore definisce tre stili espliciti applicati alle istanze della Label pagina. Ogni Style oggetto viene usato per visualizzare il testo in un colore diverso, impostando anche le opzioni di layout orizzontale e orizzontale e verticale. Ogni Style oggetto viene applicato a un oggetto diverso Label impostandone le Style proprietà. Inoltre, l'ultima Label ha un'applicazione Style , ma esegue anche l'override della TextColor proprietà in un valore diverso Color .