Les thèmes sont un excellent moyen de permettre à vos utilisateurs de personnaliser votre application sans avoir à trop s'impliquer dans des détails spécifiques.
Il est courant que les applications modernes aient la possibilité de basculer entre différents thèmes. Par exemple, certaines applications vous permettent de basculer entre un thème clair ou un thème sombre, tandis que d'autres peuvent avoir plus de choix de thèmes.
Windows Forms est un framework d'interface utilisateur qui vous permet de créer des applications de bureau. Vous pouvez implémenter des thèmes dans une application de formulaire Windows en créant des boutons sélectionnables pour chaque thème.
Lorsque l'utilisateur sélectionne un thème, vous pouvez modifier la couleur d'arrière-plan ou les propriétés de couleur du texte de chaque élément pour qu'elles correspondent au thème sélectionné.
Comment configurer le projet Windows Form
Tout d'abord, créez une nouvelle application de formulaire Windows. Remplissez le nouveau projet avec quelques contrôles de base, tels que des boutons et des étiquettes.
- Créer un nouvelle application Windows Forms dans Visual Studio.
- Dans le nouveau projet, utilisez la boîte à outils pour rechercher un contrôle de bouton.
- Sélectionnez le bouton de commande et faites-le glisser sur la toile. Ajoutez un total de trois contrôles de bouton.
- À l'aide de la boîte à outils, cliquez et faites glisser un contrôle des étiquettes sur la toile. Placez l'étiquette sous les boutons.
- Stylisez les boutons et les étiquettes à l'aide de la fenêtre des propriétés. Modifiez les propriétés comme suit :
Contrôler Nom de la propriété Nouvelle valeur bouton1 Taille 580, 200 FlatStyle Appartement Texte Utilisateurs bouton2 Taille 580, 100 FlatStyle Appartement Texte Comptes bouton3 Taille 580, 100 FlatStyle Appartement Texte Autorisations étiquette1 Texte Droits d'auteur 2022
Comment créer le bouton Paramètres et la liste des thèmes
Pour qu'un menu de thèmes simple fonctionne, créez plusieurs boutons pour représenter chaque thème. L'application comprendra trois thèmes, un thème "Lumière", un thème "Nature" et un thème "Sombre".
- Ajoutez un autre contrôle de bouton au canevas pour représenter le bouton des paramètres (ou "Thèmes").
- Modifiez les propriétés de ce bouton comme suit :
Nom de la propriété Nouvelle valeur Nom btnThemeSettings FlatStyle Appartement Taille 200, 120 Texte Thèmes - Faites glisser trois autres boutons sur le canevas. Ces boutons représenteront les trois thèmes différents. Modifiez les propriétés de chacun des boutons comme suit :
Contrôler Nom de la propriété Nouvelle valeur 1er bouton Nom btnLightTheme Couleur de fond Fumée blanche Taille 200, 80 FlatStyle Appartement Texte Lumière Visible Faux 2e bouton Nom btnThèmeNature Couleur de fond DarkSeaGreen Taille 200, 80 FlatStyle Appartement Texte La nature Visible Faux 3ème bouton Nom btnDarkTheme Couleur de fond DimGray Couleur de premier plan Blanc Taille 200, 80 FlatStyle Appartement Texte Sombre Visible Faux - Double-cliquez sur le Thèmes bouton. Cela créera une méthode pour gérer l'événement "au clic". La méthode s'exécutera lorsque l'utilisateur cliquera sur ce bouton.
- Par défaut, les thèmes "Clair", "Nature" et "Sombre" ne seront pas visibles. À l'intérieur de la fonction, ajoutez la fonctionnalité permettant de basculer la visibilité des boutons pour afficher ou masquer.
privéannulerbtnThemeSettings_Click(expéditeur d'objet, EventArgs e)
{
btnNatureTheme. Visible = !btnNatureTheme. Visible;
btnLightTheme. Visible = !btnLightTheme. Visible;
btnDarkTheme. Visible = !btnDarkTheme. Visible;
} - Exécutez l'application en cliquant sur le bouton de lecture vert en haut de la fenêtre de Visual Studio.
- Lors de l'exécution, l'application masquera par défaut les boutons de chacun des trois thèmes.
- Clique sur le Thèmes bouton pour basculer les thèmes à afficher. Vous pouvez continuer à appuyer sur la Thèmes bouton pour basculer leur visibilité.
Comment gérer vos thèmes
Créez des dictionnaires pour chaque thème afin de stocker les différentes couleurs qu'il utilisera. Cela vous permet de stocker toutes les couleurs de votre thème au même endroit, au cas où vous auriez besoin de les utiliser plusieurs fois. Cela facilite également la tâche si vous souhaitez mettre à jour un thème avec de nouvelles couleurs à l'avenir.
- En haut de la valeur par défaut Formulaire1.cs Fichier C# et à l'intérieur du Formulaire classe, créez une énumération globale. Cette énumération stockera les différents types de couleurs que vous utiliserez dans un thème.
énumération ThèmeCouleur
{
Primaire,
Secondaire,
Tertiaire,
Texte
} - Ci-dessous, déclarez trois dictionnaires globaux, un pour chacun des trois thèmes. Vous pouvez en savoir plus sur les dictionnaires si vous ne savez pas comment utiliser un dictionnaire en C#.
Dictionnaire<ThèmeCouleur, Couleur> Lumière = nouveau dictionnaire<ThèmeCouleur, Couleur>();
Dictionnaire<ThèmeCouleur, Couleur> Nature = nouveau dictionnaire<ThèmeCouleur, Couleur>();
Dictionnaire<ThèmeCouleur, Couleur> Sombre = nouveau dictionnaire<ThèmeCouleur, Couleur>(); - Dans le constructeur, initialisez les dictionnaires. Ajoutez des valeurs pour les différentes couleurs que chaque thème utilisera.
Publique Formulaire 1()
{
InitializeComponent();
// Ajouter des dictionnaires ici
Lumière = nouveau dictionnaire<ThèmeCouleur, Couleur>() {
{ ThèmeCouleur. Couleur primaire. Fumée blanche },
{ ThèmeCouleur. Secondaire, Couleur. Argent },
{ ThèmeCouleur. Tertiaire, Couleur. Blanc },
{ ThèmeCouleur. Texte, Couleur. Le noir }
};
Nature = nouveau dictionnaire<ThèmeCouleur, Couleur>() {
{ ThèmeCouleur. Couleur primaire. DarkSeaGreen },
{ ThèmeCouleur. Secondaire, Couleur. AliceBlue },
{ ThèmeCouleur. Tertiaire, Couleur. Miellat },
{ ThèmeCouleur. Texte, Couleur. Le noir }
};
Sombre = nouveau dictionnaire<ThèmeCouleur, Couleur>() {
{ ThèmeCouleur. Couleur primaire. DimGray },
{ ThèmeCouleur. Secondaire, Couleur. DimGray },
{ ThèmeCouleur. Tertiaire, Couleur. Le noir },
{ ThèmeCouleur. Texte, Couleur. Blanc }
};
}
Comment changer le thème
Créer des fonctions pour gérer le thème de l'application. Ces fonctions modifieront la couleur d'arrière-plan ou la couleur du texte des éléments de l'interface utilisateur sur le canevas.
- Créez une nouvelle fonction appelée Change le thème(). La fonction prendra les couleurs d'un thème comme arguments.
- Dans la fonction, modifiez les propriétés de couleur d'arrière-plan des éléments de l'interface utilisateur. Les nouvelles couleurs de fond utiliseront les couleurs du thème sélectionné.
privéannulerChange le thème(Couleur primaireCouleur, Couleur secondaireCouleur, Couleur tertiaireCouleur)
{
// Changer la couleur de fond des boutons
btnThemeSettings. CouleurArrière = CouleurPrimaire ;
button1.BackColor = primaryColor ;
button2.BackColor = couleursecondaire ;
button3.BackColor = couleursecondaire ;
cette.BackColor = tertiaireColor ;
} - Créez une nouvelle fonction appelée ChangeTextColor(). Vous pouvez l'utiliser pour changer la couleur du texte entre sombre et clair. Cela permet de s'assurer que le texte sur un fond sombre sera toujours lisible.
privéannulerChangeTextColor(Couleur du texteCouleur)
{
// Changer Couleur detexte
button1.ForeColor = textColor;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings. ForeColor = textColor;
} - Depuis le concepteur, double-cliquez sur le bouton de contrôle "Lumière". Cela ouvrira le fichier code-behind et générera un gestionnaire d'événements lorsque l'utilisateur cliquera sur le bouton.
- Dans le gestionnaire d'événements, utilisez le Change le thème() et ChangeTextColor() les fonctions. Saisissez les couleurs utilisées par le thème. Vous pouvez récupérer ces couleurs dans le dictionnaire du thème "Lumière".
privéannulerbtnLightTheme_Click(expéditeur d'objet, EventArgs e)
{
Change le thème(Lumière[ThèmeCouleur. Primaire], Lumière[ThèmeCouleur. Secondaire], Lumière[ThèmeCouleur. Tertiaire]);
ChangeTextColor(Lumière[ThèmeCouleur. Texte]);
} - Retournez dans le designer et cliquez sur les boutons "Nature" et "Sombre". Utilisez le Change le thème() et ChangeTextColor() fonctionnent également dans leurs gestionnaires d'événements.
privéannulerbtnNatureTheme_Click(expéditeur d'objet, EventArgs e)
{
Change le thème(La nature[ThèmeCouleur. Primaire], La nature[ThèmeCouleur. Secondaire], La nature[ThèmeCouleur. Tertiaire]);
ChangeTextColor(La nature[ThèmeCouleur. Texte]);
}
privéannulerbtnDarkTheme_Click(expéditeur d'objet, EventArgs e)
{
Change le thème(Sombre[ThèmeCouleur. Primaire], Sombre[ThèmeCouleur. Secondaire], Sombre[ThèmeCouleur. Tertiaire]);
ChangeTextColor(Sombre[ThèmeCouleur. Texte]);
} - Par défaut, le thème doit être défini sur le thème "Lumière" lorsque l'utilisateur ouvre l'application pour la première fois. Dans le constructeur, sous les dictionnaires, utilisez le Change le thème() et ChangeTextColor() les fonctions.
Change le thème(Lumière[ThèmeCouleur. Primaire], Lumière[ThèmeCouleur. Secondaire], Lumière[ThèmeCouleur. Tertiaire]);
ChangeTextColor(Lumière[ThèmeCouleur. Texte]); - Exécutez l'application en cliquant sur le bouton de lecture vert en haut de la fenêtre de Visual Studio.
- Par défaut, l'application utilise le thème "Clair" et applique le jeu de couleurs gris aux contrôles de l'interface utilisateur. Basculez le bouton des thèmes pour afficher la liste des thèmes.
- Cliquez sur le thème Nature.
- Cliquez sur le thème Sombre.
Création d'applications à l'aide de formulaires Windows
De nombreuses applications permettent à l'utilisateur de basculer entre plusieurs thèmes. Vous pouvez ajouter des thèmes à une application Windows Forms en créant des options que l'utilisateur peut sélectionner.
Lorsque l'utilisateur clique sur un thème, vous pouvez modifier la couleur d'arrière-plan, le texte ou toute autre propriété pour qu'elle corresponde aux couleurs utilisées dans le thème sélectionné.
Les couleurs de chacun des thèmes utilisent les couleurs intégrées de Visual Studio. Vous devrez utiliser un jeu de couleurs approprié pour offrir aux utilisateurs une meilleure expérience. Vous pouvez en savoir plus sur les différentes manières de choisir un jeu de couleurs pour votre application.