WinForms: Sådan tilføjer du flere temaer til din applikation

WinForms: Sådan tilføjer du flere temaer til din applikation

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.





MAKEUSE AF DAGENS VIDEO

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.

  1. Lave en ny Windows Forms-applikation i Visual Studio.
  2. I det nye projekt skal du bruge værktøjskassen til at søge efter en knapkontrol.   Ejendomsvindue til knap i Winforms app
  3. Vælg knap kontrol og træk det over på lærredet. Tilføj i alt tre knapper.   Ejendomsvindue til knap i Winforms app
  4. Brug værktøjskassen til at klikke og trække en etiket kontrol på lærredet. Placer etiketten under knapperne.   Ejendomsvindue til knap i Winforms app
  5. Stil knapperne og etiketterne ved hjælp af egenskabsvinduet. Skift egenskaberne til følgende:
    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.



  1. Tilføj endnu en knapkontrol til lærredet for at repræsentere indstillingsknappen (eller 'Temaer').
  2. Skift egenskaberne for denne knap til følgende:
    Navn btnThemeSettings
    FlatStyle Flad
    Størrelse 200, 120
    Tekst Temaer
  3. 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:
    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
  4. 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.
  5. 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.
    private void btnThemeSettings_Click(object sender, EventArgs e) 
    {
    btnNatureTheme.Visible = !btnNatureTheme.Visible;
    btnLightTheme.Visible = !btnLightTheme.Visible;
    btnDarkTheme.Visible = !btnDarkTheme.Visible;
    }
  6. Kør programmet ved at klikke på den grønne afspilningsknap øverst i Visual Studio-vinduet.
  7. Under kørsel vil applikationen som standard skjule knapperne for hvert af de tre temaer.
  8. 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.

hvordan opretter jeg en e -mail -adresse til mig selv
  1. Øverst i standarden Form1.cs C#-filen og inde i Form klasse, skabe en global opregning. Denne oversigt gemmer de forskellige typer farver, du vil bruge i et tema.
    enum ThemeColor 
    {
    Primary,
    Secondary,
    Tertiary,
    Text
    }
  2. 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# .
    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. Initial ordbøgerne inde i konstruktøren. Tilføj værdier for de forskellige farver, hvert tema vil bruge.
    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 }
    };
    }

Sådan ændres temaet

Opret funktioner til at administrere applikationens tema. Disse funktioner ændrer baggrundsfarven eller tekstfarven på UI-elementerne på lærredet.





  1. Opret en ny funktion kaldet ChangeTheme() . Funktionen vil tage farverne til et tema som argumenter.
  2. Inde i funktionen skal du ændre baggrundsfarveegenskaberne for UI-elementerne. De nye baggrundsfarver vil bruge farver til det valgte tema.
    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;
    }
  3. 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.
    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 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.
  5. 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.
    private void btnLightTheme_Click(object sender, EventArgs e) 
    {
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);
    ChangeTextColor(Light[ThemeColor.Text]);
    }
  6. Gå tilbage til designeren og klik på knapperne 'Natur' og 'Mørk'. Brug ChangeTheme() og ChangeTextColor() fungerer også i deres hændelseshandlere.
    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 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.
    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
    ChangeTextColor(Light[ThemeColor.Text]);
  8. Kør programmet ved at klikke på den grønne afspilningsknap øverst i Visual Studio-vinduet.
  9. Som standard bruger applikationen 'Lys'-temaet og anvender det grå farveskema til UI-kontrollerne. Skift temaknappen for at se listen over temaer.
  10. Klik på temaet Natur.
  11. 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å.