WinForms: Slik legger du til flere temaer i applikasjonen din

Temaer er en flott måte å la brukerne tilpasse applikasjonen din uten å måtte engasjere seg for spesifikke detaljer.

Det er vanlig at moderne applikasjoner har en mulighet til å bytte mellom ulike temaer. For eksempel lar noen applikasjoner deg bytte mellom et lyst tema eller et mørkt tema, mens andre kan ha flere temavalg.

Windows Forms er et UI-rammeverk som lar deg lage skrivebordsapplikasjoner. Du kan implementere temaer i en Windows-skjemaapp ved å lage valgbare knapper for hvert tema.

Når brukeren velger et tema, kan du endre bakgrunnsfargen eller tekstfargeegenskapene til hvert element for å matche det valgte temaet.

Hvordan sette opp Windows Form Project

Først oppretter du en ny Windows-skjemaapp. Fyll det nye prosjektet med noen grunnleggende kontroller, for eksempel knapper og etiketter.

1. Opprett en ny Windows Forms-applikasjon i Visual Studio.

2. I det nye prosjektet bruker du verktøykassen til å søke etter en knappekontroll.

3. Velg knappekontrollen og dra den inn på lerretet. Legg til totalt tre knappekontroller.

4. Bruk verktøykassen til å klikke og dra en etikettkontroll til lerretet. Plasser etiketten under knappene.

5. Stil knappene og etikettene ved hjelp av egenskapsvinduet. Endre egenskapene til følgende:

   Styre	Eiendomsnavn	Ny verdi
   knapp 1	Størrelse	580, 200
   FlatStyle	Flat
   Tekst	Brukere
   knapp 2	Størrelse	580, 100
   FlatStyle	Flat
   Tekst	Kontoer
   knapp 3	Størrelse	580, 100
   FlatStyle	Flat
   Tekst	Tillatelser
   etikett1	Tekst	Copyright 2022

Hvordan lage innstillingsknappen og liste over temaer

For at en enkel temameny skal fungere, lag flere knapper for å representere hvert tema. Applikasjonen vil inneholde tre temaer, et "Lys"-tema, et "Natur"-tema og et "Mørkt"-tema.

1. Legg til en annen knappkontroll på lerretet for å representere innstillingene (eller "Temaer")-knappen.

2. Endre egenskapene til denne knappen til følgende:

   Eiendomsnavn	Ny verdi
   Navn	btnThemeSettings
   FlatStyle	Flat
   Størrelse	200, 120
   Tekst	Temaer

3. Dra tre knapper til på lerretet. Disse knappene vil representere de tre forskjellige temaene. Endre egenskapene for hver av knappene til følgende:

   Styre	Eiendomsnavn	Ny verdi
   1 knapp	Navn	btnLightTheme
   Baksidefarge	WhiteSmoke
   Størrelse	200, 80
   FlatStyle	Flat
   Tekst	Lys
   Synlig	Falsk
   2 knapp	Navn	btnNatureTheme
   Baksidefarge	DarkSeaGreen
   Størrelse	200, 80
   FlatStyle	Flat
   Tekst	Natur
   Synlig	Falsk
   3 knapp	Navn	btnMørkt tema
   Baksidefarge	DimGray
   Forfarge	Hvit
   Størrelse	200, 80
   FlatStyle	Flat
   Tekst	Mørk
   Synlig	Falsk

4. Dobbeltklikk på Temaer – knappen. Dette vil opprette en metode for å håndtere "ved klikk"-hendelsen. Metoden vil kjøre når brukeren klikker på denne knappen.

5. Som standard vil ikke temaene "Lys", "Natur" og "Mørk" være synlige. Inne i funksjonen legger du til funksjonaliteten for å bytte synligheten til knappene for å enten vise eller skjule.

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

6. Kjør programmet ved å klikke på den grønne avspillingsknappen øverst i Visual Studio-vinduet.

7. Under kjøretid vil applikasjonen skjule knappene for hvert av de tre temaene som standard.

8. Klikk på Temaer – knappen for å veksle mellom temaene som skal vises. Du kan fortsette å trykke på Temaer – knappen for å bytte synlighet.

Hvordan administrere temaene dine

Lag ordbøker for hvert tema for å lagre de forskjellige fargene det skal bruke. Dette er slik at du lagrer alle temafargene dine på ett sted, i tilfelle du må bruke dem flere ganger. Det gjør det også enklere hvis du ønsker å oppdatere et tema med nye farger i fremtiden.

1. Øverst i standard Form1.cs C#-fil og inne i Form -klassen oppretter du en global oppsummering. Denne enumen vil lagre de forskjellige fargetypene du vil bruke i et tema.

   enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  

2. Under erklærer du tre globale ordbøker, en for hvert av de tre temaene. Du kan lese mer om Ordbøker hvis du ikke er kjent med hvordan du bruker 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. Initialiser ordbøkene inne i konstruktøren. Legg til verdier for de forskjellige fargene hvert tema skal bruke.

   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 }    };}

Hvordan endre temaet

Lag funksjoner for å administrere programmets tema. Disse funksjonene vil endre bakgrunnsfargen eller tekstfargen til UI-elementene på lerretet.

1. Lag en ny funksjon kalt ChangeTheme(). Funksjonen vil ta fargene for et tema som argumenter.

2. Inne i funksjonen endrer du bakgrunnsfargeegenskapene til UI-elementene. De nye bakgrunnsfargene vil bruke farger for det valgte temaet.

   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. Lag en ny funksjon kalt ChangeTextColor(). Du kan bruke denne til å endre fargen på teksten mellom mørk og lys. Dette er for å sikre at tekst på mørk bakgrunn fortsatt skal være lesbar.

   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. Fra designeren, dobbeltklikk på "Light"-knappkontrollen. Dette vil åpne kode-bak-filen og generere en hendelsesbehandler for når brukeren klikker på knappen.

5. Inne i hendelsesbehandleren bruker du funksjonene ChangeTheme() og ChangeTextColor(). Skriv inn fargene som temaet bruker. Du kan hente disse fargene fra "Light"-temaordboken.

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

6. Gå tilbake til designeren og klikk på "Natur" og "Mørk"-knappene. Bruk funksjonene ChangeTheme() og ChangeTextColor() i hendelsesbehandlerne deres.

   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 skal temaet settes til "Light"-temaet når brukeren åpner appen for første gang. I konstruktøren, under ordbøkene, bruk funksjonene ChangeTheme() og ChangeTextColor().

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

8. Kjør programmet ved å klikke på den grønne avspillingsknappen øverst i Visual Studio-vinduet.

9. Som standard bruker applikasjonen "Light"-temaet og bruker det grå fargeskjemaet på UI-kontrollene. Veksle på temaknappen for å se listen over temaer.

10. Klikk på temaet Natur.

11. Klikk på det mørke temaet.

Opprette applikasjoner ved hjelp av Windows Forms

Mange applikasjoner lar brukeren bytte mellom flere temaer. Du kan legge til temaer i en Windows Forms-applikasjon ved å lage alternativer som brukeren kan velge.

Når brukeren klikker på et tema, kan du endre bakgrunnsfargen, teksten eller andre egenskaper for å matche fargene som brukes i det valgte temaet.

Fargene for hvert av temaene bruker Visual Studios innebygde farger. Du må bruke et riktig fargevalg for å gi brukerne en bedre opplevelse. Du kan lære mer om de forskjellige måtene du kan velge et fargeskjema for appen din på.