WinForms : comment ajouter plusieurs thèmes à votre application

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.

UTILISEZ LA VIDÉO DU JOUR

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 obtenir des cartes à collectionner sur steam

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.

comment télécharger l'application sur samsung tv

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 :

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 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 :

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é pour basculer la visibilité des boutons pour afficher ou masquer.

private void btnThemeSettings_Click(object sender, 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.
```
enum ThemeColor 
{ 
    Primary, 
    Secondary, 
    Tertiary, 
    Text 
}  
```

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# .

Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>(); 
Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>(); 
Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>();

Dans le constructeur, initialisez les dictionnaires. Ajoutez des valeurs pour les différentes couleurs que chaque thème utilisera.

public Form1() 
{ 
    InitializeComponent(); 
    // Add dictionaries here 
    Light = new Dictionary<ThemeColor, Color>() { 
        { ThemeColor.Primary, Color.WhiteSmoke }, 
        { ThemeColor.Secondary, Color.Silver }, 
        { ThemeColor.Tertiary, Color.White }, 
        { ThemeColor.Text, Color.Black } 
    }; 
    Nature = new Dictionary<ThemeColor, Color>() { 
        { ThemeColor.Primary, Color.DarkSeaGreen }, 
        { ThemeColor.Secondary, Color.AliceBlue }, 
        { ThemeColor.Tertiary, Color.Honeydew }, 
        { ThemeColor.Text, Color.Black } 
    }; 
    Dark = new Dictionary<ThemeColor, Color>() { 
        { ThemeColor.Primary, Color.DimGray }, 
        { ThemeColor.Secondary, Color.DimGray }, 
        { ThemeColor.Tertiary, Color.Black }, 
        { ThemeColor.Text, Color.White } 
    }; 
}

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.

téléphone avec la meilleure autonomie de la batterie 2016

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 d'arrière-plan utiliseront les couleurs du thème sélectionné.

private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor) 
{ 
    // Change background color of buttons 
    btnThemeSettings.BackColor = primaryColor; 
    button1.BackColor = primaryColor; 
    button2.BackColor = secondaryColor; 
    button3.BackColor = secondaryColor; 
    this.BackColor = tertiaryColor; 
}

Créez une nouvelle fonction appelée ChangeTextColor() . Vous pouvez l'utiliser pour changer la couleur du texte entre sombre et clair. Ceci permet de s'assurer que le texte sur un fond sombre sera toujours lisible.

private void ChangeTextColor(Color textColor) 
{ 
    // Change color of text 
    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 'Light'.

private void btnLightTheme_Click(object sender, EventArgs e) 
{ 
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
    ChangeTextColor(Light[ThemeColor.Text]); 
}

Retournez dans le designer et cliquez sur les boutons 'Nature' et 'Sombre'. Utilisez le Change le thème() et ChangeTextColor() fonctionne également dans leurs gestionnaires d'événements.

private void btnNatureTheme_Click(object sender, EventArgs e) 
{ 
    ChangeTheme(Nature[ThemeColor.Primary], Nature[ThemeColor.Secondary], Nature[ThemeColor.Tertiary]); 
    ChangeTextColor(Nature[ThemeColor.Text]); 
} 
private void btnDarkTheme_Click(object sender, EventArgs e) 
{ 
    ChangeTheme(Dark[ThemeColor.Primary], Dark[ThemeColor.Secondary], Dark[ThemeColor.Tertiary]); 
    ChangeTextColor(Dark[ThemeColor.Text]); 
}

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() fonctions.
```
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
ChangeTextColor(Light[ThemeColor.Text]);
```
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.

Nom	btnThemeSettings
FlatStyle	Appartement
Taille	200, 120
Texte	Thèmes