WinForms: Ako pridať do aplikácie viacero tém

Pre moderné aplikácie je bežné, že majú možnosť prepínať medzi rôznymi témami. Niektoré aplikácie vám napríklad umožňujú prepínať medzi svetlou a tmavou témou, zatiaľ čo iné môžu mať viac možností výberu tém.

Windows Forms je rámec používateľského rozhrania, ktorý vám umožňuje vytvárať desktopové aplikácie. Témy môžete implementovať do aplikácie formulára Windows vytvorením voliteľných tlačidiel pre každý motív.

Keď používateľ vyberie tému, môžete zmeniť farbu pozadia alebo farbu textu každého prvku tak, aby zodpovedala vybratej téme.

Ako nastaviť projekt Windows Form Project

Najprv vytvorte novú aplikáciu formulára Windows. Naplňte nový projekt niektorými základnými ovládacími prvkami, ako sú tlačidlá a štítky.

1. Vytvor nová aplikácia Windows Forms vo Visual Studiu.
instagram viewer
2. V novom projekte použite panel s nástrojmi na vyhľadanie ovládacieho prvku tlačidla.
3. Vyberte tlačidlové ovládanie a pretiahnite ho na plátno. Pridajte celkom tri ovládacie prvky.
4. Pomocou panela nástrojov kliknite a potiahnite a kontrola štítkov na plátno. Umiestnite štítok pod tlačidlá.
5. Pomocou okna vlastností upravte štýl tlačidiel a štítkov. Zmeňte vlastnosti na nasledujúce:

   Kontrola	Názov vlastnosti	Nová hodnota
   tlačidlo1	Veľkosť	580, 200
   FlatStyle	Plochý
   Text	Používatelia
   tlačidlo2	Veľkosť	580, 100
   FlatStyle	Plochý
   Text	účty
   tlačidlo3	Veľkosť	580, 100
   FlatStyle	Plochý
   Text	Povolenia
   štítok1	Text	Copyright 2022

Ako vytvoriť tlačidlo Nastavenia a zoznam motívov

Aby fungovala jednoduchá ponuka tém, vytvorte viacero tlačidiel, ktoré budú reprezentovať každú tému. Aplikácia bude obsahovať tri témy, tému „Svetlá“, téma „Príroda“ a téma „Tma“.

1. Pridajte na plátno ďalší ovládací prvok tlačidla, ktorý bude predstavovať tlačidlo nastavení (alebo tlačidlo „Témy“).
2. Zmeňte vlastnosti tohto tlačidla na nasledovné:

   Názov vlastnosti	Nová hodnota
   názov	btnThemeSettings
   FlatStyle	Plochý
   Veľkosť	200, 120
   Text	Témy

3. Pretiahnite tri ďalšie tlačidlá na plátno. Tieto tlačidlá budú reprezentovať tri rôzne témy. Zmeňte vlastnosti každého z tlačidiel na nasledovné:

   Kontrola	Názov vlastnosti	Nová hodnota
   1. tlačidlo	názov	btnLightTheme
   BackColor	WhiteSmoke
   Veľkosť	200, 80
   FlatStyle	Plochý
   Text	Svetlo
   Viditeľné	Nepravdivé
   2. tlačidlo	názov	btnNatureTheme
   BackColor	Tmavomorská zelená
   Veľkosť	200, 80
   FlatStyle	Plochý
   Text	Príroda
   Viditeľné	Nepravdivé
   3. tlačidlo	názov	btnDarkTheme
   BackColor	DimGray
   Farba popredia	biely
   Veľkosť	200, 80
   FlatStyle	Plochý
   Text	Tmavý
   Viditeľné	Nepravdivé

