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.
- Ein... kreieren neue Windows Forms-Anwendung im Visual Studio.
- Verwenden Sie im neuen Projekt die Toolbox, um nach einem Schaltflächen-Steuerelement zu suchen.
- Wähle aus Tastensteuerung und ziehen Sie es auf die Leinwand. Fügen Sie insgesamt drei Schaltflächensteuerelemente hinzu.
- Klicken Sie in der Toolbox auf a und ziehen Sie es Etikettenkontrolle auf die Leinwand. Platzieren Sie das Etikett unter den Knöpfen.
- 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.
- Fügen Sie der Leinwand ein weiteres Schaltflächen-Steuerelement hinzu, um die Schaltfläche "Einstellungen" (oder "Designs") darzustellen.
- Ändern Sie die Eigenschaften dieser Schaltfläche wie folgt:
Name des Anwesens Neuer Wert Name btnThemeSettings FlatStyle Eben Größe 200, 120 Text Themen - 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 - Doppelklicken Sie auf die Themen Taste. Dadurch wird eine Methode erstellt, um das „On Click“-Ereignis zu behandeln. Die Methode wird ausgeführt, wenn der Benutzer auf diese Schaltfläche klickt.
- 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.
PrivatgeländeLeerebtnThemeSettings_Click(Objekt Sender, EventArgs e)
{
btnNatureTheme. Sichtbar = !btnNatureTheme. Sichtbar;
btnLightTheme. Sichtbar = !btnLightTheme. Sichtbar;
btnDarkTheme. Sichtbar = !btnDarkTheme. Sichtbar;
} - Führen Sie die Anwendung aus, indem Sie oben im Visual Studio-Fenster auf die grüne Wiedergabeschaltfläche klicken.
- Zur Laufzeit blendet die Anwendung standardmäßig die Schaltflächen für jedes der drei Themen aus.
- Klick auf das Themen Schaltfläche, um die anzuzeigenden Themen umzuschalten. Sie können weiterhin auf drücken Themen Schaltfläche, 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.
- An der Spitze der Standardeinstellung Form1.cs C#-Datei und innerhalb der Bilden Klasse, erstellen Sie eine globale Aufzählung. Diese Aufzählung speichert die verschiedenen Arten von Farben, die Sie in einem Thema verwenden werden.
Aufzählung Themenfarbe
{
Primär,
Sekundär,
Tertiär,
Text
} - 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 von a nicht vertraut sind Wörterbuch in C#.
Wörterbuch<ThemaFarbe, Farbe> Licht = neues Wörterbuch<ThemaFarbe, Farbe>();
Wörterbuch<ThemaFarbe, Farbe> Natur = neues Wörterbuch<ThemaFarbe, Farbe>();
Wörterbuch<ThemaFarbe, Farbe> Dunkel = neues Wörterbuch<ThemaFarbe, Farbe>(); - Initialisieren Sie im Konstruktor die Wörterbücher. Fügen Sie Werte für die verschiedenen Farben hinzu, die jedes Design verwendet.
Öffentlichkeit Form 1()
{
Initialisieren der Komponente();
// Wörterbücher hier hinzufügen
Licht = neues Wörterbuch<ThemaFarbe, Farbe>() {
{ Themenfarbe. Primärfarbe. Weißer Rauch },
{ Themenfarbe. Sekundäre Farbe. Silber },
{ Themenfarbe. Tertiär, Farbe. Weiß },
{ Themenfarbe. Textfarbe. Schwarz }
};
Natur = neues Wörterbuch<ThemaFarbe, Farbe>() {
{ Themenfarbe. Primärfarbe. DarkSeaGreen },
{ Themenfarbe. Sekundäre Farbe. Alice blau },
{ Themenfarbe. Tertiär, Farbe. Honigtau },
{ Themenfarbe. Textfarbe. Schwarz }
};
Dunkel = neues Wörterbuch<ThemaFarbe, Farbe>() {
{ Themenfarbe. Primärfarbe. DimGray },
{ Themenfarbe. Sekundäre Farbe. DimGray },
{ Themenfarbe. Tertiär, Farbe. Schwarz },
{ Themenfarbe. Textfarbe. Weiß }
};
}
So ändern Sie das Thema
Erstellen Sie Funktionen, um das Thema der Anwendung zu verwalten. Diese Funktionen ändern die Hintergrundfarbe oder Textfarbe der UI-Elemente auf der Leinwand.
- Erstellen Sie eine neue Funktion namens Thema ändern (). Die Funktion nimmt die Farben für ein Thema als Argumente.
- Ändern Sie innerhalb der Funktion die Eigenschaften der Hintergrundfarbe der UI-Elemente. Die neuen Hintergrundfarben verwenden Farben für das ausgewählte Thema.
PrivatgeländeLeereThema ändern(Farbe primäre Farbe, Farbe sekundäre Farbe, Farbe tertiäre Farbe)
{
// Hintergrundfarbe der Schaltflächen ändern
btnThemeSettings. BackColor = primäreFarbe;
button1.BackColor = primäreFarbe;
button2.BackColor = sekundäreFarbe;
button3.BackColor = sekundäreFarbe;
Dies.BackColor = tertiaryColor;
} - Erstellen Sie eine neue Funktion namens Textfarbe ändern(). 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.
PrivatgeländeLeereTextfarbe ändern(Farbe Textfarbe)
{
// Veränderung Farbe vonText
button1.ForeColor = Textfarbe;
button2.ForeColor = Textfarbe;
button3.ForeColor = Textfarbe;
label1.ForeColor = Textfarbe;
btnThemeSettings. ForeColor = Textfarbe;
} - 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.
- Verwenden Sie innerhalb des Ereignishandlers die Thema ändern () und Textfarbe ändern() Funktionen. Geben Sie die Farben ein, die das Design verwendet. Diese Farben können Sie dem Themenlexikon „Licht“ entnehmen.
PrivatgeländeLeerebtnLightTheme_Click(Objekt Sender, EventArgs e)
{
Thema ändern(Licht[Designfarbe. Primär], Licht[Designfarbe. Sekundär], Licht[Designfarbe. Tertiär]);
Textfarbe ändern(Licht[Designfarbe. Text]);
} - Gehen Sie zurück zum Designer und klicken Sie auf die Schaltflächen „Natur“ und „Dunkel“. Verwenden Sie die Thema ändern () und Textfarbe ändern() Funktionen auch in ihren Event-Handlern.
PrivatgeländeLeerebtnNatureTheme_Click(Objekt Sender, EventArgs e)
{
Thema ändern(Natur[Designfarbe. Primär], Natur[Designfarbe. Sekundär], Natur[Designfarbe. Tertiär]);
Textfarbe ändern(Natur[Designfarbe. Text]);
}
PrivatgeländeLeerebtnDarkTheme_Click(Objekt Sender, EventArgs e)
{
Thema ändern(Dunkel[Designfarbe. Primär], Dunkel[Designfarbe. Sekundär], Dunkel[Designfarbe. Tertiär]);
Textfarbe ändern(Dunkel[Designfarbe. Text]);
} - Standardmäßig sollte das Design auf das Design „Light“ eingestellt sein, wenn der Benutzer die App zum ersten Mal öffnet. Verwenden Sie im Konstruktor unter den Wörterbüchern die Thema ändern () und Textfarbe ändern() Funktionen.
Thema ändern(Licht[Designfarbe. Primär], Licht[Designfarbe. Sekundär], Licht[Designfarbe. Tertiär]);
Textfarbe ändern(Licht[Designfarbe. Text]); - Führen Sie die Anwendung aus, indem Sie oben im Visual Studio-Fenster auf die grüne Wiedergabeschaltfläche klicken.
- 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.
- Klicken Sie auf das Thema Natur.
- Klicken Sie auf das dunkle Thema.
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.