WinForms: So fügen Sie Ihrer Anwendung mehrere Designs hinzu

Designs sind eine großartige Möglichkeit, Ihren Benutzern die Möglichkeit zu geben, Ihre Anwendung anzupassen, ohne sich zu sehr auf bestimmte Details einlassen zu müssen.

Es ist üblich, dass moderne Anwendungen die Option haben, zwischen verschiedenen Themen zu wechseln. Bei einigen Anwendungen können Sie beispielsweise zwischen einem hellen und einem dunklen Design wechseln, während bei anderen möglicherweise mehr Themen zur Auswahl stehen.

Windows Forms ist ein UI-Framework, mit dem Sie Desktopanwendungen erstellen können. Sie können Designs in einer Windows Form-App implementieren, indem Sie auswählbare Schaltflächen für jedes Design erstellen.

Wenn der Benutzer ein Design auswählt, können Sie die Eigenschaften der Hintergrundfarbe oder der Textfarbe jedes Elements ändern, damit es mit dem ausgewählten Design übereinstimmt.

So richten Sie das Windows Form-Projekt ein

Erstellen Sie zunächst eine neue Windows-Formular-App. Füllen Sie das neue Projekt mit einigen grundlegenden Steuerelementen wie Schaltflächen und Beschriftungen.

1. Erstellen Sie eine neue Windows Forms-Anwendung in Visual Studio.

2. Verwenden Sie im neuen Projekt die Toolbox, um nach einem Schaltflächen-Steuerelement zu suchen.

3. Wählen Sie das Schaltflächen-Steuerelement aus und ziehen Sie es auf die Leinwand. Fügen Sie insgesamt drei Schaltflächensteuerelemente hinzu.

4. Klicken Sie in der Toolbox auf ein Beschriftungssteuerelement und ziehen Sie es auf die Leinwand. Platzieren Sie das Etikett unter den Knöpfen.

5. Gestalten Sie die Schaltflächen und Beschriftungen mithilfe des Eigenschaftenfensters. Ändern Sie die Eigenschaften wie folgt:

   Kontrolle	Name des Anwesens	Neuer Wert
   Taste 1	Größe	580, 200
   FlatStyle	Eben
   Text	Benutzer
   Knopf2	Größe	580, 100
   FlatStyle	Eben
   Text	Konten
   Knopf3	Größe	580, 100
   FlatStyle	Eben
   Text	Berechtigungen
   Etikett1	Text	Urheberrecht 2022

So erstellen Sie die Schaltfläche „Einstellungen“ und die Themenliste

Damit ein einfaches Themenmenü funktioniert, erstellen Sie mehrere Schaltflächen, um jedes Thema darzustellen. Die Anwendung wird drei Themen enthalten, ein „helles“ Thema, ein „Natur“-Thema und ein „dunkles“ Thema.

1. Fügen Sie der Leinwand ein weiteres Schaltflächen-Steuerelement hinzu, um die Schaltfläche "Einstellungen" (oder "Designs") darzustellen.

2. Ändern Sie die Eigenschaften dieser Schaltfläche wie folgt:

   Name des Anwesens	Neuer Wert
   Name	btnThemeSettings
   FlatStyle	Eben
   Größe	200, 120
   Text	Themen

3. Ziehen Sie drei weitere Schaltflächen auf die Leinwand. Diese Schaltflächen repräsentieren die drei verschiedenen Themen. Ändern Sie die Eigenschaften für jede der Schaltflächen wie folgt:

   Kontrolle	Name des Anwesens	Neuer Wert
   1 Taste	Name	btnLightTheme
   Hintergrundfarbe	Weißer Rauch
   Größe	200, 80
   FlatStyle	Eben
   Text	Licht
   Sichtbar	FALSCH
   2 Taste	Name	btnNatureTheme
   Hintergrundfarbe	DunkelMeergrün
   Größe	200, 80
   FlatStyle	Eben
   Text	Natur
   Sichtbar	FALSCH
   3 Taste	Name	btnDarkTheme
   Hintergrundfarbe	DimGray
   Vordergrundfarbe	Weiß
   Größe	200, 80
   FlatStyle	Eben
   Text	Dunkel
   Sichtbar	FALSCH

4. Doppelklicken Sie auf die Schaltfläche Themen . Dadurch wird eine Methode erstellt, um das „on click“-Ereignis zu verarbeiten. Die Methode wird ausgeführt, wenn der Benutzer auf diese Schaltfläche klickt.

5. Standardmäßig sind die Themen „Hell“, „Natur“ und „Dunkel“ nicht sichtbar. Fügen Sie innerhalb der Funktion die Funktionalität hinzu, um die Sichtbarkeit der Schaltflächen entweder ein- oder auszublenden.

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

