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 muligheten 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.
- Lage en ny Windows Forms-applikasjon i Visual Studio.
- I det nye prosjektet bruker du verktøykassen til å søke etter en knappekontroll.
- Velg knappkontroll og dra den inn på lerretet. Legg til totalt tre knappekontroller.
- Bruk verktøykassen, klikk og dra en etikettkontroll på lerretet. Plasser etiketten under knappene.
- 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.
- Legg til en annen knappkontroll på lerretet for å representere innstillingene (eller "Temaer")-knappen.
- Endre egenskapene til denne knappen til følgende:
Eiendomsnavn Ny verdi Navn btnThemeSettings FlatStyle Flat Størrelse 200, 120 Tekst Temaer - 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 - Dobbeltklikk på Temaer knapp. Dette vil opprette en metode for å håndtere "ved klikk"-hendelsen. Metoden vil kjøre når brukeren klikker på denne knappen.
- 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.
privattomrombtnThemeSettings_Click(objektavsender, EventArgs e)
{
btnNatureTheme. Synlig = !btnNatureTheme. Synlig;
btnLightTheme. Synlig = !btnLightTheme. Synlig;
btnMørkt tema. Synlig = !btnMørkt tema. Synlig;
} - Kjør programmet ved å klikke på den grønne avspillingsknappen øverst i Visual Studio-vinduet.
- Under kjøretid vil applikasjonen skjule knappene for hvert av de tre temaene som standard.
- Klikk på Temaer 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.
- Øverst i standarden Form1.cs C#-filen og inne i Skjema klasse, lage en global oppregning. Denne enumen vil lagre de forskjellige fargetypene du vil bruke i et tema.
enum Temafarge
{
Hoved,
Sekundær,
tertiær,
Tekst
} - 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#.
Ordbok<Temafarge, farge> Lys = ny ordbok<Temafarge, farge>();
Ordbok<Temafarge, farge> Natur = ny ordbok<Temafarge, farge>();
Ordbok<Temafarge, farge> Mørk = ny ordbok<Temafarge, farge>(); - Initialiser ordbøkene inne i konstruktøren. Legg til verdier for de forskjellige fargene hvert tema skal bruke.
offentlig Form1()
{
InitializeComponent();
// Legg til ordbøker her
Lys = ny ordbok<Temafarge, farge>() {
{ Temafarge. Primær, Farge. WhiteSmoke },
{ Temafarge. Sekundær, farge. Sølv },
{ Temafarge. Tertiær, farge. Hvit },
{ Temafarge. Tekst, farge. Svart }
};
Natur = ny ordbok<Temafarge, farge>() {
{ Temafarge. Primær, Farge. DarkSeaGreen },
{ Temafarge. Sekundær, farge. AliceBlue },
{ Temafarge. Tertiær, farge. Honning dugg },
{ Temafarge. Tekst, farge. Svart }
};
Mørk = ny ordbok<Temafarge, farge>() {
{ Temafarge. Primær, Farge. DimGray },
{ Temafarge. Sekundær, farge. DimGray },
{ Temafarge. Tertiær, farge. Svart },
{ Temafarge. Tekst, farge. Hvit }
};
}
Hvordan endre temaet
Lag funksjoner for å administrere programmets tema. Disse funksjonene vil endre bakgrunnsfargen eller tekstfargen til UI-elementene på lerretet.
- Opprett en ny funksjon kalt Endre tema(). Funksjonen vil ta fargene for et tema som argumenter.
- Inne i funksjonen endrer du bakgrunnsfargeegenskapene til UI-elementene. De nye bakgrunnsfargene vil bruke farger for det valgte temaet.
privattomromEndre tema(Farge primærfarge, Farge sekundærfarge, Farge tertiærfarge)
{
// Endre bakgrunnsfargen på knappene
btnThemeSettings. Bakfarge = primærfarge;
button1.BackColor = primærfarge;
button2.BackColor = sekundærfarge;
button3.BackColor = sekundærfarge;
dette.BackColor = tertiærfarge;
} - Opprett 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.
privattomromEndre tekstfarge(FargetekstFarge)
{
// Endring farge avtekst
button1.ForeColor = textColor;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings. Forfarge = tekstfarge;
} - Fra designeren, dobbeltklikk på "Light"-knappkontrollen. Dette vil åpne kode-bak-filen og generere en hendelsesbehandler for når brukeren klikker på knappen.
- Inne i hendelsesbehandleren bruker du Endre tema() og ChangeTextColor() funksjoner. Skriv inn fargene som temaet bruker. Du kan hente disse fargene fra "Light"-temaordboken.
privattomrombtnLightTheme_Click(objektavsender, EventArgs e)
{
Endre tema(Lys[Temafarge. Hoved], Lys[Temafarge. Sekundær], Lys[Temafarge. Tertiær]);
Endre tekstfarge(Lys[Temafarge. Tekst]);
} - Gå tilbake til designeren og klikk på "Natur" og "Mørk"-knappene. Bruke Endre tema() og ChangeTextColor() funksjoner i hendelsesbehandlerne også.
privattomrombtnNatureTheme_Click(objektavsender, EventArgs e)
{
Endre tema(Natur[Temafarge. Hoved], Natur[Temafarge. Sekundær], Natur[Temafarge. Tertiær]);
Endre tekstfarge(Natur[Temafarge. Tekst]);
}
privattomrombtnDarkTheme_Click(objektavsender, EventArgs e)
{
Endre tema(Mørk[Temafarge. Hoved], Mørk[Temafarge. Sekundær], Mørk[Temafarge. Tertiær]);
Endre tekstfarge(Mørk[Temafarge. Tekst]);
} - Som standard skal temaet settes til "Light"-temaet når brukeren åpner appen for første gang. I konstruktøren, under ordbøkene, bruk Endre tema() og ChangeTextColor() funksjoner.
Endre tema(Lys[Temafarge. Hoved], Lys[Temafarge. Sekundær], Lys[Temafarge. Tertiær]);
Endre tekstfarge(Lys[Temafarge. Tekst]); - Kjør programmet ved å klikke på den grønne avspillingsknappen øverst i Visual Studio-vinduet.
- Som standard bruker applikasjonen "Light"-temaet og bruker det grå fargeskjemaet på UI-kontrollene. Veksle på temaknappen for å se listen over temaer.
- Klikk på temaet Natur.
- 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å.