WinForms: Kako svoji aplikaciji dodati več tem

WinForms: Kako svoji aplikaciji dodati več tem

Za sodobne aplikacije je običajno, da imajo možnost preklapljanja med različnimi temami. Nekatere aplikacije vam na primer omogočajo preklapljanje med svetlo in temno temo, medtem ko imajo druge morda več izbire tem.





Windows Forms je ogrodje uporabniškega vmesnika, ki omogoča ustvarjanje namiznih aplikacij. Teme lahko implementirate v aplikacijo obrazca Windows tako, da za vsako temo ustvarite izbirne gumbe.





MAKEUSEOF VIDEO DNEVA

Ko uporabnik izbere temo, lahko spremenite lastnosti barve ozadja ali barve besedila vsakega elementa, da se ujema z izbrano temo.





Kako nastaviti projekt Windows Form

Najprej ustvarite novo aplikacijo obrazca Windows. Napolnite nov projekt z nekaj osnovnimi kontrolniki, kot so gumbi in oznake.

  1. Ustvariti novo aplikacijo Windows Forms v Visual Studio.
  2. V novem projektu uporabite orodjarno za iskanje kontrolnika gumba.   Okno lastnosti za gumb v aplikaciji Winforms
  3. Izberite nadzor gumba in ga povlecite na platno. Dodajte skupno tri kontrolnike gumbov.   Okno lastnosti za gumb v aplikaciji Winforms
  4. Z orodjem kliknite in povlecite a nadzor etikete na platno. Nalepko postavite pod gumbe.   Okno lastnosti za gumb v aplikaciji Winforms
  5. Oblikujte gumbe in oznake v oknu lastnosti. Spremenite lastnosti v naslednje:
    gumb1 Velikost 580, 200
    FlatStyle Stanovanje
    Besedilo Uporabniki
    gumb2 Velikost 580, 100
    FlatStyle Stanovanje
    Besedilo Računi
    gumb3 Velikost 580, 100
    FlatStyle Stanovanje
    Besedilo Dovoljenja
    oznaka1 Besedilo Avtorske pravice 2022

Kako ustvariti gumb za nastavitve in seznam tem

Da bo meni preprostih tem deloval, ustvarite več gumbov, ki bodo predstavljali vsako temo. Aplikacija bo vključevala tri teme, temo 'Light', temo 'Nature' in temo 'Dark'.



kako povezati daljinski upravljalnik
  1. Na platno dodajte še en kontrolnik gumba, ki bo predstavljal gumb za nastavitve (ali »teme«).
  2. Spremenite lastnosti tega gumba v naslednje:
    Ime btnThemeSettings
    FlatStyle Stanovanje
    Velikost 200, 120
    Besedilo Teme
  3. Povlecite še tri gumbe na platno. Ti gumbi bodo predstavljali tri različne teme. Spremenite lastnosti za vsakega od gumbov na naslednje:
    1. gumb Ime btnLightTheme
    BackColor WhiteSmoke
    Velikost 200, 80
    FlatStyle Stanovanje
    Besedilo Svetloba
    Vidno False
    2. gumb Ime btnNatureTheme
    BackColor DarkSeaGreen
    Velikost 200, 80
    FlatStyle Stanovanje
    Besedilo Narava
    Vidno False
    3. gumb Ime btnDarkTheme
    BackColor DimGray
    ForeColor Bela
    Velikost 200, 80
    FlatStyle Stanovanje
    Besedilo Temno
    Vidno False
  4. Dvokliknite na Teme gumb. To bo ustvarilo metodo za obravnavo dogodka »on click«. Metoda se bo zagnala, ko uporabnik klikne ta gumb.
  5. Privzeto teme »Light«, »Nature« in »Dark« ne bodo vidne. Znotraj funkcije dodajte funkcijo za preklop vidnosti gumbov na prikaz ali skrivanje.
    private void btnThemeSettings_Click(object sender, EventArgs e) 
    {
    btnNatureTheme.Visible = !btnNatureTheme.Visible;
    btnLightTheme.Visible = !btnLightTheme.Visible;
    btnDarkTheme.Visible = !btnDarkTheme.Visible;
    }
  6. Zaženite aplikacijo s klikom na zeleni gumb za predvajanje na vrhu okna Visual Studio.
  7. Med izvajanjem bo aplikacija privzeto skrila gumbe za vsako od treh tem.
  8. Kliknite na Teme gumb za preklop tem za prikaz. Še naprej lahko pritiskate na Teme gumb za preklop njihove vidnosti.

