Temaer er en fantastisk måde at lade dine brugere tilpasse din applikation uden at skulle involvere sig for meget i specifikke detaljer.
Det er almindeligt, at moderne applikationer har mulighed for at skifte mellem forskellige temaer. For eksempel giver nogle programmer dig mulighed for at skifte mellem et lyst tema eller et mørkt tema, mens andre kan have flere temavalg.
Windows Forms er en UI-ramme, der giver dig mulighed for at oprette desktop-applikationer. Du kan implementere temaer i en Windows-formularapp ved at oprette valgbare knapper for hvert tema.
Når brugeren vælger et tema, kan du ændre baggrundsfarven eller tekstfarveegenskaberne for hvert element for at matche det valgte tema.
Sådan opsætter du Windows Form Project
Først skal du oprette en ny Windows-formularapp. Udfyld det nye projekt med nogle grundlæggende kontroller, såsom knapper og etiketter.
- Lave en ny Windows Forms-applikation i Visual Studio.
- I det nye projekt skal du bruge værktøjskassen til at søge efter en knapkontrol.
- Vælg knap kontrol og træk det over på lærredet. Tilføj i alt tre knapper.
- Brug værktøjskassen til at klikke og trække en etiket kontrol på lærredet. Placer etiketten under knapperne.
- Stil knapperne og etiketterne ved hjælp af egenskabsvinduet. Skift egenskaberne til følgende:
Styring Ejendomsnavn Ny værdi knap 1 Størrelse 580, 200 FlatStyle Flad Tekst Brugere knap 2 Størrelse 580, 100 FlatStyle Flad Tekst Regnskaber knap 3 Størrelse 580, 100 FlatStyle Flad Tekst Tilladelser etiket 1 Tekst Copyright 2022
Sådan opretter du indstillingsknappen og listen over temaer
For at en simpel temamenu skal fungere, skal du oprette flere knapper til at repræsentere hvert tema. Ansøgningen vil omfatte tre temaer, et "Lys"-tema, et "Natur"-tema og et "Mørkt"-tema.
- Tilføj endnu en knapkontrol til lærredet for at repræsentere indstillingsknappen (eller "Temaer").
- Skift egenskaberne for denne knap til følgende:
Ejendomsnavn Ny værdi Navn btnThemeSettings FlatStyle Flad Størrelse 200, 120 Tekst Temaer - Træk yderligere tre knapper ind på lærredet. Disse knapper repræsenterer de tre forskellige temaer. Skift egenskaberne for hver af knapperne til følgende:
Styring Ejendomsnavn Ny værdi 1. knap Navn btnLightTheme Bagsidefarve WhiteSmoke Størrelse 200, 80 FlatStyle Flad Tekst Lys Synlig Falsk 2. knap Navn btnNatureTheme Bagsidefarve Mørk Havgrøn Størrelse 200, 80 FlatStyle Flad Tekst Natur Synlig Falsk 3. knap Navn btnMørkt tema Bagsidefarve DimGray Forfarve hvid Størrelse 200, 80 FlatStyle Flad Tekst Mørk Synlig Falsk - Dobbeltklik på Temaer knap. Dette vil skabe en metode til at håndtere "ved klik"-hændelsen. Metoden kører, når brugeren klikker på denne knap.
- Som standard vil temaerne "Lys", "Natur" og "Mørk" ikke være synlige. Tilføj funktionaliteten inde i funktionen for at skifte synligheden af knapperne til enten at vise eller skjule.
privatugyldigbtnThemeSettings_Click(objektafsender, EventArgs e)
{
btnNatureTheme. Synlig = !btnNatureTheme. Synlig;
btnLightTheme. Synlig = !btnLightTheme. Synlig;
btnMørkt tema. Synlig = !btnMørkt Tema. Synlig;
} - Kør programmet ved at klikke på den grønne afspilningsknap øverst i Visual Studio-vinduet.
- Under kørsel vil applikationen som standard skjule knapperne for hvert af de tre temaer.
- Klik på Temaer knappen for at skifte mellem de temaer, der skal vises. Du kan fortsætte med at trykke på Temaer knappen for at skifte deres synlighed.
Sådan administrerer du dine temaer
Opret ordbøger for hvert tema for at gemme de forskellige farver, det vil bruge. Dette er for at du gemmer alle dine temafarver ét sted, hvis du skal bruge dem flere gange. Det gør det også nemmere, hvis du ønsker at opdatere et tema med nye farver i fremtiden.
- Øverst i standarden Form1.cs C#-filen og inde i Form klasse, skabe en global opregning. Denne enum vil gemme de forskellige typer farver, du vil bruge i et tema.
enum Temafarve
{
Primær,
Sekundær,
Tertiære,
Tekst
} - Nedenunder erklærer du tre globale ordbøger, en for hvert af de tre temaer. Du kan læse mere om Ordbøger, hvis du ikke er bekendt med, hvordan du bruger en ordbog i C#.
Ordbog<Temafarve, farve> Lys = ny Ordbog<Temafarve, farve>();
Ordbog<Temafarve, farve> Natur = ny Ordbog<Temafarve, farve>();
Ordbog<Temafarve, farve> Mørk = ny ordbog<Temafarve, farve>(); - Initial ordbøgerne inde i konstruktøren. Tilføj værdier for de forskellige farver, som hvert tema vil bruge.
offentlig Form1()
{
InitializeComponent();
// Tilføj ordbøger her
Lys = ny Ordbog<Temafarve, farve>() {
{ Temafarve. Primær, Farve. WhiteSmoke },
{ Temafarve. Sekundær, farve. Sølv },
{ Temafarve. Tertiær, Farve. Hvid },
{ Temafarve. Tekst, farve. Sort }
};
Natur = ny Ordbog<Temafarve, farve>() {
{ Temafarve. Primær, Farve. DarkSeaGreen },
{ Temafarve. Sekundær, farve. AliceBlue },
{ Temafarve. Tertiær, Farve. Honningdug },
{ Temafarve. Tekst, farve. Sort }
};
Mørk = ny ordbog<Temafarve, farve>() {
{ Temafarve. Primær, Farve. DimGray },
{ Temafarve. Sekundær, farve. DimGray },
{ Temafarve. Tertiær, Farve. Sort },
{ Temafarve. Tekst, farve. Hvid }
};
}
Sådan ændres temaet
Opret funktioner til at administrere applikationens tema. Disse funktioner ændrer baggrundsfarven eller tekstfarven på UI-elementerne på lærredet.
- Opret en ny funktion kaldet ChangeTheme(). Funktionen vil tage farverne til et tema som argumenter.
- Inde i funktionen skal du ændre baggrundsfarveegenskaberne for UI-elementerne. De nye baggrundsfarver vil bruge farver til det valgte tema.
privatugyldigSkift tema(Farve primærfarve, farve sekundær farve, farve tertiær farve)
{
// Skift baggrundsfarve på knapper
btnThemeSettings. BackColor = primærfarve;
knap1.Bagfarve = primærfarve;
knap2.Bagfarve = sekundærfarve;
knap3.Bagfarve = sekundærfarve;
dette.BackColor = tertiærfarve;
} - Opret en ny funktion kaldet ChangeTextColor(). Du kan bruge dette til at ændre farven på teksten mellem mørk og lys. Dette er for at sikre, at tekst på en mørk baggrund stadig vil være læsbar.
privatugyldigSkift tekstfarve(FarvetekstFarve)
{
// Lave om farve aftekst
knap1.Forfarve = tekstfarve;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
label1.ForeColor = textColor;
btnThemeSettings. Forfarve = tekstfarve;
} - Fra designeren skal du dobbeltklikke på knappen "Lys" knappen. Dette vil åbne kode-behind-filen og generere en hændelseshandler til, når brugeren klikker på knappen.
- Inde i hændelseshandleren skal du bruge ChangeTheme() og ChangeTextColor() funktioner. Indtast de farver, som temaet bruger. Du kan hente disse farver fra "Lys"-temaordbogen.
privatugyldigbtnLightTheme_Click(objektafsender, EventArgs e)
{
Skift tema(Lys[Temafarve. Primær], Lys[Temafarve. Sekundær], Lys[Temafarve. Tertiære]);
Skift tekstfarve(Lys[Temafarve. Tekst]);
} - Gå tilbage til designeren og klik på knapperne "Natur" og "Mørk". Brug ChangeTheme() og ChangeTextColor() fungerer også i deres hændelseshandlere.
privatugyldigbtnNatureTheme_Click(objektafsender, EventArgs e)
{
Skift tema(Natur[Temafarve. Primær], Natur[Temafarve. Sekundær], Natur[Temafarve. Tertiære]);
Skift tekstfarve(Natur[Temafarve. Tekst]);
}
privatugyldigbtnDarkTheme_Click(objektafsender, EventArgs e)
{
Skift tema(Mørk[Temafarve. Primær], Mørk[Temafarve. Sekundær], Mørk[Temafarve. Tertiære]);
Skift tekstfarve(Mørk[Temafarve. Tekst]);
} - Som standard skal temaet indstilles til "Lys"-temaet, når brugeren første gang åbner appen. I konstruktøren, under ordbøgerne, skal du bruge ChangeTheme() og ChangeTextColor() funktioner.
Skift tema(Lys[Temafarve. Primær], Lys[Temafarve. Sekundær], Lys[Temafarve. Tertiære]);
Skift tekstfarve(Lys[Temafarve. Tekst]); - Kør programmet ved at klikke på den grønne afspilningsknap øverst i Visual Studio-vinduet.
- Som standard bruger applikationen "Lys"-temaet og anvender det grå farveskema til UI-kontrollerne. Skift temaknappen for at se listen over temaer.
- Klik på temaet Natur.
- Klik på det mørke tema.
Oprettelse af applikationer ved hjælp af Windows Forms
Mange applikationer giver brugeren mulighed for at skifte mellem flere temaer. Du kan føje temaer til et Windows Forms-program ved at oprette indstillinger, som brugeren kan vælge.
Når brugeren klikker på et tema, kan du ændre baggrundsfarven, teksten eller andre egenskaber for at matche farverne, der bruges i det valgte tema.
Farverne til hvert af temaerne bruger Visual Studios indbyggede farver. Du skal bruge et ordentligt farveskema for at give brugerne en bedre oplevelse. Du kan lære mere om de forskellige måder, du kan vælge et farveskema til din app på.