{"id":270940,"date":"2023-02-14T12:08:00","date_gmt":"2023-02-14T09:08:00","guid":{"rendered":"https:\/\/howto.mediadoma.com\/?p=270940"},"modified":"2025-03-14T23:36:41","modified_gmt":"2025-03-14T20:36:41","slug":"winforms-so-fugen-sie-ihrer-anwendung-mehrere-designs-hinzu","status":"publish","type":"post","link":"https:\/\/howto.mediadoma.com\/de\/winforms-so-fugen-sie-ihrer-anwendung-mehrere-designs-hinzu\/","title":{"rendered":"WinForms: So f\u00fcgen Sie Ihrer Anwendung mehrere Designs hinzu"},"content":{"rendered":"\n

Designs sind eine gro\u00dfartige M\u00f6glichkeit, Ihren Benutzern die M\u00f6glichkeit zu geben, Ihre Anwendung anzupassen, ohne sich zu sehr auf bestimmte Details einlassen zu m\u00fcssen.<\/p>\n

Es ist \u00fcblich, dass moderne Anwendungen die Option haben, zwischen verschiedenen Themen zu wechseln. Bei einigen Anwendungen k\u00f6nnen Sie beispielsweise zwischen einem hellen und einem dunklen Design wechseln, w\u00e4hrend bei anderen m\u00f6glicherweise mehr Themen zur Auswahl stehen.<\/p>\n

Windows Forms ist ein UI-Framework, mit dem Sie Desktopanwendungen erstellen k\u00f6nnen. Sie k\u00f6nnen Designs in einer Windows Form-App implementieren, indem Sie ausw\u00e4hlbare Schaltfl\u00e4chen f\u00fcr jedes Design erstellen.<\/p>\n

Wenn der Benutzer ein Design ausw\u00e4hlt, k\u00f6nnen Sie die Eigenschaften der Hintergrundfarbe oder der Textfarbe jedes Elements \u00e4ndern, damit es mit dem ausgew\u00e4hlten Design \u00fcbereinstimmt.<\/p>\n

So richten Sie das Windows Form-Projekt ein<\/h2>\n

Erstellen Sie zun\u00e4chst eine neue Windows-Formular-App. F\u00fcllen Sie das neue Projekt mit einigen grundlegenden Steuerelementen wie Schaltfl\u00e4chen und Beschriftungen.<\/p>\n

    \n
  1. \n

    Erstellen Sie eine neue Windows Forms-Anwendung<\/a> in Visual Studio.<\/p>\n<\/li>\n

  2. \n

    Verwenden Sie im neuen Projekt die Toolbox, um nach einem Schaltfl\u00e4chen-Steuerelement zu suchen.<\/p>\n

    \"WinForms:<\/a>\n<\/li>\n

  3. \n

    W\u00e4hlen Sie das Schaltfl\u00e4chen-Steuerelement aus<\/strong> und ziehen Sie es auf die Leinwand. F\u00fcgen Sie insgesamt drei Schaltfl\u00e4chensteuerelemente hinzu.<\/p>\n

    \"WinForms:<\/a>\n<\/li>\n

  4. \n

    Klicken Sie in der Toolbox auf ein Beschriftungssteuerelement<\/strong> und ziehen Sie es auf die Leinwand. Platzieren Sie das Etikett unter den Kn\u00f6pfen.<\/p>\n

    \"WinForms:<\/a>\n<\/li>\n

  5. \n

    Gestalten Sie die Schaltfl\u00e4chen und Beschriftungen mithilfe des Eigenschaftenfensters. \u00c4ndern Sie die Eigenschaften wie folgt:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Kontrolle<\/th>\nName des Anwesens<\/th>\nNeuer Wert<\/th>\n<\/tr>\n<\/thead>\n
    Taste 1<\/strong><\/td>\nGr\u00f6\u00dfe<\/td>\n580, 200<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nEben<\/td>\n<\/tr>\n
    Text<\/td>\nBenutzer<\/td>\n<\/tr>\n
    Knopf2<\/strong><\/td>\nGr\u00f6\u00dfe<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nEben<\/td>\n<\/tr>\n
    Text<\/td>\nKonten<\/td>\n<\/tr>\n
    Knopf3<\/strong><\/td>\nGr\u00f6\u00dfe<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nEben<\/td>\n<\/tr>\n
    Text<\/td>\nBerechtigungen<\/td>\n<\/tr>\n
    Etikett1<\/strong><\/td>\nText<\/td>\nUrheberrecht 2022<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \"WinForms:<\/a>\n<\/li>\n<\/ol>\n

    So erstellen Sie die Schaltfl\u00e4che \u201eEinstellungen“ und die Themenliste<\/h2>\n

    Damit ein einfaches Themenmen\u00fc funktioniert, erstellen Sie mehrere Schaltfl\u00e4chen, um jedes Thema darzustellen. Die Anwendung wird drei Themen enthalten, ein \u201ehelles“ Thema, ein \u201eNatur“-Thema und ein \u201edunkles“ Thema.<\/p>\n

      \n
    1. \n

      F\u00fcgen Sie der Leinwand ein weiteres Schaltfl\u00e4chen-Steuerelement hinzu, um die Schaltfl\u00e4che "Einstellungen" (oder "Designs") darzustellen.<\/p>\n<\/li>\n

    2. \n

      \u00c4ndern Sie die Eigenschaften dieser Schaltfl\u00e4che wie folgt:<\/p>\n\n\n\n\n\n\n\n\n
      Name des Anwesens<\/th>\nNeuer Wert<\/th>\n<\/tr>\n<\/thead>\n
      Name<\/td>\nbtnThemeSettings<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nEben<\/td>\n<\/tr>\n
      Gr\u00f6\u00dfe<\/td>\n200, 120<\/td>\n<\/tr>\n
      Text<\/td>\nThemen<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \"WinForms:<\/a>\n<\/li>\n

    3. \n

      Ziehen Sie drei weitere Schaltfl\u00e4chen auf die Leinwand. Diese Schaltfl\u00e4chen repr\u00e4sentieren die drei verschiedenen Themen. \u00c4ndern Sie die Eigenschaften f\u00fcr jede der Schaltfl\u00e4chen wie folgt:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      Kontrolle<\/th>\nName des Anwesens<\/th>\nNeuer Wert<\/th>\n<\/tr>\n<\/thead>\n
      1 Taste<\/strong><\/td>\nName<\/td>\nbtnLightTheme<\/td>\n<\/tr>\n
      Hintergrundfarbe<\/td>\nWei\u00dfer Rauch<\/td>\n<\/tr>\n
      Gr\u00f6\u00dfe<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nEben<\/td>\n<\/tr>\n
      Text<\/td>\nLicht<\/td>\n<\/tr>\n
      Sichtbar<\/td>\nFALSCH<\/td>\n<\/tr>\n
      2 Taste<\/strong><\/td>\nName<\/td>\nbtnNatureTheme<\/td>\n<\/tr>\n
      Hintergrundfarbe<\/td>\nDunkelMeergr\u00fcn<\/td>\n<\/tr>\n
      Gr\u00f6\u00dfe<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nEben<\/td>\n<\/tr>\n
      Text<\/td>\nNatur<\/td>\n<\/tr>\n
      Sichtbar<\/td>\nFALSCH<\/td>\n<\/tr>\n
      3 Taste<\/strong><\/td>\nName<\/td>\nbtnDarkTheme<\/td>\n<\/tr>\n
      Hintergrundfarbe<\/td>\nDimGray<\/td>\n<\/tr>\n
      Vordergrundfarbe<\/td>\nWei\u00df<\/td>\n<\/tr>\n
      Gr\u00f6\u00dfe<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nEben<\/td>\n<\/tr>\n
      Text<\/td>\nDunkel<\/td>\n<\/tr>\n
      Sichtbar<\/td>\nFALSCH<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \"WinForms:<\/a>\n<\/li>\n

    4. \n

      Doppelklicken Sie auf die Schaltfl\u00e4che Themen .<\/strong> Dadurch wird eine Methode erstellt, um das \u201eon click“-Ereignis zu verarbeiten. Die Methode wird ausgef\u00fchrt, wenn der Benutzer auf diese Schaltfl\u00e4che klickt.<\/p>\n<\/li>\n

    5. \n

      Standardm\u00e4\u00dfig sind die Themen \u201eHell“, \u201eNatur“ und \u201eDunkel“ nicht sichtbar. F\u00fcgen Sie innerhalb der Funktion die Funktionalit\u00e4t hinzu, um die Sichtbarkeit der Schaltfl\u00e4chen entweder ein- oder auszublenden.<\/p>\n

      private void btnThemeSettings_Click(object sender, EventArgs e){    btnNatureTheme.Visible = !btnNatureTheme.Visible;    btnLightTheme.Visible = !btnLightTheme.Visible;    btnDarkTheme.Visible = !btnDarkTheme.Visible;}<\/code><\/pre>\n<\/li>\n
    6. \n
      F\u00fchren Sie die Anwendung aus, indem Sie oben im Visual Studio-Fenster auf die gr\u00fcne Wiedergabeschaltfl\u00e4che klicken.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    7. \n
      Zur Laufzeit blendet die Anwendung standardm\u00e4\u00dfig die Schaltfl\u00e4chen f\u00fcr jedes der drei Themen aus.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    8. \n
      Klicken Sie auf die Schaltfl\u00e4che Themen, um die anzuzeigenden Themen umzuschalten.<\/strong> Sie k\u00f6nnen weiterhin auf die Schaltfl\u00e4che \u201e Designs“<\/strong> dr\u00fccken, um ihre Sichtbarkeit umzuschalten.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
      So verwalten Sie Ihre Themen<\/h2>\n
      Erstellen Sie W\u00f6rterb\u00fccher f\u00fcr 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\u00fcssen. Es macht es auch einfacher, wenn Sie ein Thema in Zukunft mit neuen Farben aktualisieren m\u00f6chten.<\/p>\n
        \n
      1. \n
        Erstellen Sie oben in der C#-Standarddatei \u201e Form1.cs<\/strong> “ und innerhalb der Form<\/strong> -Klasse eine globale Enumeration. Diese Aufz\u00e4hlung speichert die verschiedenen Arten von Farben, die Sie in einem Thema verwenden werden.<\/p>\n
        enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  <\/code><\/pre>\n<\/li>\n
      2. \n
        Deklarieren Sie darunter drei globale W\u00f6rterb\u00fccher, eines f\u00fcr jedes der drei Themen. Sie k\u00f6nnen mehr \u00fcber W\u00f6rterb\u00fccher lesen, wenn Sie mit der Verwendung eines W\u00f6rterbuchs in C#<\/a> nicht vertraut sind .<\/p>\n
        Dictionary<ThemeColor, Color> Light = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Nature = new Dictionary<ThemeColor, Color>();Dictionary<ThemeColor, Color> Dark = new Dictionary<ThemeColor, Color>();<\/code><\/pre>\n<\/li>\n
      3. \n
        Initialisieren Sie im Konstruktor die W\u00f6rterb\u00fccher. F\u00fcgen Sie Werte f\u00fcr die verschiedenen Farben hinzu, die jedes Design verwendet.<\/p>\n
        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 }    };}<\/code><\/pre>\n<\/li>\n<\/ol>\n
        So \u00e4ndern Sie das Design<\/h2>\n
        Erstellen Sie Funktionen, um das Thema der Anwendung zu verwalten. Diese Funktionen \u00e4ndern die Hintergrundfarbe oder Textfarbe der UI-Elemente auf der Leinwand.<\/p>\n
          \n
        1. \n
          Erstellen Sie eine neue Funktion namens ChangeTheme()<\/strong>. Die Funktion nimmt die Farben f\u00fcr ein Thema als Argumente.<\/p>\n<\/li>\n
        2. \n
          \u00c4ndern Sie innerhalb der Funktion die Eigenschaften der Hintergrundfarbe der UI-Elemente. Die neuen Hintergrundfarben verwenden Farben f\u00fcr das ausgew\u00e4hlte Thema.<\/p>\n
          private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}<\/code><\/pre>\n<\/li>\n
        3. \n
          Erstellen Sie eine neue Funktion namens ChangeTextColor()<\/strong>. Sie k\u00f6nnen dies verwenden, um die Farbe des Textes zwischen dunkel und hell zu \u00e4ndern. Dadurch soll sichergestellt werden, dass Text auf dunklem Hintergrund noch lesbar ist.<\/p>\n
          private void ChangeTextColor(Color textColor){    \/\/ Change color of text    button1.ForeColor = textColor;    button2.ForeColor = textColor;    button3.ForeColor = textColor;    label1.ForeColor = textColor;    btnThemeSettings.ForeColor = textColor;}<\/code><\/pre>\n<\/li>\n
        4. \n
          Doppelklicken Sie im Designer auf das Schaltfl\u00e4chen-Steuerelement \u201eLicht“. Dadurch wird die Code-Behind-Datei ge\u00f6ffnet und ein Ereignishandler generiert, wenn der Benutzer auf die Schaltfl\u00e4che klickt.<\/p>\n<\/li>\n
        5. \n
          Verwenden Sie innerhalb des Ereignishandlers die Funktionen ChangeTheme()<\/strong> und ChangeTextColor()<\/strong>. Geben Sie die Farben ein, die das Design verwendet. Diese Farben k\u00f6nnen Sie dem Themenlexikon \u201eLicht“ entnehmen.<\/p>\n
          private void btnLightTheme_Click(object sender, EventArgs e){    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);    ChangeTextColor(Light[ThemeColor.Text]);}<\/code><\/pre>\n<\/li>\n
        6. \n
          Gehen Sie zur\u00fcck zum Designer und klicken Sie auf die Schaltfl\u00e4chen \u201eNatur“ und \u201eDunkel“. Verwenden Sie die Funktionen ChangeTheme()<\/strong> und ChangeTextColor()<\/strong> auch in ihren Event-Handlern.<\/p>\n
          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]);}<\/code><\/pre>\n<\/li>\n
        7. \n
          Standardm\u00e4\u00dfig sollte das Design auf das Design \u201eLight“ eingestellt sein, wenn der Benutzer die App zum ersten Mal \u00f6ffnet. Verwenden Sie im Konstruktor unterhalb der W\u00f6rterb\u00fccher die Funktionen ChangeTheme()<\/strong> und ChangeTextColor()<\/strong>.<\/p>\n
          ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);<\/code><\/pre>\n<\/li>\n
        8. \n
          F\u00fchren Sie die Anwendung aus, indem Sie oben im Visual Studio-Fenster auf die gr\u00fcne Wiedergabeschaltfl\u00e4che klicken.<\/p>\n<\/li>\n
        9. \n
          Standardm\u00e4\u00dfig verwendet die Anwendung das Design \u201eHell“ und wendet das graue Farbschema auf die UI-Steuerelemente an. Schalten Sie die Themenschaltfl\u00e4che um, um die Themenliste anzuzeigen.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        10. \n
          Klicken Sie auf das Thema Natur.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        11. \n
          Klicken Sie auf das dunkle Design.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
          Erstellen von Anwendungen mit Windows Forms<\/h2>\n
          Bei vielen Anwendungen kann der Benutzer zwischen mehreren Themen wechseln. Sie k\u00f6nnen Designs zu einer Windows Forms-Anwendung hinzuf\u00fcgen, indem Sie Optionen erstellen, die der Benutzer ausw\u00e4hlen kann.<\/p>\n
          Wenn der Benutzer auf ein Design klickt, k\u00f6nnen Sie die Hintergrundfarbe, den Text oder andere Eigenschaften \u00e4ndern, um sie an die im ausgew\u00e4hlten Design verwendeten Farben anzupassen.<\/p>\n
          Die Farben f\u00fcr jedes der Designs verwenden die integrierten Farben von Visual Studio. Sie m\u00fcssen ein geeignetes Farbschema verwenden, um den Benutzern ein besseres Erlebnis zu bieten. Sie k\u00f6nnen mehr \u00fcber die verschiedenen M\u00f6glichkeiten erfahren, wie Sie ein Farbschema f\u00fcr Ihre App ausw\u00e4hlen k\u00f6nnen.<\/p>\n
          Aufnahmequelle:  www.makeuseof.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
          Designs sind eine gro\u00dfartige M\u00f6glichkeit, Ihren Benutzern die M\u00f6glichkeit zu geben, Ihre Anwendung anzupassen, ohne sich zu sehr auf bestimmte Details einlassen zu m\u00fcssen.<\/p>\n","protected":false},"author":1,"featured_media":232341,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[2930],"tags":[3058],"class_list":["post-270940","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programmierung","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/posts\/270940","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/comments?post=270940"}],"version-history":[{"count":1,"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/posts\/270940\/revisions"}],"predecessor-version":[{"id":314972,"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/posts\/270940\/revisions\/314972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/media\/232341"}],"wp:attachment":[{"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/media?parent=270940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/categories?post=270940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/de\/wp-json\/wp\/v2\/tags?post=270940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}