Kako upravljati svoje teme

Ustvarite slovarje za vsako temo, da shranite različne barve, ki jih bo uporabljala. To je zato, da shranite vse svoje barve teme na enem mestu, če jih boste morali uporabiti večkrat. Prav tako olajša, če želite v prihodnosti posodobiti temo z novimi barvami.

  1. Na vrhu privzetega Form1.cs C# in znotraj Oblika razreda ustvarite globalno enum. Ta enum bo shranil različne vrste barv, ki jih boste uporabili v temi.
    enum ThemeColor 
    {
    Primary,
    Secondary,
    Tertiary,
    Text
    }
  2. Spodaj navedite tri globalne slovarje, po enega za vsako od treh tem. Več o slovarjih lahko preberete, če niste seznanjeni z uporabo a slovar v 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. Znotraj konstruktorja inicializirajte slovarje. Dodajte vrednosti za različne barve, ki jih bo uporabljala vsaka 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 }
    };
    }

Kako spremeniti temo

Ustvarite funkcije za upravljanje teme aplikacije. Te funkcije bodo spremenile barvo ozadja ali barvo besedila elementov uporabniškega vmesnika na platnu.





  1. Ustvarite novo funkcijo, imenovano Spremeni temo() . Funkcija bo vzela barve za temo kot argumente.
  2. Znotraj funkcije spremenite lastnosti barve ozadja elementov uporabniškega vmesnika. Nove barve ozadja bodo uporabljale barve za izbrano temo.
    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;
    }
  3. Ustvarite novo funkcijo, imenovano ChangeTextColor() . To lahko uporabite za spreminjanje barve besedila med temno in svetlo. To zagotavlja, da bo besedilo na temnem ozadju še vedno berljivo.
    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. V oblikovalcu dvokliknite kontrolnik gumba 'Light'. To bo odprlo datoteko s kodo v ozadju in ustvarilo obravnavo dogodkov, ko uporabnik klikne gumb.
  5. Znotraj obdelovalnika dogodkov uporabite Spremeni temo() in ChangeTextColor() funkcije. Vnesite barve, ki jih uporablja tema. Te barve lahko pridobite iz slovarja tem 'Light'.
    private void btnLightTheme_Click(object sender, EventArgs e) 
    {
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);
    ChangeTextColor(Light[ThemeColor.Text]);
    }
  6. Vrnite se v oblikovalec in kliknite gumba 'Nature' in 'Dark'. Uporabi Spremeni temo() in ChangeTextColor() deluje tudi v njihovih obdelovalcih dogodkov.
    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. Privzeto mora biti tema nastavljena na temo 'Light', ko uporabnik prvič odpre aplikacijo. V konstruktorju pod slovarji uporabite Spremeni temo() in ChangeTextColor() funkcije.
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
    ChangeTextColor(Light[ThemeColor.Text]);
  8. Zaženite aplikacijo s klikom na zeleni gumb za predvajanje na vrhu okna Visual Studio.
  9. Aplikacija privzeto uporablja temo 'Light' in za kontrolnike uporabniškega vmesnika uporabi sivo barvno shemo. Preklopite gumb za teme, da si ogledate seznam tem.
  10. Kliknite na temo Narava.
  11. Kliknite temno temo.

Ustvarjanje aplikacij z uporabo Windows Forms

Številne aplikacije omogočajo uporabniku preklapljanje med več temami. Aplikaciji Windows Forms lahko dodate teme tako, da ustvarite možnosti, ki jih uporabnik izbere.

koliko ur traja, da se nekaj obvlada

Ko uporabnik klikne temo, lahko spremenite barvo ozadja, besedilo ali katere koli druge lastnosti, da se ujemajo z barvami, uporabljenimi v izbrani temi.





Barve za vsako od tem uporabljajo vgrajene barve Visual Studio. Za boljšo izkušnjo uporabnikom boste morali uporabiti ustrezno barvno shemo. Izvedete lahko več o različnih načinih, kako lahko izberete barvno shemo za svojo aplikacijo.