Simplification des modes clair et sombre dans les applications .NET MAUI

Accorder aux éléments de votre application .NET MAUI la possibilité de s’afficher en mode sombre ou clair est plus facile que jamais. Apprendre!

À l’ère moderne, il est de plus en plus courant que les applications proposent des options de mode clair et sombre pour les interfaces utilisateur. L’une des premières fonctionnalités de .NET MAUI était la possibilité de l’implémenter dans nos applications ! La manière conventionnelle de procéder consiste à ajouter l’extension de balisage AppThemeBinding à l’intérieur de la propriété d’un contrôle, puis à définir des valeurs pour les modes clair et sombre. Ce processus est répété pour chaque propriété qui le nécessite !

Mais imaginez si vous n’aviez pas à répéter fréquemment les mêmes couleurs pour les modes clair et sombre. Et si vous pouviez créer un style attribuant déjà des couleurs aux deux modes ? Ou mieux encore, et si vous pouviez l’utiliser en conjonction avec des styles existants ? C’est exactement ce que nous allons explorer dans cet article.

Obtenir un aperçu de l’extension de balisage AppThemeObject et AppThemeColor

En plus d’utiliser le AppThemeBinding extension de balisage pour gérer les apparences des modes clair et sombre, vous pouvez utiliser d’autres extensions de balisage comme AppThemeObject et Couleur du thème de l’application. Ces extensions aident à créer des ressources thématiques pour nos applications, en simplifiant la gestion des couleurs, des images et d’autres ressources. Ils s’adaptent également automatiquement en fonction du mode d’apparence actuel de l’application.

AppThemeObject et AppThemeColor font tous deux partie de la boîte à outils communautaire .NET MAUI. C’est pourquoi, avant de continuer, comprenons comment configurer l’environnement pour utiliser cette boîte à outils !

Pour l’implémenter correctement, assurez-vous que le kit d’outils communautaires .NET MAUI est correctement configuré dans votre application. Sa configuration est simple, comme indiqué dans les étapes ci-dessous :

1.Installation : Tout d’abord, assurez-vous d’installer la boîte à outils en ajoutant le package Community.Toolkit.Maui NuGet.

2. Configuration dans MauiProgram.cs : Après avoir ajouté le package NuGet, accédez à MauiProgram.cs. Juste en dessous UseMauiApp<App>()ajouter :

.UseMauiCommunityToolkit()

3. Ajout d’espace de noms : Incluez l’espace de noms du kit d’outils dans votre page :

xmlns:toolkit="[http://schemas.microsoft.com/dotnet/2022/maui/toolkit](http://schemas.microsoft.com/dotnet/2022/maui/toolkit)"

Comprendre les propriétés

Les propriétés des deux extensions de balisage, Couleur du thème de l’application et AppThemeObject, sont identiques. La seule différence réside dans le type de propriété. Pour AppThemeColor, le type est Colortandis que pour AppThemeObject, le type est Object. Voyons chacun d’eux :

• Sombre: La valeur attribuée à la propriété lorsque l’application est en mode sombre.
• Lumière: La valeur attribuée à la propriété lorsque l’application est en mode clair.
• Défaut: Valeur utilisée pour la propriété lorsque l’application est en mode clair ou sombre et qu’aucune valeur spécifique n’a été fournie pour ce thème.
• x : Clé : Vous aurez également besoin d’un identifiant clé. Cela vous permet de référencer votre style de thème lorsque vous l’appliquez à une propriété. Je recommande de choisir un nom qui décrit son objectif spécifique, comme MainTextColor. Ce nom indique clairement qu’il est utilisé pour définir les couleurs du texte principal de l’application.

Voyons les détails

AppThemeObject

AppThemeObject est une cible générique adaptée aux thèmes qui vous permet de définir n’importe quel objet pour les propriétés Light, Dark et Default. Comme elle n’est pas fortement typée, les valeurs de chaque propriété sont évaluées et affichées au moment de l’exécution. Ainsi, si une erreur se produit, elle pourrait potentiellement provoquer une exception d’exécution.

Structure d’utilisation visuelle

Tout d’abord, nous explorerons une explication graphique de son utilisation, suivie d’un exemple de code.

Maintenant, regardons un exemple de code :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
  x:Class="AppThemeSample.MainPage" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"> 
    
  <ContentPage.Resources> 
    <toolkit:AppThemeObject Light="dark.png" Dark="light.png" x:Key="MyMainImage" /> 
  </ContentPage.Resources> 
    
  <VerticalStackLayout> 
    <Image Source="{toolkit:AppThemeResource MyMainImage}" /> 
  </VerticalStackLayout> 
</ContentPage>

Couleur du thème de l’application

AppThemeColor est une couleur unique basée sur un thème qui vous permet de définir différentes couleurs pour les propriétés Light, Dark et Default.

Structure d’utilisation visuelle

Maintenant, regardons un exemple de code :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
  x:Class="AppThemeSample.MainPage"
  xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
     
  <ContentPage.Resources> 
    <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="PrimaryTextColor" /> 
  </ContentPage.Resources> 
    
  <VerticalStackLayout> 
    <Label TextColor="{toolkit:AppThemeResource PrimaryTextColor}" /> 
  </VerticalStackLayout> 
</ContentPage>

Utilisation de AppThemeColor et AppThemeResource via les styles

Étant donné que les ressources thématiques sont utilisables dans un ResourceDictionary, elles peuvent également être utilisées via des styles. Voici un exemple de la façon de procéder.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
  x:Class="AppThemeSample.MainPage" xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"> 
  <ContentPage.Resources> 
    <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="PrimaryTextColor" /> 
    
    <Style x:Key="Headline" TargetType="Label"> 
      <Setter Property="FontFamily" Value="Segoe UI" /> 
      <Setter Property="FontSize" Value="10" /> 
      <Setter Property="TextColor" Value="{toolkit:AppThemeResource PrimaryTextColor}" /> 
    </Style> 
  </ContentPage.Resources> 
    
  <VerticalStackLayout> 
    <Label Style="{StaticResource Headline}" /> 
  </VerticalStackLayout> 
</ContentPage>

💡 Mettez en surbrillance

AppThemeObject et Couleur du thème de l’application les deux dérivent de la classe de base abstraite AppThemeObject<T>. Cette structure permet la création de ressources plus spécifiques et fortement typées. Si votre projet nécessite un type de ressource unique non fourni par la boîte à outils communautaire, vous avez la possibilité de développer votre propre classe dérivée.

⚠️Important

Pour plus de contexte, si vous n’êtes pas familier avec l’extension AppThemeBinding, nous vous recommandons de lire l’article Gestion des modes clair et sombre avec .NET MAUI. Bien que cela ne soit pas essentiel pour comprendre cet article, cela fournira une image plus complète.

Conclusion

J’espère qu’à partir de maintenant vous saurez comment adapter vos applications au mode clair et sombre en utilisant les nouvelles extensions de balisage que vous avez apprises !! 💚💕

À la prochaine! 💁‍♀️

Les références

Cet article était basé sur la documentation officielle :

Vous souhaitez rationaliser encore davantage les thèmes de votre application .NET MAUI ? Découvrez l’interface utilisateur Telerik pour .NET Contrôles MAUI et le pouvoir du progrès Générateur de thèmes.