Condividi tramite

Introduzione agli Xamarin.Forms stili

  • Articolo

Gli stili consentono di personalizzare l'aspetto degli elementi visivi. Gli stili vengono definiti per un tipo specifico e contengono valori per le proprietà disponibili in tale tipo.

Xamarin.Forms le applicazioni contengono spesso più controlli con un aspetto identico. Ad esempio, un'applicazione può avere più Label istanze con le stesse opzioni del tipo di carattere e le stesse opzioni di layout, come illustrato nell'esempio di codice XAML seguente:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

L'esempio di codice seguente illustra la pagina equivalente creata in C#:

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Ogni Label istanza ha valori di proprietà identici per controllare l'aspetto del testo visualizzato da Label. Il risultato è l'aspetto illustrato negli screenshot seguenti:

Aspetto etichetta senza stili

L'impostazione dell'aspetto di ogni singolo controllo può essere ripetitiva e soggetta a errori. È invece possibile creare uno stile che definisce l'aspetto e quindi applicato ai controlli necessari.

Creare uno stile

La classe Style raggruppa una raccolta di valori delle proprietà in un oggetto che può quindi essere applicato a più istanze di un elemento visivo. Ciò consente di ridurre il markup ripetitivo e di modificare più facilmente l'aspetto di un'applicazione.

Anche se gli stili sono stati progettati principalmente per le applicazioni basate su XAML, possono anche essere creati in C#:

  • Style Le istanze create in XAML vengono in genere definite in un ResourceDictionary oggetto assegnato alla Resources raccolta di un controllo, di una pagina o alla Resources raccolta dell'applicazione.
  • Style Le istanze create in C# vengono in genere definite nella classe della pagina o in una classe accessibile a livello globale.

Scegliere dove definire un oggetto Style ha effetto su dove può essere usato:

  • Style Le istanze definite a livello di controllo possono essere applicate solo al controllo e ai relativi elementi figlio.
  • Style Le istanze definite a livello di pagina possono essere applicate solo alla pagina e ai relativi elementi figlio.
  • Le istanze di Style definite a livello di applicazione possono essere applicate in tutta l'applicazione.

Ogni istanza di Style contiene una raccolta di uno o più oggetti Setter e ogni Setter ha una proprietà Property e una proprietà Value. Property è il nome della proprietà associabile dell'elemento a cui viene applicato lo stile e Value è il valore applicato alla proprietà.

Ogni Style istanza può essere esplicita o implicita:

  • Un'istanza esplicita Style viene definita specificando un TargetType valore e x:Key e impostando la proprietà dell'elemento di Style destinazione sul x:Key riferimento. Per altre informazioni sugli stili espliciti, vedere Stili espliciti.
  • Un'istanza implicita Style viene definita specificando solo un oggetto TargetType. L'istanza Style verrà quindi applicata automaticamente a tutti gli elementi di tale tipo. Si noti che le sottoclassi di TargetType non hanno automaticamente l'oggetto Style applicato. Per altre informazioni sugli stili impliciti, vedere Stili impliciti.

Quando si crea una classe Style, la proprietà TargetType è sempre obbligatoria. L'esempio di codice seguente mostra uno stile esplicito (si noti il x:Key) creato in XAML:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Per applicare un Styleoggetto , l'oggetto di destinazione deve corrispondere VisualElement al TargetType valore della proprietà di Style, come illustrato nell'esempio di codice XAML seguente:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

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 Label.TextColor su a livello di applicazione verrà sottoposto a Red override da uno stile a livello di pagina che imposta Label.TextColor su Green. Analogamente, uno stile a livello di pagina verrà sottoposto a override da uno stile a livello di controllo. Inoltre, se Label.TextColor è impostato direttamente su una proprietà di controllo, questa ha la precedenza su qualsiasi stile.

Gli articoli di questa sezione illustrano e spiegano come creare e applicare stili espliciti e impliciti , come creare stili globali, ereditarietà dello stile, come rispondere alle modifiche di stile in fase di esecuzione e come usare gli stili predefiniti inclusi in Xamarin.Forms.

Nota

Che cos'è StyleId?

Prima della Xamarin.Forms versione 2.2, la StyleId proprietà è stata usata per identificare singoli elementi in un'applicazione per l'identificazione nei test dell'interfaccia utente e nei motori del tema, ad esempio Pixate. Tuttavia, Xamarin.Forms 2.2 ha introdotto la AutomationId proprietà , che ha sostituito la StyleId proprietà .