WinForms: come aggiungere più temi alla tua applicazione

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

dove posso andare a stampare qualcosa

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.

FARE USO DEL VIDEO DEL GIORNO

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.

Creare un nuova applicazione Windows Form in Visual Studio.
Nel nuovo progetto, utilizzare la casella degli strumenti per cercare un controllo pulsante.
Seleziona il controllo del pulsante e trascinalo sulla tela. Aggiungi un totale di tre pulsanti di controllo.
Utilizzando la casella degli strumenti, fare clic e trascinare a controllo delle etichette sulla tela. Posiziona l'etichetta sotto i pulsanti.

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

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

Aggiungi un altro controllo pulsante all'area di disegno per rappresentare il pulsante delle impostazioni (o 'Temi').
Modificare le proprietà di questo pulsante come segue:

Nome btnThemeSettings

Stile piatto Appartamento

Dimensione 200, 120

Testo Temi

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

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

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

Per impostazione predefinita, i temi 'Chiaro', 'Natura' e 'Scuro' non saranno visibili. All'interno della funzione, aggiungi la funzionalità per alternare 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; 
}

Eseguire l'applicazione facendo clic sul pulsante di riproduzione verde nella parte superiore della finestra di Visual Studio.
In fase di esecuzione, l'applicazione nasconderà i pulsanti per ciascuno dei tre temi per impostazione predefinita.
Clicca sul Temi pulsante per alternare i temi da mostrare. Puoi continuare a premere il Temi pulsante 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.

In cima all'impostazione predefinita Form1.cs C# e all'interno del file Modulo class, creare un enum globale. Questa enum memorizzerà i diversi tipi di colori che utilizzerai in un tema.
```
enum ThemeColor 
{ 
    Primary, 
    Secondary, 
    Tertiary, 
    Text 
}  
```

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 a 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>();

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

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

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.

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

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) 
{ 
    // Change background color of buttons 
    btnThemeSettings.BackColor = primaryColor; 
    button1.BackColor = primaryColor; 
    button2.BackColor = secondaryColor; 
    button3.BackColor = secondaryColor; 
    this.BackColor = tertiaryColor; 
}

Crea una nuova funzione chiamata CambiaColoreTesto() . 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; 
}

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.

All'interno del gestore eventi, utilizzare il CambiaTema() e CambiaColoreTesto() funzioni. Immettere i colori utilizzati dal tema. Puoi recuperare questi colori dal dizionario dei temi 'Light'.

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

Torna al designer e fai clic sui pulsanti 'Natura' e 'Scuro'. Utilizzare il CambiaTema() e CambiaColoreTesto() funzioni anche nei loro 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]); 
}

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 il CambiaTema() e CambiaColoreTesto() funzioni.
```
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
ChangeTextColor(Light[ThemeColor.Text]);
```
Eseguire l'applicazione facendo clic sul pulsante di riproduzione verde nella parte superiore della finestra di Visual Studio.
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.
Fare clic sul tema Natura.
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.

Nome	btnThemeSettings
Stile piatto	Appartamento
Dimensione	200, 120
Testo	Temi