WinForms: come aggiungere più temi alla tua applicazione

I temi sono un ottimo modo per consentire ai tuoi utenti di personalizzare la tua applicazione senza dover essere troppo coinvolti in dettagli specifici.

È comune per le applicazioni moderne avere un’opzione per passare da un tema all’altro. Ad esempio, alcune applicazioni ti consentono di passare da un tema chiaro a un tema scuro, mentre altre potrebbero avere più scelte di temi.

Windows Forms è un framework dell’interfaccia utente che consente di creare applicazioni desktop. Puoi implementare temi in un’app Windows Form creando pulsanti selezionabili per ogni tema.

Quando l’utente seleziona un tema, è possibile modificare il colore di sfondo o le proprietà del colore del testo di ciascun elemento in modo che corrisponda al tema selezionato.

Come impostare il progetto Windows Form

Innanzitutto, crea una nuova app per moduli Windows. Popolare il nuovo progetto con alcuni controlli di base, come pulsanti ed etichette.

1. Crea una nuova applicazione Windows Forms in Visual Studio.

2. Nel nuovo progetto, utilizzare la casella degli strumenti per cercare un controllo pulsante.

3. Seleziona il controllo pulsante e trascinalo sulla tela. Aggiungi un totale di tre pulsanti di controllo.

4. Utilizzando la casella degli strumenti, fare clic e trascinare un controllo etichetta sull’area di disegno. Posiziona l’etichetta sotto i pulsanti.

5. Dai uno stile ai pulsanti e alle etichette utilizzando la finestra delle proprietà. Modificare le proprietà come segue:

   Controllo	Nome della proprietà	Nuovo valore
   pulsante1	Dimensione	580, 200
   Stile piatto	Appartamento
   Testo	Utenti
   pulsante2	Dimensione	580, 100
   Stile piatto	Appartamento
   Testo	Conti
   pulsante 3	Dimensione	580, 100
   Stile piatto	Appartamento
   Testo	Permessi
   etichetta1	Testo	Diritto d’autore 2022

Come creare il pulsante Impostazioni e l’elenco dei temi

Affinché un semplice menu di temi funzioni, crea più pulsanti per rappresentare ogni tema. L’applicazione includerà tre temi, un tema "Luce", un tema "Natura" e un tema "Scuro".

1. Aggiungi un altro controllo pulsante all’area di disegno per rappresentare il pulsante delle impostazioni (o "Temi").

2. Modificare le proprietà di questo pulsante come segue:

   Nome della proprietà	Nuovo valore
   Nome	btnThemeSettings
   Stile piatto	Appartamento
   Dimensione	200, 120
   Testo	Temi

3. Trascina altri tre pulsanti sulla tela. Questi pulsanti rappresenteranno i tre diversi temi. Modificare le proprietà di ciascuno dei pulsanti come segue:

   Controllo	Nome della proprietà	Nuovo valore
   1° bottone	Nome	btnLightTheme
   Colore di sfondo	Fumo bianco
   Dimensione	200, 80
   Stile piatto	Appartamento
   Testo	Luce
   Visibile	Falso
   2° bottone	Nome	btnNatureTheme
   Colore di sfondo	DarkSeaGreen
   Dimensione	200, 80
   Stile piatto	Appartamento
   Testo	Natura
   Visibile	Falso
   3° bottone	Nome	btnDarkTheme
   Colore di sfondo	Grigio scuro
   Colore anteriore	Bianco
   Dimensione	200, 80
   Stile piatto	Appartamento
   Testo	Scuro
   Visibile	Falso

4. Fare doppio clic sul pulsante Temi. Questo creerà un metodo per gestire l’evento "al clic". Il metodo verrà eseguito quando l’utente fa clic su questo pulsante.

5. Per impostazione predefinita, i temi "Chiaro", "Natura" e "Scuro" non saranno visibili. All’interno della funzione, aggiungi la funzionalità per attivare o disattivare la visibilità dei pulsanti da mostrare o nascondere.

   private void btnThemeSettings_Click(object sender, EventArgs e){    btnNatureTheme.Visible = !btnNatureTheme.Visible;    btnLightTheme.Visible = !btnLightTheme.Visible;    btnDarkTheme.Visible = !btnDarkTheme.Visible;}

6. Eseguire l’applicazione facendo clic sul pulsante di riproduzione verde nella parte superiore della finestra di Visual Studio.

