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.
- 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:
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".
- 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 della proprietà Nuovo valore 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:
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 - 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 attivare o disattivare la visibilità dei pulsanti da mostrare o nascondere.
privatovuotobtnThemeSettings_Click(mittente dell'oggetto, EventArgs e)
{
btnNatureTheme. Visibile = !btnNatureTheme. Visibile;
btnLightTheme. Visibile = !btnLightTheme. Visibile;
btnDarkTheme. Visibile = !btnDarkTheme. Visibile;
} - 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 TemaColore
{
Primario,
Secondario,
Terziario,
Testo
} - 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#.
Dizionario<TemaColore, Colore> Luce = nuovo dizionario<TemaColore, Colore>();
Dizionario<TemaColore, Colore> Natura = nuovo dizionario<TemaColore, Colore>();
Dizionario<TemaColore, Colore> Scuro = nuovo dizionario<TemaColore, Colore>(); - All'interno del costruttore, inizializza i dizionari. Aggiungi valori per i diversi colori che utilizzerà ogni tema.
pubblico Modulo1()
{
InizializzaComponent();
// Aggiungi dizionari qui
Luce = nuovo dizionario<TemaColore, Colore>() {
{ ThemeColor. Colore primario. Fumo bianco },
{ ThemeColor. Secondario, Colore. D'argento },
{ ThemeColor. Terziario, Colore. Bianco },
{ ThemeColor. Colore del testo. Nero }
};
Natura = nuovo dizionario<TemaColore, Colore>() {
{ ThemeColor. Colore primario. DarkSeaGreen },
{ ThemeColor. Secondario, Colore. AliceBlue},
{ ThemeColor. Terziario, Colore. Melata },
{ ThemeColor. Colore del testo. Nero }
};
Scuro = nuovo dizionario<TemaColore, Colore>() {
{ ThemeColor. Colore primario. Grigio scuro },
{ ThemeColor. Secondario, Colore. Grigio scuro },
{ ThemeColor. Terziario, Colore. Nero },
{ ThemeColor. Colore del testo. Bianco }
};
}
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.
privatovuotoCambia tema(Color primaryColor, Color secondaryColor, Color terziaryColor)
{
// Cambia il colore di sfondo dei pulsanti
btnThemeSettings. BackColor = colore primario;
button1.BackColor = primaryColor;
button2.BackColor = secondaryColor;
button3.BackColor = secondaryColor;
questo.BackColor = terziarioColor;
} - 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.
privatovuotoCambia ColoreTesto(Colore testoColore)
{
// Modificare colore ditesto
button1.ForeColor = textColor;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings. Colore anteriore = Colore testo;
} - 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 "Luce".
privatovuotobtnLightTheme_Click(mittente dell'oggetto, EventArgs e)
{
Cambia tema(Luce[Colore del tema. Primario], Luce[Colore del tema. Secondario], Luce[Colore del tema. Terziario]);
Cambia ColoreTesto(Luce[Colore del tema. Testo]);
} - Torna al designer e fai clic sui pulsanti "Natura" e "Scuro". Utilizzare il CambiaTema() e CambiaColoreTesto() funzioni anche nei loro gestori di eventi.
privatovuotobtnNatureTheme_Click(mittente dell'oggetto, EventArgs e)
{
Cambia tema(Natura[Colore del tema. Primario], Natura[Colore del tema. Secondario], Natura[Colore del tema. Terziario]);
Cambia ColoreTesto(Natura[Colore del tema. Testo]);
}
privatovuotobtnDarkTheme_Click(mittente dell'oggetto, EventArgs e)
{
Cambia tema(Scuro[Colore del tema. Primario], Scuro[Colore del tema. Secondario], Scuro[Colore del tema. Terziario]);
Cambia ColoreTesto(Scuro[Colore del tema. Testo]);
} - 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.
Cambia tema(Luce[Colore del tema. Primario], Luce[Colore del tema. Secondario], Luce[Colore del tema. Terziario]);
Cambia ColoreTesto(Luce[Colore del tema. Testo]); - 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.