4. Dvakrát kliknite na Témy tlačidlo. Tým sa vytvorí metóda na spracovanie udalosti „po kliknutí“. Metóda sa spustí, keď používateľ klikne na toto tlačidlo.
5. V predvolenom nastavení nebudú témy „Svetlé“, „Príroda“ a „Tma“ viditeľné. Vnútri funkcie pridajte funkciu na prepínanie viditeľnosti tlačidiel na zobrazenie alebo skrytie.

   súkromnéneplatnébtnThemeSettings_Click(odosielateľ objektu, EventArgs e)
   {
    btnNatureTheme. Viditeľné = !btnNatureTheme. Viditeľné;
    btnLightTheme. Viditeľné = !btnLightTheme. Viditeľné;
    btnDarkTheme. Viditeľné = !btnDarkTheme. Viditeľné;
   }
   

6. Spustite aplikáciu kliknutím na zelené tlačidlo prehrávania v hornej časti okna Visual Studio.
7. Aplikácia za behu štandardne skryje tlačidlá pre každú z troch tém.
8. Klikni na Témy tlačidlo na prepínanie tém, ktoré sa majú zobraziť. Môžete pokračovať v stláčaní tlačidla Témy tlačidlo na prepnutie ich viditeľnosti.

Ako spravovať svoje témy

Vytvorte slovníky pre každú tému na uloženie rôznych farieb, ktoré bude používať. Je to preto, aby ste si všetky farby motívu uložili na jedno miesto pre prípad, že by ste ich potrebovali použiť viackrát. Uľahčí to aj to, ak chcete v budúcnosti aktualizovať tému novými farbami.

1. V hornej časti predvolenej položky Form1.cs C# súbor a vo vnútri Formulár triedy, vytvorte globálny enum. Tento zoznam uloží rôzne typy farieb, ktoré použijete v téme.

   enum ThemeColor
   {
    Primárny,
    sekundárne,
    treťohorný,
    Text
   } 

2. Dole deklarujte tri globálne slovníky, jeden pre každú z troch tém. Môžete si prečítať viac o slovníkoch, ak neviete, ako používať a slovník v C#.

   Slovník<ThemeColor, Color> Svetlo = nový slovník<ThemeColor, Color>();
   Slovník<ThemeColor, Color> Príroda = nový slovník<ThemeColor, Color>();
   Slovník<ThemeColor, Color> Tmavý = nový slovník<ThemeColor, Color>();

3. Vo vnútri konštruktora inicializujte slovníky. Pridajte hodnoty pre rôzne farby, ktoré každá téma použije.

   verejnosti Form1()
   {
    InitializeComponent();
   // Tu pridajte slovníky
    Svetlo = nový slovník<ThemeColor, Color>() {
    { ThemeColor. Primárne, Farba. WhiteSmoke },
    { ThemeColor. Sekundárne, Farba. Strieborná },
    { ThemeColor. Treťohorné, Farebné. Biely },
    { ThemeColor. Text, Farba. Čierna }
    };
    Príroda = nový slovník<ThemeColor, Color>() {
    { ThemeColor. Primárne, Farba. DarkSeaGreen},
    { ThemeColor. Sekundárne, Farba. AliceBlue},
    { ThemeColor. Treťohorné, Farebné. Medová Rosa },
    { ThemeColor. Text, Farba. Čierna }
    };
    Tmavý = nový slovník<ThemeColor, Color>() {
    { ThemeColor. Primárne, Farba. DimGray },
    { ThemeColor. Sekundárne, Farba. DimGray },
    { ThemeColor. Treťohorné, Farebné. Čierna },
    { ThemeColor. Text, Farba. Biely }
    };
   }

Ako zmeniť tému

Vytvorte funkcie na správu témy aplikácie. Tieto funkcie zmenia farbu pozadia alebo farbu textu prvkov používateľského rozhrania na plátne.

1. Vytvorte novú funkciu s názvom Zmeniť tému(). Funkcia vezme farby pre tému ako argumenty.
2. Vo vnútri funkcie zmeňte vlastnosti farby pozadia prvkov používateľského rozhrania. Nové farby pozadia budú používať farby pre vybratú tému.

   súkromnéneplatnéZmeniť tému(Farba primárna farba, farba sekundárna farba, farba terciárna farba)
   {
   // Zmena farby pozadia tlačidiel
    btnThemeSettings. BackColor = primárna farba;
    button1.BackColor = primárna farba;
    button2.BackColor = sekundárnaFarba;
    button3.BackColor = sekundárnaFarba;
   toto.BackColor = terciárna farba;
   }