7. In fase di esecuzione, l’applicazione nasconderà i pulsanti per ciascuno dei tre temi per impostazione predefinita.

8. Fare clic sul pulsante Temi per alternare i temi da mostrare. Puoi continuare a premere il pulsante Temi per alternare la loro visibilità.

Come gestire i tuoi temi

Crea dizionari per ogni tema per memorizzare i diversi colori che utilizzerà. Questo è così che memorizzi tutti i colori del tuo tema in un unico posto, nel caso in cui dovessi usarli più volte. Inoltre, semplifica l’aggiornamento di un tema con nuovi colori in futuro.

1. Nella parte superiore del file C# Form1.cs predefinito e all’interno della classe Form, creare un’enumerazione globale. Questa enum memorizzerà i diversi tipi di colori che utilizzerai in un tema.

   enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  

2. Sotto, dichiara tre dizionari globali, uno per ciascuno dei tre temi. Puoi leggere di più sui dizionari se non hai dimestichezza con l’uso di un dizionario in 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>();

3. All’interno del costruttore, inizializza i dizionari. Aggiungi valori per i diversi colori che utilizzerà ogni tema.

   public Form1(){    InitializeComponent();        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 }    };}

Come cambiare il tema

Crea funzioni per gestire il tema dell’applicazione. Queste funzioni cambieranno il colore di sfondo o il colore del testo degli elementi dell’interfaccia utente sull’area di disegno.

1. Crea una nuova funzione chiamata ChangeTheme(). La funzione prenderà i colori per un tema come argomenti.

2. All’interno della funzione, cambia le proprietà del colore di sfondo degli elementi dell’interfaccia utente. I nuovi colori di sfondo utilizzeranno i colori per il tema selezionato.

   private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}

3. Crea una nuova funzione chiamata ChangeTextColor(). Puoi usarlo per cambiare il colore del testo tra scuro e chiaro. Questo per garantire che il testo su uno sfondo scuro sia ancora leggibile.

   private void ChangeTextColor(Color textColor){    // Change color of text    button1.ForeColor = textColor;    button2.ForeColor = textColor;    button3.ForeColor = textColor;    label1.ForeColor = textColor;    btnThemeSettings.ForeColor = textColor;}

4. Dal designer, fai doppio clic sul controllo del pulsante "Luce". Questo aprirà il file code-behind e genererà un gestore di eventi per quando l’utente fa clic sul pulsante.

5. All’interno del gestore di eventi, utilizzare le funzioni ChangeTheme() e ChangeTextColor(). Immettere i colori utilizzati dal tema. Puoi recuperare questi colori dal dizionario dei temi "Luce".

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

6. Torna al designer e fai clic sui pulsanti "Natura" e "Scuro". Utilizzare anche le funzioni ChangeTheme() e ChangeTextColor() nei rispettivi gestori di eventi.

   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]);}

7. Per impostazione predefinita, il tema deve essere impostato sul tema "Leggero" quando l’utente apre l’app per la prima volta. Nel costruttore, sotto i dizionari, usa le funzioni ChangeTheme() e ChangeTextColor().

   ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);

8. Eseguire l’applicazione facendo clic sul pulsante di riproduzione verde nella parte superiore della finestra di Visual Studio.

9. Per impostazione predefinita, l’applicazione utilizza il tema "Chiaro" e applica la combinazione di colori grigi ai controlli dell’interfaccia utente. Attiva o disattiva il pulsante dei temi per visualizzare l’elenco dei temi.

10. Fare clic sul tema Natura.

11. Fare clic sul tema Scuro.

Creazione di applicazioni utilizzando Windows Form

Molte applicazioni consentono all’utente di passare da un tema all’altro. Puoi aggiungere temi a un’applicazione Windows Forms creando opzioni che l’utente può selezionare.

Quando l’utente fa clic su un tema, è possibile modificare il colore di sfondo, il testo o qualsiasi altra proprietà in modo che corrisponda ai colori utilizzati nel tema selezionato.

I colori per ciascuno dei temi usano i colori predefiniti di Visual Studio. Dovrai utilizzare una combinazione di colori adeguata per offrire agli utenti un’esperienza migliore. Puoi saperne di più sui diversi modi in cui puoi scegliere una combinazione di colori per la tua app.