Dot.Blog

C#, XAML, WinUI, WPF, Android, MAUI, IoT, IA, ChatGPT, Prompt Engineering

MAUI et les Styles Cascadés (BasedOn Styles)

La gestion efficace des styles sous MAUI passe par la bonne utilisation des styles cascadés...

Ce n'est pas le sujet le plus discuté ni le plus à la pointe des joutes verbales à la machine à café mais il faut bien reconnaître que le retour aux fondamentaux ne fait jamais de mal... Ainsi je vais vous présenter aujourd'hui une feature plaisante et efficace : les styles cascadés.

En soi rien de nouveau à l'ouest puisque c'est le principe même des feuilles de styles CSS (qui y puisent d'ailleurs leur nom). Mais le CSS s'applique à quelques éléments simples HTML alors que là nous parlons de styles MAUI, c'est à dire d'objet complexes pouvant définir tout un visuel, animations comprises au sein d'Apps multiplateformes !

Dans l'application MAUI ci-dessus (Le template de base où j'ai dupliqué le bouton), vous voyez 2 boutons. Tous sont des boutons standard du framework mais chacun possède un style.

  • Le premier, utilise le style "Bouton" défini dans la page actuelle (ce qui override le style par défaut du template)
  • Le second utilise le style dérivé "BoutonGros"

Visuellement c'est plutôt moche, je vous l'accorde, mais le but du jeu est de voir l'effet du cascading styling...

Les styles sont définis en début de la ContentPage dans un dictionnaire de ressources. 

Le second style, le gros bouton, porte un nom et est utilisé explicitement dans le code. Mais c'est sa définition qui nous intéresse ici. En effet, plutôt que de tout reprendre, il se base sur le style précédent "Bouton" et ne fait que modifier les quelques propriétés qui le caractérise (le rendre plus gros...).

L'avantage est énorme puisqu'il suffira de changer quelques propriétés dans le style par défaut pour que ces modifications se propagent immédiatement à tous les styles dérivés. Par exemple en forçant une fonte différente.

<ContentPage.Resources>
    <ResourceDictionary>
        <Style x:Key="Bouton" TargetType="Button">
            <Setter Property="BackgroundColor" Value="Red"/>
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="FontAttributes" Value="Bold"/>
            <Setter Property="CornerRadius" Value="10"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Margin" Value="10"/>
        </Style>
        <Style x:Key="BoutonGros" TargetType="Button" BasedOn="{StaticResource Bouton}">
            <Setter Property="FontSize" Value="20"/>
            <Setter Property="Padding" Value="20"/>
            <Setter Property="Margin" Value="20"/>
        </Style>
    </ResourceDictionary>
</ContentPage.Resources>

Les boutons sont définis comme suit pour utiliser les styles :

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Clicked="OnCounterClicked"
    HorizontalOptions="Center" 
    Style="{StaticResource Bouton}"/>
    
<Button
    x:Name="CounterBtn2"
    Text="Click me"
    Clicked="OnCounterClicked"
    HorizontalOptions="Center" 
    Style="{StaticResource BoutonGros}"/>

Conclusion

Voilà, c'est tout simple, mais cela peut radicalement simplifier la création de gros templates pour des applications tout en conservant le code plus léger, et surtout plus facilement maintenable. Tous les avantages du Cascading Style Sheet de HTML dont l'intérêt ne se démontre plus, mais appliqué à des objets et à la sophistication de MAUI. Que du bonheur...

Bon Styling,

...Et Stay Tuned !

Le Guide Complet de.NET MAUI ! Lien direct Amazon : https://amzn.eu/d/95wBULD

Près de 500 pages dédiées à l'univers .NET MAUI !

Existe aussi en version Kindle à prix réduit !

Faites des heureux, partagez l'article !
blog comments powered by Disqus