3. Vytvorte novú funkciu s názvom ChangeTextColor(). Môžete to použiť na zmenu farby textu medzi tmavou a svetlou. Tým sa zabezpečí, že text na tmavom pozadí bude stále čitateľný.

   súkromnéneplatnéChangeTextColor(Farba textuColor)
   {
    // Zmeniť farba ztext
    button1.ForeColor = farba textu;
    button2.ForeColor = farba textu;
    button3.ForeColor = farba textu;
    label1.ForeColor = farba textu;
    btnThemeSettings. Farba popredia = farba textu;
   }

4. Z návrhára dvakrát kliknite na ovládací prvok tlačidla "Svetlo". Tým sa otvorí súbor s kódom na pozadí a vygeneruje sa obsluha udalosti, keď používateľ klikne na tlačidlo.
5. Vo vnútri obslužného programu udalosti použite Zmeniť tému() a ChangeTextColor() funkcie. Zadajte farby, ktoré téma používa. Tieto farby môžete získať zo slovníka tém „Svetlo“.

   súkromnéneplatnébtnLightTheme_Click(odosielateľ objektu, EventArgs e)
   {
   Zmeniť tému(Svetlo[ThemeColor. Primárny], Svetlo[ThemeColor. sekundárne], Svetlo[ThemeColor. terciárne]);
   ChangeTextColor(Svetlo[ThemeColor. Text]);
   }

6. Vráťte sa k návrhárovi a kliknite na tlačidlá „Príroda“ a „Tma“. Použi Zmeniť tému() a ChangeTextColor() funkcie aj vo svojich obslužných programoch udalostí.

   súkromnéneplatnébtnNatureTheme_Click(odosielateľ objektu, EventArgs e)
   {
   Zmeniť tému(Príroda[ThemeColor. Primárny], Príroda[ThemeColor. sekundárne], Príroda[ThemeColor. terciárne]);
   ChangeTextColor(Príroda[ThemeColor. Text]);
   }
   súkromnéneplatnébtnDarkTheme_Click(odosielateľ objektu, EventArgs e)
   {
   Zmeniť tému(Tmavý[ThemeColor. Primárny], Tmavý[ThemeColor. sekundárne], Tmavý[ThemeColor. terciárne]);
   ChangeTextColor(Tmavý[ThemeColor. Text]);
   }

7. V predvolenom nastavení by mala byť téma nastavená na tému „Svetlá“, keď používateľ prvýkrát otvorí aplikáciu. V konštruktore pod slovníkmi použite Zmeniť tému() a ChangeTextColor() funkcie.

   Zmeniť tému(Svetlo[ThemeColor. Primárny], Svetlo[ThemeColor. sekundárne], Svetlo[ThemeColor. terciárne]);
   ChangeTextColor(Svetlo[ThemeColor. Text]);

8. Spustite aplikáciu kliknutím na zelené tlačidlo prehrávania v hornej časti okna Visual Studio.
9. Aplikácia v predvolenom nastavení používa tému „Svetlo“ a na ovládacie prvky používateľského rozhrania aplikuje sivú farebnú schému. Prepnutím tlačidla tém zobrazíte zoznam tém.
10. Kliknite na tému Príroda.
11. Kliknite na temnú tému.

Vytváranie aplikácií pomocou Windows Forms

Mnoho aplikácií umožňuje používateľovi prepínať medzi viacerými témami. Do aplikácie Windows Forms môžete pridať motívy vytvorením možností, ktoré si môže používateľ vybrať.

Keď používateľ klikne na motív, môžete zmeniť farbu pozadia, text alebo akékoľvek iné vlastnosti tak, aby zodpovedali farbám použitým vo vybranom motíve.

Farby pre každú z tém používajú vstavané farby Visual Studio. Budete musieť použiť správnu farebnú schému, aby ste používateľom poskytli lepší zážitok. Môžete sa dozvedieť viac o rôznych spôsoboch výberu farebnej schémy pre vašu aplikáciu.