Exercice - Créer et appliquer un style

6 minutes

Dans cet exercice, vous allez définir et appliquer un style au niveau de la page dans l’application Tip Calculator.

Cet exercice est la suite de l’exercice précédent. Utilisez votre solution existante comme point de départ pour ces étapes, ou ouvrez le projet TipCalculator dans le dossier exercise3/TipCalculator du dépôt que vous avez cloné dans le premier exercice.

Définir un style

Commençons par implémenter un style de police « taille 22 Gras » destinée aux étiquettes. Stockez le style dans un dictionnaire au niveau de la page.

Dans le projet TipCalculator, ouvrez le fichier StandardTipPage.xaml.

Ajoutez un Style au dictionnaire de ressources de la page, après les ressources existantes. Utilisez une valeur x:Key de infoLabelStyle, et une valeur TargetType de Label.

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

Ajoutez une instance Setter qui définit la propriété FontSize du style sur la valeur dans la ressource fontSize.

Ajoutez une autre instance Setter qui définit la propriété FontAttributes sur Bold.

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

Appliquer le style

Recherchez les trois contrôles Label qui utilisent la valeur {StaticResource fontSize} pour FontSize, et la valeur Bold pour FontAttributes. Supprimez ces affectations de propriété des étiquettes.

Utilisez l’extension de balisage StaticResource pour affecter le style infoLabelStyle à ces trois étiquettes :

<!-- 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}" ... />

Exécutez l’application. L’application doit se présenter exactement comme avant. Toutefois, les attributs de police pour les étiquettes sont maintenant définis avec un style.

Modifier le style de police

Voyons combien il est facile de mettre à jour les styles.

Revenez à votre style dans le dictionnaire de ressources et définissez la ressource fontSize sur 32.
Réexécutez l’application pour voir les changements. Les trois étiquettes pour Bill, Tip et Total devraient être plus grandes.
Redéfinissez la ressource fontSize sur 22.

Créer un style de base

Développons l’implémentation de la page StandardTipPage en ajoutant un style de base. Vous définissez un nouveau Style avec des valeurs qui chevauchent le Style créé lors des étapes précédentes. Vous allez ensuite refactoriser ce nouveau style dans la partie suivante de cet exercice.

Ouvrez le fichier StandardTipPage.xaml.
Ajoutez un autre Style au dictionnaire de ressources de la page. Utilisez une valeur x:Key de baseLabelStyle, et une valeur TargetType de Label.

Important

Définissez ce style par dessus le style infoLabelStyle. Ce positionnement sera important ultérieurement lorsque vous hériterez de ce style. Un style ne peut hériter que d’un autre style qui est déjà dans l’étendue.

Ajoutez une instance Setter qui définit la propriété FontSize. Remarquez que ce setter est une répétition du setter du infoLabelStyle antérieur.

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

Appliquez le nouveau style baseLabelStyle aux deux étiquettes sur la page qui affichent les montants calculés Tip et Total. Supprimez les paramètres FontSize explicites de ces étiquettes. Le code ci-après présente un exemple.

<!-- 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" />

Exécutez l'application. Vérifiez que les montants Tip et Total calculés (contenant les valeurs 0,00) sont toujours correctement mis en forme.

Utiliser l’héritage de style

Vous êtes maintenant prêt à refactoriser vos styles par héritage. La refactorisation vous permet d’éliminer l’utilisation répétée du setter.

Ouvrez le fichier StandardTipPage.xaml.
Recherchez le style infoLabelStyle dans le dictionnaire de ressources de la page. Déplacez ce style sous le style baseLabelStyle dans le dictionnaire de ressources.

Définissez la propriété BasedOn du style infoLabelStyle sur baseLabelStyle. Supprimez le setter pour FontSize. Vous n’en avez plus besoin, car ce style hérite désormais du paramétrage de FontSize du style de 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>

Notes

L’ordre des ressources dans le dictionnaire de ressources est important. Le style baseLabelStyle doit être défini avant tout autre style qui y fait référence. Autrement, l’héritage de style ne fonctionne.