Esercizio - Creare e applicare uno stile

6 minuti

In questo esercizio, viene illustrato come definire e applicare uno stile a livello di pagina nell'applicazione Tip Calculator.

Questo esercizio è una continuazione dell'esercizio precedente. Usare la soluzione esistente come punto iniziale per questi passaggi oppure aprire il progetto TipCalculator nella cartella exercise3/TipCalculator nel repository clonato nel primo esercizio.

Definire uno stile

Si inizia implementando uno stile del carattere "dimensioni 22 grassetto" per le etichette. Archiviare lo stile in un dizionario a livello di pagina.

Nel progetto TipCalculator aprire il file StandardTipPage.xaml.

Aggiungere uno stile al dizionario risorse della pagina, dopo le risorse esistenti. Utilizzare un valore x:Key di infoLabelStyle e un valore TargetType di Label.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="infoLabelStyle" TargetType="Label">
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Aggiungere un'istanza Setter che imposta la proprietà FontSize dello stile sul valore della risorsa fontSize.

Aggiungere un'altra istanza Setter che imposta la proprietà FontAttributes su Bold.

<Style x:Key="infoLabelStyle" TargetType="Label">
    <Setter Property="FontSize" Value="{StaticResource fontSize}" />
    <Setter Property="FontAttributes" Value="Bold" />
</Style>

Applicare lo stile

Individuare i tre controlli Label che usano un valore FontSize di {StaticResource fontSize} e un valore FontAttributes di Bold. Rimuovere tali assegnazioni di proprietà dalle etichette.

Usare l'estensione di markup StaticResource per assegnare lo stile infoLabelStyle a queste tre etichette:

<!-- Left column = static labels -->
<Label x:Name="billLabel"  Text="Bill"  ... Style="{StaticResource infoLabelStyle}" ... />
<Label x:Name="tipLabel"   Text="Tip"   ... Style="{StaticResource infoLabelStyle}" ... />
<Label x:Name="totalLabel" Text="Total" ... Style="{StaticResource infoLabelStyle}" ... />

Eseguire l'app. L'aspetto dell'app dovrebbe essere esattamente quello di prima, ma gli attributi del tipo di carattere per le etichette ora sono impostati con uno stile.

Modificare lo stile del carattere

Aggiornare gli stili è davvero semplice.

Tornare allo stile nel dizionario risorse e impostare la risorsa fontSize su 32.
Eseguire di nuovo l'app per visualizzare le modifiche. Le tre etichette per Fattura, Mancia e Totale dovrebbero essere più grandi.
Riportare nuovamente il valore della risorsa fontSize su 22.

Creare uno stile di base

Si espanderà ora l'implementazione della pagina StandardTipPage aggiungendo uno stile di base. Si definisce un nuovo stile con valori sovrapposti allo stile creato nei passaggi precedenti. Nella parte successiva dell'esercizio quindi verrà effettuato il refactoring del nuovo stile.

Aprire il file StandardTipPage.xaml.
Aggiungere un altro stile al dizionario risorse della pagina. Utilizzare un valore x:Key di baseLabelStyle e un valore TargetType di Label.

Importante

Definire questo stile sopra lo stile infoLabelStyle. Questo posizionamento è importante in seguito, quando si eredita da questo stile. Uno stile può ereditare solo da un altro stile già presente nell'ambito.

Aggiungere un'istanza Setter che imposta la proprietà FontSize. Si noti che si tratta di una ripetizione dell'istanza setter dallo stile infoLabelStyle precedente.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="baseLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource fontSize}" />
        </Style>
        ...
    <ResourceDictionary>
</ContentPage.Resources>

Applicare il nuovo baseLabelStyle alle due etichette della pagina che visualizzano gli importi calcolati per la mancia e il totale. Rimuovere le impostazioni esplicite di FontSize da queste etichette. Il seguente codice illustra un esempio.

<!-- Right column = user input and calculated-value output -->
...
<Label x:Name="tipOutput"   Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="1" Grid.Column="1" />
<Label x:Name="totalOutput" Text="0.00" TextColor="Navy" Style="{StaticResource baseLabelStyle}" Grid.Row="2" Grid.Column="1" />

Eseguire l'applicazione. Verificare che i valori per gli importi calcolati per mancia e totale (contenenti i valori 0,00) abbiano ancora gli stili corretti.

Usare l'ereditarietà degli stili

A questo punto è possibile effettuare il refactoring degli stili usando l'ereditarietà. Il refactoring consente di eliminare l'uso ripetuto dell'istanza setter FontSize.

Aprire il file StandardTipPage.xaml.
Individuare lo stile infoLabelStyle nel dizionario risorse della pagina. Verificare che questo stile sia presente in baseLabelStyle nel dizionario risorse.

Impostare la proprietà BasedOn per lo stile infoLabelStyle su baseLabelStyle. Rimuovere l'istanza Setter per FontSize. Non è più necessaria perché questo stile ora eredita l'impostazione FontSize dallo stile di base.

<ContentPage.Resources>
    <ResourceDictionary>
        ...
        <Style x:Key="baseLabelStyle" TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource fontSize}" />
        </Style>
        <Style x:Key="infoLabelStyle" BasedOn="{StaticResource baseLabelStyle}" TargetType="Label">
            <Setter Property="FontAttributes" Value="Bold" />
        </Style>
    <ResourceDictionary>
</ContentPage.Resources>

Nota

L'ordine delle risorse nel dizionario risorse è importante. Lo stile baseLabelStyle deve essere definito prima di tutti gli altri stili che vi fanno riferimento, altrimenti l'ereditarietà dello stile non funziona.