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

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

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.





MAKEUSE AV DAGENS VIDEO

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 en nya Windows Forms-applikationen i Visual Studio.
  2. I det nya projektet använder du verktygslådan för att söka efter en knappkontroll.   Egenskapsfönster för knapp i Winforms app
  3. Välj knappkontroll och dra den till duken. Lägg till totalt tre knappkontroller.   Egenskapsfönster för knapp i Winforms app
  4. Använd verktygslådan, klicka och dra en etikettkontroll på duken. Placera etiketten under knapparna.   Egenskapsfönster för knapp i Winforms app
  5. Style knapparna och etiketterna med hjälp av egenskapsfönstret. Ändra egenskaperna till följande:
    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:
    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:
    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å teman knapp. Detta kommer att skapa en metod för att hantera 'vid klick'-händelsen. 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å teman knappen för att växla de teman som ska visas. Du kan fortsätta att trycka på teman knappen 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 standarden Form1.cs C#-filen och inuti Form klass, skapa 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();
    // 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 }
    };
    }

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.





bärbar dator vaknar inte från sömn windows 10
  1. Skapa en ny funktion som heter Byta tema() . 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) 
    {
    // Change background color of buttons
    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 Byta tema() och ChangeTextColor() funktioner. Mata in färgerna som temat använder. Du kan hämta dessa färger från 'Ljus' temaordbok.
    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 Byta tema() och ChangeTextColor() fungerar också i deras händelsehanterare.
    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 Byta tema() och ChangeTextColor() funktioner.
    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.