6. Führen Sie die Anwendung aus, indem Sie oben im Visual Studio-Fenster auf die grüne Wiedergabeschaltfläche klicken.

7. Zur Laufzeit blendet die Anwendung standardmäßig die Schaltflächen für jedes der drei Themen aus.

8. Klicken Sie auf die Schaltfläche Themen, um die anzuzeigenden Themen umzuschalten. Sie können weiterhin auf die Schaltfläche „ Designs“ drücken, um ihre Sichtbarkeit umzuschalten.

So verwalten Sie Ihre Themen

Erstellen Sie Wörterbücher für jedes Thema, um die verschiedenen Farben zu speichern, die es verwenden wird. Auf diese Weise speichern Sie alle Ihre Themenfarben an einem Ort, falls Sie sie mehrmals verwenden müssen. Es macht es auch einfacher, wenn Sie ein Thema in Zukunft mit neuen Farben aktualisieren möchten.

1. Erstellen Sie oben in der C#-Standarddatei „ Form1.cs “ und innerhalb der Form -Klasse eine globale Enumeration. Diese Aufzählung speichert die verschiedenen Arten von Farben, die Sie in einem Thema verwenden werden.

   enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  

2. Deklarieren Sie darunter drei globale Wörterbücher, eines für jedes der drei Themen. Sie können mehr über Wörterbücher lesen, wenn Sie mit der Verwendung eines Wörterbuchs in C# nicht vertraut sind .

   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. Initialisieren Sie im Konstruktor die Wörterbücher. Fügen Sie Werte für die verschiedenen Farben hinzu, die jedes Design verwendet.

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

So ändern Sie das Design

Erstellen Sie Funktionen, um das Thema der Anwendung zu verwalten. Diese Funktionen ändern die Hintergrundfarbe oder Textfarbe der UI-Elemente auf der Leinwand.

1. Erstellen Sie eine neue Funktion namens ChangeTheme(). Die Funktion nimmt die Farben für ein Thema als Argumente.

2. Ändern Sie innerhalb der Funktion die Eigenschaften der Hintergrundfarbe der UI-Elemente. Die neuen Hintergrundfarben verwenden Farben für das ausgewählte Thema.

   private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}

3. Erstellen Sie eine neue Funktion namens ChangeTextColor(). Sie können dies verwenden, um die Farbe des Textes zwischen dunkel und hell zu ändern. Dadurch soll sichergestellt werden, dass Text auf dunklem Hintergrund noch lesbar ist.

   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. Doppelklicken Sie im Designer auf das Schaltflächen-Steuerelement „Licht“. Dadurch wird die Code-Behind-Datei geöffnet und ein Ereignishandler generiert, wenn der Benutzer auf die Schaltfläche klickt.

5. Verwenden Sie innerhalb des Ereignishandlers die Funktionen ChangeTheme() und ChangeTextColor(). Geben Sie die Farben ein, die das Design verwendet. Diese Farben können Sie dem Themenlexikon „Licht“ entnehmen.

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

6. Gehen Sie zurück zum Designer und klicken Sie auf die Schaltflächen „Natur“ und „Dunkel“. Verwenden Sie die Funktionen ChangeTheme() und ChangeTextColor() auch in ihren Event-Handlern.

   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. Standardmäßig sollte das Design auf das Design „Light“ eingestellt sein, wenn der Benutzer die App zum ersten Mal öffnet. Verwenden Sie im Konstruktor unterhalb der Wörterbücher die Funktionen ChangeTheme() und ChangeTextColor().

   ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);

8. Führen Sie die Anwendung aus, indem Sie oben im Visual Studio-Fenster auf die grüne Wiedergabeschaltfläche klicken.

9. Standardmäßig verwendet die Anwendung das Design „Hell“ und wendet das graue Farbschema auf die UI-Steuerelemente an. Schalten Sie die Themenschaltfläche um, um die Themenliste anzuzeigen.

10. Klicken Sie auf das Thema Natur.

11. Klicken Sie auf das dunkle Design.

Erstellen von Anwendungen mit Windows Forms

Bei vielen Anwendungen kann der Benutzer zwischen mehreren Themen wechseln. Sie können Designs zu einer Windows Forms-Anwendung hinzufügen, indem Sie Optionen erstellen, die der Benutzer auswählen kann.

Wenn der Benutzer auf ein Design klickt, können Sie die Hintergrundfarbe, den Text oder andere Eigenschaften ändern, um sie an die im ausgewählten Design verwendeten Farben anzupassen.

Die Farben für jedes der Designs verwenden die integrierten Farben von Visual Studio. Sie müssen ein geeignetes Farbschema verwenden, um den Benutzern ein besseres Erlebnis zu bieten. Sie können mehr über die verschiedenen Möglichkeiten erfahren, wie Sie ein Farbschema für Ihre App auswählen können.