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

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

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.





MAKEUSEOF VIDEO DES TAGES

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. Ein ... kreieren neue Windows Forms-Anwendung im Visual Studio.
  2. Verwenden Sie im neuen Projekt die Toolbox, um nach einem Schaltflächen-Steuerelement zu suchen.   Eigenschaftsfenster für die Schaltfläche in der Winforms-App
  3. Wähle aus Tastensteuerung und ziehen Sie es auf die Leinwand. Fügen Sie insgesamt drei Schaltflächensteuerelemente hinzu.   Eigenschaftsfenster für die Schaltfläche in der Winforms-App
  4. Klicken Sie in der Toolbox auf a und ziehen Sie es Etikettenkontrolle auf die Leinwand. Platzieren Sie das Etikett unter den Knöpfen.   Eigenschaftsfenster für die Schaltfläche in der Winforms-App
  5. Gestalten Sie die Schaltflächen und Beschriftungen mithilfe des Eigenschaftenfensters. Ändern Sie die Eigenschaften wie folgt:
    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 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:
    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 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.
  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. 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.

  1. An der Spitze der Standardeinstellung Form1.cs C#-Datei und innerhalb der Bilden Klasse, erstellen Sie eine globale Aufzählung. Diese Enumeration speichert die verschiedenen Arten von Farben, die Sie in einem Design 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 von a nicht vertraut sind Wörterbuch 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>();
  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();
    // 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 }
    };
    }

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 Thema ändern () . 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) 
    {
    // Change background color of buttons
    btnThemeSettings.BackColor = primaryColor;
    button1.BackColor = primaryColor;
    button2.BackColor = secondaryColor;
    button3.BackColor = secondaryColor;
    this.BackColor = tertiaryColor;
    }
  3. 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.
    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 Thema ändern () und Textfarbe ändern() Funktionen. Geben Sie die Farben ein, die das Design verwendet. Sie können diese Farben aus dem Themenlexikon 'Licht' abrufen.
    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 Thema ändern () und Textfarbe ändern() Funktionen 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 unter den Wörterbüchern die Thema ändern () und Textfarbe ändern() Funktionen.
    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 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.





So entfernen Sie Onedrive von Windows 8

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.