WinForms: meerdere thema's aan uw toepassing toevoegen

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.

MAKEUSEVAN VIDEO VAN DE DAG

Wanneer de gebruiker een thema selecteert, kunt u de eigenschappen van de achtergrondkleur of tekstkleur van elk element aanpassen aan het geselecteerde thema.

waar is de zaklamp op deze telefoon

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:

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.

hoe muziek te vervagen in garageband

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:

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:

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 in de functie de functionaliteit toe om de zichtbaarheid van de knoppen te wijzigen in tonen of verbergen.

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

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.
```
enum ThemeColor 
{ 
    Primary, 
    Secondary, 
    Tertiary, 
    Text 
}  
```

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# .

Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>(); 
Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>(); 
Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>();

Initialiseer de woordenboeken in de constructor. Voeg waarden toe voor de verschillende kleuren die elk thema zal gebruiken.

public Form1() 
{ 
    InitializeComponent(); 
    // Add dictionaries here 
    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 } 
    }; 
}

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.

private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor) 
{ 
    // Change background color of buttons 
    btnThemeSettings.BackColor = primaryColor; 
    button1.BackColor = primaryColor; 
    button2.BackColor = secondaryColor; 
    button3.BackColor = secondaryColor; 
    this.BackColor = tertiaryColor; 
}

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 nog steeds leesbaar is.

private void ChangeTextColor(Color textColor) 
{ 
    // Change color of text 
    button1.ForeColor = textColor; 
    button2.ForeColor = textColor; 
    button3.ForeColor = textColor; 
    label1.ForeColor = textColor; 
    btnThemeSettings.ForeColor = textColor; 
}

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 uit het themawoordenboek 'Licht' halen.

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

Ga terug naar de ontwerper en klik op de knoppen 'Natuur' en 'Donker'. Gebruik de Thema veranderen() en WijzigTextColor() functioneert ook in hun gebeurtenishandlers.

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

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.
```
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
ChangeTextColor(Light[ThemeColor.Text]);
```
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.

kun je zien wie naar jou zoekt op google

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.

Naam	btnThemaInstellingen
Platte Stijl	Vlak
Maat	200, 120
Tekst	Thema's