Thema's zijn een geweldige manier om uw gebruikers uw toepassing te laten aanpassen zonder zich te veel met specifieke details bezig te hoeven houden.
Het is gebruikelijk dat moderne applicaties een optie hebben om tussen verschillende thema's te schakelen. Met sommige applicaties kun je bijvoorbeeld wisselen tussen een licht thema of een donker thema, terwijl andere meer themakeuzes hebben.
Windows Forms is een UI-framework waarmee u desktoptoepassingen kunt maken. U kunt thema's in een Windows-formulierapp implementeren door voor elk thema selecteerbare knoppen te maken.
Wanneer de gebruiker een thema selecteert, kunt u de eigenschappen van de achtergrondkleur of tekstkleur van elk element aanpassen aan het geselecteerde thema.
Hoe het Windows Form-project in te stellen
Maak eerst een nieuwe Windows-formulier-app. Vul het nieuwe project met enkele basisbesturingselementen, zoals knoppen en labels.
- Maak een nieuwe Windows Forms-toepassing in Visuele Studio.
- Gebruik in het nieuwe project de toolbox om te zoeken naar een knopbesturingselement.
- Selecteer de knopbediening en sleep het naar het canvas. Voeg in totaal drie knoppen toe.
- Gebruik de toolbox, klik en sleep a label controle op het doek. Plaats het label onder de knopen.
- Stijl de knoppen en labels met behulp van het eigenschappenvenster. Wijzig de eigenschappen in het volgende:
Controle Eigendomsnaam Nieuwe waarde knop1 Maat 580, 200 Platte Stijl Vlak Tekst Gebruikers knop2 Maat 580, 100 Platte Stijl Vlak Tekst rekeningen knop3 Maat 580, 100 Platte Stijl Vlak Tekst Rechten label1 Tekst Auteursrecht 2022
De instellingenknop en de lijst met thema's maken
Om een eenvoudig themamenu te laten werken, maakt u meerdere knoppen om elk thema weer te geven. De applicatie zal drie thema's bevatten, een "Licht" thema, een "Natuur" thema en een "Donker" thema.
- Voeg nog een knopbesturingselement toe aan het canvas om de instellingen (of 'Thema's')-knop weer te geven.
- Wijzig de eigenschappen van deze knop in het volgende:
Eigendomsnaam Nieuwe waarde Naam btnThemaInstellingen Platte Stijl Vlak Maat 200, 120 Tekst Thema's - Sleep nog drie knoppen naar het canvas. Deze knoppen vertegenwoordigen de drie verschillende thema's. Wijzig de eigenschappen voor elk van de knoppen in het volgende:
Controle Eigendomsnaam Nieuwe waarde 1e knop Naam btnLichtThema TerugKleur Witte rook Maat 200, 80 Platte Stijl Vlak Tekst Licht Zichtbaar niet waar 2e knop Naam btnNatuurThema TerugKleur DonkerZeeGroen Maat 200, 80 Platte Stijl Vlak Tekst Natuur Zichtbaar niet waar 3e knop Naam btnDarkThema TerugKleur DimGray Voorgrond-kleur Wit Maat 200, 80 Platte Stijl Vlak Tekst Donker Zichtbaar niet waar - Dubbelklik op de Thema's knop. Dit zal een methode creëren om de "on click" -gebeurtenis af te handelen. De methode wordt uitgevoerd wanneer de gebruiker op deze knop klikt.
- Standaard zijn de thema's "Licht", "Natuur" en "Donker" niet zichtbaar. Voeg binnen de functie de functionaliteit toe om de zichtbaarheid van de knoppen te wijzigen in tonen of verbergen.
privaatleegtebtnThemeSettings_Click(object afzender, EventArgs e)
{
btnNatuurThema. Zichtbaar = !btnNatureTheme. Zichtbaar;
btnLichtThema. Zichtbaar = !btnLightTheme. Zichtbaar;
btnDarkThema. Zichtbaar = !btnDarkTheme. Zichtbaar;
} - Start de applicatie door op de groene afspeelknop boven aan het Visual Studio-venster te klikken.
- Tijdens runtime verbergt de applicatie standaard de knoppen voor elk van de drie thema's.
- Klik op de Thema's knop om te schakelen tussen de thema's die moeten worden weergegeven. U kunt blijven drukken op de Thema's knop om hun zichtbaarheid te wijzigen.
Hoe u uw thema's beheert
Maak woordenboeken voor elk thema om de verschillende kleuren op te slaan die het zal gebruiken. Dit is zodat je al je themakleuren op één plek opslaat, voor het geval je ze meerdere keren moet gebruiken. Het maakt het ook gemakkelijker als u in de toekomst een thema met nieuwe kleuren wilt bijwerken.
- Bovenaan de standaard Form1.cs C#-bestand en in de Het formulier class, maak een globale opsomming. In deze opsomming worden de verschillende soorten kleuren opgeslagen die u in een thema zult gebruiken.
opsomming ThemaKleur
{
primair,
Ondergeschikt,
Tertiair,
Tekst
} - Verklaar hieronder drie globale woordenboeken, één voor elk van de drie thema's. U kunt meer lezen over Woordenboeken als u niet bekend bent met het gebruik van a woordenboek in C#.
Woordenboek<ThemaKleur, Kleur> Licht = nieuw woordenboek<ThemaKleur, Kleur>();
Woordenboek<ThemaKleur, Kleur> Natuur = nieuw woordenboek<ThemaKleur, Kleur>();
Woordenboek<ThemaKleur, Kleur> Donker = nieuw woordenboek<ThemaKleur, Kleur>(); - Initialiseer de woordenboeken in de constructor. Voeg waarden toe voor de verschillende kleuren die elk thema zal gebruiken.
openbaar Formulier 1()
{
InitialiseerComponent();
// Voeg hier woordenboeken toe
Licht = nieuw woordenboek<ThemaKleur, Kleur>() {
{ ThemaKleur. Primaire kleur. Witte rook },
{ ThemaKleur. Secundair, kleur. Zilver },
{ ThemaKleur. Tertiair, kleur. Wit },
{ ThemaKleur. Tekst kleur. Zwart }
};
Natuur = nieuw woordenboek<ThemaKleur, Kleur>() {
{ ThemaKleur. Primaire kleur. DonkerZeeGroen },
{ ThemaKleur. Secundair, kleur. AliceBlauw },
{ ThemaKleur. Tertiair, kleur. honingdauw },
{ ThemaKleur. Tekst kleur. Zwart }
};
Donker = nieuw woordenboek<ThemaKleur, Kleur>() {
{ ThemaKleur. Primaire kleur. DimGray },
{ ThemaKleur. Secundair, kleur. DimGray },
{ ThemaKleur. Tertiair, kleur. Zwart },
{ ThemaKleur. Tekst kleur. Wit }
};
}
Hoe het thema te veranderen
Maak functies om het thema van de applicatie te beheren. Deze functies veranderen de achtergrondkleur of tekstkleur van de UI-elementen op het canvas.
- Maak een nieuwe functie met de naam Thema veranderen(). De functie neemt de kleuren voor een thema als argumenten.
- Wijzig in de functie de eigenschappen van de achtergrondkleur van de UI-elementen. De nieuwe achtergrondkleuren gebruiken kleuren voor het geselecteerde thema.
privaatleegteThema veranderen(Kleur primaire kleur, kleur secundaire kleur, kleur tertiaire kleur)
{
// Achtergrondkleur van knoppen wijzigen
btnThemaInstellingen. BackColor = primaire kleur;
button1.BackColor = primaireKleur;
button2.BackColor = secundaireKleur;
button3.BackColor = secundaireKleur;
deze.BackColor = tertiaireKleur;
} - Maak een nieuwe functie met de naam WijzigTextColor(). U kunt dit gebruiken om de kleur van de tekst te veranderen tussen donker en licht. Dit is om ervoor te zorgen dat tekst op een donkere achtergrond toch leesbaar blijft.
privaatleegteWijzig TekstKleur(Kleur tekstKleur)
{
// Wijziging kleur vantekst
button1.ForeColor = tekstColor;
button2.ForeColor = tekstKleur;
button3.ForeColor = tekstKleur;
label1.ForeColor = tekstColor;
btnThemaInstellingen. Voorkleur = tekstkleur;
} - Dubbelklik vanuit de ontwerper op de knop "Licht". Dit opent het code-behind-bestand en genereert een gebeurtenishandler voor wanneer de gebruiker op de knop klikt.
- Gebruik in de gebeurtenishandler de Thema veranderen() en WijzigTextColor() functies. Voer de kleuren in die het thema gebruikt. U kunt deze kleuren ophalen uit het themawoordenboek "Licht".
privaatleegtebtnLightTheme_Click(object afzender, EventArgs e)
{
Thema veranderen(Licht[ThemaKleur. primair], Licht[ThemaKleur. Ondergeschikt], Licht[ThemaKleur. Tertiair]);
Wijzig TekstKleur(Licht[ThemaKleur. Tekst]);
} - Ga terug naar de ontwerper en klik op de knoppen "Natuur" en "Donker". Gebruik de Thema veranderen() en WijzigTextColor() functies ook in hun event handlers.
privaatleegtebtnNatureTheme_Click(object afzender, EventArgs e)
{
Thema veranderen(Natuur[ThemaKleur. primair], Natuur[ThemaKleur. Ondergeschikt], Natuur[ThemaKleur. Tertiair]);
Wijzig TekstKleur(Natuur[ThemaKleur. Tekst]);
}
privaatleegtebtnDarkTheme_Click(object afzender, EventArgs e)
{
Thema veranderen(Donker[ThemaKleur. primair], Donker[ThemaKleur. Ondergeschikt], Donker[ThemaKleur. Tertiair]);
Wijzig TekstKleur(Donker[ThemaKleur. Tekst]);
} - Standaard moet het thema worden ingesteld op het thema "Licht" wanneer de gebruiker de app voor het eerst opent. Gebruik in de constructor, onder de woordenboeken, de Thema veranderen() en WijzigTextColor() functies.
Thema veranderen(Licht[ThemaKleur. primair], Licht[ThemaKleur. Ondergeschikt], Licht[ThemaKleur. Tertiair]);
Wijzig TekstKleur(Licht[ThemaKleur. Tekst]); - Start de applicatie door op de groene afspeelknop boven aan het Visual Studio-venster te klikken.
- Standaard gebruikt de applicatie het thema "Licht" en past het grijze kleurenschema toe op de UI-bedieningselementen. Schakel de themaknop in om de lijst met thema's te bekijken.
- Klik op het thema Natuur.
- Klik op het donkere thema.
Toepassingen maken met Windows Forms
Veel applicaties stellen de gebruiker in staat om te schakelen tussen meerdere thema's. U kunt thema's toevoegen aan een Windows Forms-toepassing door opties te maken die de gebruiker kan selecteren.
Wanneer de gebruiker op een thema klikt, kunt u de achtergrondkleur, tekst of andere eigenschappen aanpassen aan de kleuren die in het geselecteerde thema worden gebruikt.
De kleuren voor elk van de thema's gebruiken de ingebouwde kleuren van Visual Studio. U moet een juist kleurenschema gebruiken om de gebruikers een betere ervaring te bieden. U kunt meer leren over de verschillende manieren waarop u een kleurenschema voor uw app kunt kiezen.
