Temele sunt o modalitate excelentă de a-ți permite utilizatorilor să-ți personalizeze aplicația fără a fi nevoie să se implice prea mult în detalii specifice.
Este obișnuit ca aplicațiile moderne să aibă opțiunea de a comuta între diferite teme. De exemplu, unele aplicații vă permit să comutați între o temă deschisă sau o temă întunecată, în timp ce altele pot avea mai multe opțiuni de teme.
Windows Forms este un cadru UI care vă permite să creați aplicații desktop. Puteți implementa teme într-o aplicație de formular Windows creând butoane selectabile pentru fiecare temă.
Când utilizatorul selectează o temă, puteți modifica culoarea de fundal sau proprietățile culorii textului fiecărui element pentru a se potrivi cu tema selectată.
Cum să configurați proiectul Windows Form
Mai întâi, creați o nouă aplicație Windows Form. Completați noul proiect cu câteva comenzi de bază, cum ar fi butoane și etichete.
- Creeaza o noua aplicație Windows Forms în Visual Studio.
- În noul proiect, utilizați caseta de instrumente pentru a căuta un buton de control.
- Selectează buton de control și trageți-l pe pânză. Adăugați un total de trei butoane de control.
- Folosind caseta de instrumente, faceți clic și trageți a controlul etichetei pe pânză. Puneți eticheta sub butoane.
- Stilați butoanele și etichetele folosind fereastra de proprietăți. Schimbați proprietățile în următoarele:
Control Numele proprietatii Valoare nouă butonul 1 mărimea 580, 200 FlatStyle Apartament Text Utilizatori butonul 2 mărimea 580, 100 FlatStyle Apartament Text Conturi butonul 3 mărimea 580, 100 FlatStyle Apartament Text Permisiuni eticheta 1 Text Copyright 2022
Cum se creează butonul Setări și lista de teme
Pentru ca un meniu de teme simplu să funcționeze, creați mai multe butoane pentru a reprezenta fiecare temă. Aplicația va include trei teme, o temă „Ușoară”, o temă „Natura” și o temă „Întunecată”.
- Adăugați un alt buton de control pe pânză pentru a reprezenta butonul de setări (sau „Teme”).
- Schimbați proprietățile acestui buton în următoarele:
Numele proprietatii Valoare nouă Nume btnThemeSettings FlatStyle Apartament mărimea 200, 120 Text Teme - Trageți încă trei butoane pe pânză. Aceste butoane vor reprezenta cele trei teme diferite. Modificați proprietățile pentru fiecare dintre butoane la următoarele:
Control Numele proprietatii Valoare nouă Primul Buton Nume btnLightTheme Culoare de fundal Fum alb mărimea 200, 80 FlatStyle Apartament Text Ușoară Vizibil Fals Al 2-lea Buton Nume btnNatureTheme Culoare de fundal DarkSeaGreen mărimea 200, 80 FlatStyle Apartament Text Natură Vizibil Fals Al 3-lea buton Nume btnDarkTheme Culoare de fundal DimGray Culoarea din fata alb mărimea 200, 80 FlatStyle Apartament Text Întuneric Vizibil Fals - Faceți dublu clic pe Teme buton. Aceasta va crea o metodă de a gestiona evenimentul „la clic”. Metoda va rula atunci când utilizatorul face clic pe acest buton.
- În mod implicit, temele „Lumină”, „Natura” și „Întunecat” nu vor fi vizibile. În interiorul funcției, adăugați funcționalitatea pentru a comuta vizibilitatea butoanelor pentru a afișa sau ascunde.
privatgolbtnThemeSettings_Click(Expeditorul obiectului, EventArgs e)
{
btnNatureTheme. Vizibil = !btnNatureTheme. Vizibil;
btnLightTheme. Vizibil = !btnLightTheme. Vizibil;
btnDarkTheme. Vizibil = !btnDarkTheme. Vizibil;
} - Rulați aplicația făcând clic pe butonul verde de redare din partea de sus a ferestrei Visual Studio.
- În timpul execuției, aplicația va ascunde în mod implicit butoanele pentru fiecare dintre cele trei teme.
- Faceți clic pe Teme butonul pentru a comuta temele de afișat. Puteți continua să apăsați tasta Teme butonul pentru a comuta vizibilitatea acestora.
Cum să vă gestionați temele
Creați dicționare pentru fiecare temă pentru a stoca diferitele culori pe care le va folosi. Acest lucru este astfel încât să stocați toate culorile temei într-un singur loc, în cazul în care trebuie să le utilizați de mai multe ori. De asemenea, este mai ușor dacă doriți să actualizați o temă cu culori noi în viitor.
- În partea de sus a valorii implicite Form1.cs C# și în interiorul Formă clasa, creați o enumerare globală. Această enumerare va stoca diferitele tipuri de culori pe care le veți folosi într-o temă.
enumerare ThemeColor
{
Primar,
Secundar,
Terţiar,
Text
} - Dedesubt, declarați trei dicționare globale, câte unul pentru fiecare dintre cele trei teme. Puteți citi mai multe despre dicționare dacă nu sunteți familiarizat cu modul de utilizare a dictionar in C#.
Dicţionar<TemaCuloare, Culoare> Light = nou Dicţionar<TemaCuloare, Culoare>();
Dicţionar<TemaCuloare, Culoare> Nature = nou Dicționar<TemaCuloare, Culoare>();
Dicţionar<TemaCuloare, Culoare> Dark = nou Dicționar<TemaCuloare, Culoare>(); - În interiorul constructorului, inițializați dicționarele. Adăugați valori pentru diferitele culori pe care le va folosi fiecare temă.
public Formularul 1()
{
InitializeComponent();
// Adăugați dicționare aici
Light = nou Dicţionar<TemaCuloare, Culoare>() {
{ ThemeColor. Culoare primară. Fum alb },
{ ThemeColor. Secundar, Culoare. Argint },
{ ThemeColor. Terțiar, Culoare. Alb },
{ ThemeColor. Culoarea textului. negru }
};
Nature = nou Dicționar<TemaCuloare, Culoare>() {
{ ThemeColor. Culoare primară. DarkSeaGreen },
{ ThemeColor. Secundar, Culoare. AliceBlue },
{ ThemeColor. Terțiar, Culoare. Mană },
{ ThemeColor. Culoarea textului. negru }
};
Dark = nou Dicționar<TemaCuloare, Culoare>() {
{ ThemeColor. Culoare primară. DimGray },
{ ThemeColor. Secundar, Culoare. DimGray },
{ ThemeColor. Terțiar, Culoare. negru },
{ ThemeColor. Culoarea textului. Alb }
};
}
Cum se schimbă tema
Creați funcții pentru a gestiona tema aplicației. Aceste funcții vor schimba culoarea de fundal sau culoarea textului elementelor UI de pe pânză.
- Creați o nouă funcție numită Schimbă tema(). Funcția va lua culorile pentru o temă ca argumente.
- În interiorul funcției, modificați proprietățile culorii de fundal ale elementelor UI. Noile culori de fundal vor folosi culori pentru tema selectată.
privatgolSchimbă tema(Culoare primară, Culoare secundară, Culoare terțiară)
{
// Schimbați culoarea de fundal a butoanelor
btnThemeSettings. BackColor = primaryColor;
button1.BackColor = primaryColor;
button2.BackColor = secondaryColor;
button3.BackColor = secondaryColor;
acest.BackColor = tertiaryColor;
} - Creați o nouă funcție numită ChangeTextColor(). Puteți folosi acest lucru pentru a schimba culoarea textului între întuneric și deschis. Acest lucru este pentru a vă asigura că textul pe un fundal întunecat va fi în continuare lizibil.
privatgolSchimbați culoarea textului(Color textColor)
{
// Schimbare culoare detext
button1.ForeColor = textColor;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings. ForeColor = textColor;
} - De la designer, faceți dublu clic pe butonul de control „Lumină”. Aceasta va deschide fișierul code-behind și va genera un handler de evenimente pentru atunci când utilizatorul face clic pe buton.
- În interiorul handler-ului de evenimente, utilizați Schimbă tema() și ChangeTextColor() funcții. Introduceți culorile pe care le folosește tema. Puteți prelua aceste culori din dicționarul tematic „Lumină”.
privatgolbtnLightTheme_Click(Expeditorul obiectului, EventArgs e)
{
Schimbă tema(Ușoară[TemăColor. Primar], Ușoară[TemăColor. Secundar], Ușoară[TemăColor. Terţiar]);
Schimbați culoarea textului(Ușoară[TemăColor. Text]);
} - Reveniți la designer și faceți clic pe butoanele „Natura” și „Întunecat”. Folosește Schimbă tema() și ChangeTextColor() funcții și în gestionatorii lor de evenimente.
privatgolbtnNatureTheme_Click(Expeditorul obiectului, EventArgs e)
{
Schimbă tema(Natură[TemăColor. Primar], Natură[TemăColor. Secundar], Natură[TemăColor. Terţiar]);
Schimbați culoarea textului(Natură[TemăColor. Text]);
}
privatgolbtnDarkTheme_Click(Expeditorul obiectului, EventArgs e)
{
Schimbă tema(Întuneric[TemăColor. Primar], Întuneric[TemăColor. Secundar], Întuneric[TemăColor. Terţiar]);
Schimbați culoarea textului(Întuneric[TemăColor. Text]);
} - În mod implicit, tema ar trebui să fie setată la tema „Ușoară” atunci când utilizatorul deschide prima aplicație. În constructor, sub dicționare, utilizați Schimbă tema() și ChangeTextColor() funcții.
Schimbă tema(Ușoară[TemăColor. Primar], Ușoară[TemăColor. Secundar], Ușoară[TemăColor. Terţiar]);
Schimbați culoarea textului(Ușoară[TemăColor. Text]); - Rulați aplicația făcând clic pe butonul verde de redare din partea de sus a ferestrei Visual Studio.
- În mod implicit, aplicația folosește tema „Lumină” și aplică schema de culori gri la controalele UI. Comutați butonul de teme pentru a vedea lista de teme.
- Faceți clic pe tema Natură.
- Faceți clic pe tema Întunecată.
Crearea de aplicații folosind formulare Windows
Multe aplicații permit utilizatorului să comute între mai multe teme. Puteți adăuga teme la o aplicație Windows Forms creând opțiuni pe care utilizatorul le poate selecta.
Când utilizatorul face clic pe o temă, puteți schimba culoarea de fundal, textul sau orice alte proprietăți pentru a se potrivi cu culorile utilizate în tema selectată.
Culorile pentru fiecare dintre teme folosesc culorile încorporate ale Visual Studio. Va trebui să utilizați o schemă de culori adecvată pentru a oferi utilizatorilor o experiență mai bună. Puteți afla mai multe despre diferitele moduri în care puteți alege o schemă de culori pentru aplicația dvs.
