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.
- Skapa en nya Windows Forms-applikationen i Visual Studio.
- I det nya projektet använder du verktygslådan för att söka efter en knappkontroll.
- Välj knappkontroll och dra den till duken. Lägg till totalt tre knappkontroller.
- Använd verktygslådan, klicka och dra en etikettkontroll på duken. Placera etiketten under knapparna.
- 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.
- Lägg till ytterligare en knappkontroll på arbetsytan för att representera knappen för inställningar (eller "Teman").
- Ändra egenskaperna för den här knappen till följande:
Egendomsnamn Nytt värde namn btnThemeSettings FlatStyle Platt Storlek 200, 120 Text teman - 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 - 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.
- 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.
privattomhetbtnThemeSettings_Click(objektavsändare, EventArgs e)
{
btnNatureTheme. Synlig = !btnNatureTheme. Synlig;
btnLightTheme. Synlig = !btnLightTheme. Synlig;
btnMörkt tema. Synlig = !btnDarkTheme. Synlig;
} - Kör programmet genom att klicka på den gröna uppspelningsknappen högst upp i Visual Studio-fönstret.
- Under körning kommer programmet att dölja knapparna för vart och ett av de tre teman som standard.
- 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.
- Ö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.
uppräkning Temafärg
{
Primär,
Sekundär,
Tertiär,
Text
} - 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#.
Lexikon<Temafärg, färg> Ljus = ny ordbok<Temafärg, färg>();
Lexikon<Temafärg, färg> Natur = ny ordbok<Temafärg, färg>();
Lexikon<Temafärg, färg> Mörk = ny ordbok<Temafärg, färg>(); - Initiera ordböckerna inuti konstruktorn. Lägg till värden för de olika färgerna som varje tema kommer att använda.
offentlig Form1()
{
InitializeComponent();
// Lägg till ordböcker här
Ljus = ny ordbok<Temafärg, färg>() {
{ Temafärg. Grundfärg. Vit rök },
{ Temafärg. Sekundär, färg. Silver },
{ Temafärg. Tertiär, färg. Vit },
{ Temafärg. Text färg. Svart }
};
Natur = ny ordbok<Temafärg, färg>() {
{ Temafärg. Grundfärg. DarkSeaGreen },
{ Temafärg. Sekundär, färg. AliceBlue },
{ Temafärg. Tertiär, färg. Honeydew },
{ Temafärg. Text färg. Svart }
};
Mörk = ny ordbok<Temafärg, färg>() {
{ Temafärg. Grundfärg. DimGray },
{ Temafärg. Sekundär, färg. DimGray },
{ Temafärg. Tertiär, färg. svart },
{ Temafärg. Text färg. Vit }
};
}
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.
- Skapa en ny funktion som heter Byta tema(). Funktionen tar färgerna för ett tema som argument.
- 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.
privattomhetByta tema(Färg primärFärg, Färg sekundärfärg, Färg tertiärfärg)
{
// Ändra bakgrundsfärg på knappar
btnThemeSettings. BackColor = primärfärg;
button1.BackColor = primärfärg;
button2.BackColor = sekundärfärg;
button3.BackColor = sekundärfärg;
detta.BackColor = tertiaryColor;
} - 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.
privattomhetChangeTextColor(FärgtextFärg)
{
// Förändra Färg avtext
button1.ForeColor = textColor;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings. ForeColor = textColor;
} - 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.
- 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 temaordboken "Ljus".
privattomhetbtnLightTheme_Click(objektavsändare, EventArgs e)
{
Byta tema(Ljus[Temafärg. Primär], Ljus[Temafärg. Sekundär], Ljus[Temafärg. Tertiär]);
ChangeTextColor(Ljus[Temafärg. Text]);
} - Gå tillbaka till designern och klicka på knapparna "Natur" och "Mörk". Använd Byta tema() och ChangeTextColor() funktioner i deras händelsehanterare också.
privattomhetbtnNatureTheme_Click(objektavsändare, EventArgs e)
{
Byta tema(Natur[Temafärg. Primär], Natur[Temafärg. Sekundär], Natur[Temafärg. Tertiär]);
ChangeTextColor(Natur[Temafärg. Text]);
}
privattomhetbtnDarkTheme_Click(objektavsändare, EventArgs e)
{
Byta tema(Mörk[Temafärg. Primär], Mörk[Temafärg. Sekundär], Mörk[Temafärg. Tertiär]);
ChangeTextColor(Mörk[Temafärg. Text]);
} - 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.
Byta tema(Ljus[Temafärg. Primär], Ljus[Temafärg. Sekundär], Ljus[Temafärg. Tertiär]);
ChangeTextColor(Ljus[Temafärg. Text]); - Kör programmet genom att klicka på den gröna uppspelningsknappen högst upp i Visual Studio-fönstret.
- 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.
- Klicka på temat Natur.
- 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.
