WinForms: Hur man lägger till flera teman i din applikation

Teman är ett utmärkt sätt att låta dina användare anpassa din applikation utan att behöva bli alltför involverad i specifika detaljer.

Det är vanligt att moderna applikationer har möjlighet att växla mellan olika teman. Till exempel låter vissa applikationer dig växla mellan ett ljust eller mörkt tema, medan andra kan ha fler temaval.

Windows Forms är ett ramverk för användargränssnitt som låter dig skapa skrivbordsapplikationer. Du kan implementera teman i en Windows-formulärapp genom att skapa valbara knappar för varje tema.

När användaren väljer ett tema kan du ändra bakgrundsfärgen eller textfärgegenskaperna för varje element för att matcha det valda temat.

Hur man ställer in Windows Form Project

Skapa först en ny Windows-formulärapp. Fyll det nya projektet med några grundläggande kontroller, som knappar och etiketter.

1. Skapa ett nytt Windows Forms-program i Visual Studio.

2. I det nya projektet använder du verktygslådan för att söka efter en knappkontroll.

3. Välj knappkontrollen och dra den till duken. Lägg till totalt tre knappkontroller.

4. Använd verktygslådan, klicka och dra en etikettkontroll till arbetsytan. Placera etiketten under knapparna.

5. Style knapparna och etiketterna med hjälp av egenskapsfönstret. Ändra egenskaperna till följande:

   Kontrollera	Egendomsnamn	Nytt värde
   knapp1	Storlek	580, 200
   FlatStyle	Platt
   Text	Användare
   knapp 2	Storlek	580, 100
   FlatStyle	Platt
   Text	konton
   knapp 3	Storlek	580, 100
   FlatStyle	Platt
   Text	Behörigheter
   etikett1	Text	Copyright 2022

Hur man skapar inställningsknappen och lista över teman

För att en enkel temameny ska fungera skapar du flera knappar som representerar varje tema. Applikationen kommer att innehålla tre teman, ett "Ljus"-tema, ett "Natur"-tema och ett "Mörkt"-tema.

1. Lägg till ytterligare en knappkontroll på arbetsytan för att representera knappen för inställningar (eller "Teman").

2. Ändra egenskaperna för den här knappen till följande:

   Egendomsnamn	Nytt värde
   namn	btnThemeSettings
   FlatStyle	Platt
   Storlek	200, 120
   Text	teman

3. Dra ytterligare tre knappar till duken. Dessa knappar kommer att representera de tre olika teman. Ändra egenskaperna för var och en av knapparna till följande:

   Kontrollera	Egendomsnamn	Nytt värde
   1:a knappen	namn	btnLightTheme
   Bakfärg	Vit rök
   Storlek	200, 80
   FlatStyle	Platt
   Text	Ljus
   Synlig	Falsk
   2:a knappen	namn	btnNatureTheme
   Bakfärg	Mörkhavsgrön
   Storlek	200, 80
   FlatStyle	Platt
   Text	Natur
   Synlig	Falsk
   3:e knappen	namn	btnMörkt tema
   Bakfärg	Dimgrå
   ForeColor	Vit
   Storlek	200, 80
   FlatStyle	Platt
   Text	Mörk
   Synlig	Falsk

4. Dubbelklicka på knappen Teman . Detta kommer att skapa en metod för att hantera händelsen "vid klick". Metoden körs när användaren klickar på den här knappen.

5. Som standard är teman "Ljus", "Natur" och "Mörk" inte synliga. Inuti funktionen, lägg till funktionaliteten för att växla synligheten för knapparna för att antingen visa eller dölja.

   private void btnThemeSettings_Click(object sender, EventArgs e){    btnNatureTheme.Visible = !btnNatureTheme.Visible;    btnLightTheme.Visible = !btnLightTheme.Visible;    btnDarkTheme.Visible = !btnDarkTheme.Visible;}

6. Kör programmet genom att klicka på den gröna uppspelningsknappen högst upp i Visual Studio-fönstret.

7. Under körning kommer programmet att dölja knapparna för vart och ett av de tre teman som standard.

8. Klicka på knappen Teman för att växla de teman som ska visas. Du kan fortsätta att trycka på knappen Teman för att växla deras synlighet.

Hur du hanterar dina teman

Skapa ordböcker för varje tema för att lagra de olika färgerna som det kommer att använda. Detta för att du ska lagra alla dina temafärger på ett ställe, ifall du behöver använda dem flera gånger. Det underlättar också om du vill uppdatera ett tema med nya färger i framtiden.

1. Överst i standardfilen Form1.cs C# och inuti klassen Form skapar du en global uppräkning. Denna uppräkning kommer att lagra de olika typerna av färger du kommer att använda i ett tema.

   enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  

2. Nedan förklarar du tre globala ordböcker, en för vart och ett av de tre teman. Du kan läsa mer om Ordböcker om du inte är bekant med hur man använder en ordbok i 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. Initiera ordböckerna inuti konstruktorn. Lägg till värden för de olika färgerna som varje tema kommer att använda.

   public Form1(){    InitializeComponent();        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 }    };}

Hur man ändrar temat

Skapa funktioner för att hantera programmets tema. Dessa funktioner kommer att ändra bakgrundsfärgen eller textfärgen för UI-elementen på duken.

1. Skapa en ny funktion som heter ChangeTheme(). Funktionen tar färgerna för ett tema som argument.

2. Inuti funktionen ändrar du bakgrundsfärgegenskaperna för UI-elementen. De nya bakgrundsfärgerna kommer att använda färger för det valda temat.

   private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}

3. Skapa en ny funktion som heter ChangeTextColor(). Du kan använda detta för att ändra färgen på texten mellan mörk och ljus. Detta för att säkerställa att text på mörk bakgrund fortfarande är läsbar.

   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. Från designern, dubbelklicka på knappen "Ljus"-knappen. Detta kommer att öppna koden bakom filen och generera en händelsehanterare för när användaren klickar på knappen.

5. Inuti händelsehanteraren använder du funktionerna ChangeTheme() och ChangeTextColor(). Mata in färgerna som temat använder. Du kan hämta dessa färger från temaordboken "Ljus".

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

6. Gå tillbaka till designern och klicka på knapparna "Natur" och "Mörk". Använd funktionerna ChangeTheme() och ChangeTextColor() i deras händelsehanterare också.

   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. Som standard ska temat vara inställt på "Ljus"-temat när användaren först öppnar appen. I konstruktorn, under ordböckerna, använd funktionerna ChangeTheme() och ChangeTextColor().

   ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);

8. Kör programmet genom att klicka på den gröna uppspelningsknappen högst upp i Visual Studio-fönstret.

9. Som standard använder applikationen "Ljus"-temat och tillämpar det grå färgschemat på UI-kontrollerna. Växla på temanknappen för att se listan med teman.

10. Klicka på temat Natur.

11. Klicka på det mörka temat.

Skapa applikationer med Windows Forms

Många applikationer låter användaren växla mellan flera teman. Du kan lägga till teman i ett Windows Forms-program genom att skapa alternativ som användaren kan välja.

När användaren klickar på ett tema kan du ändra bakgrundsfärg, text eller andra egenskaper för att matcha färgerna som används i det valda temat.

Färgerna för vart och ett av teman använder Visual Studios inbyggda färger. Du kommer att behöva använda ett korrekt färgschema för att ge användarna en bättre upplevelse. Du kan lära dig mer om de olika sätten du kan välja ett färgschema för din app.