{"id":270947,"date":"2023-02-14T11:59:00","date_gmt":"2023-02-14T08:59:00","guid":{"rendered":"https:\/\/howto.mediadoma.com\/?p=270947"},"modified":"2025-03-14T13:53:18","modified_gmt":"2025-03-14T10:53:18","slug":"winforms-hur-man-lagger-till-flera-teman-i-din-applikation","status":"publish","type":"post","link":"https:\/\/howto.mediadoma.com\/sv\/winforms-hur-man-lagger-till-flera-teman-i-din-applikation\/","title":{"rendered":"WinForms: Hur man l\u00e4gger till flera teman i din applikation"},"content":{"rendered":"

Teman \u00e4r ett utm\u00e4rkt s\u00e4tt att l\u00e5ta dina anv\u00e4ndare anpassa din applikation utan att beh\u00f6va bli alltf\u00f6r involverad i specifika detaljer.<\/p>\n

Det \u00e4r vanligt att moderna applikationer har m\u00f6jlighet att v\u00e4xla mellan olika teman. Till exempel l\u00e5ter vissa applikationer dig v\u00e4xla mellan ett ljust eller m\u00f6rkt tema, medan andra kan ha fler temaval.<\/p>\n

Windows Forms \u00e4r ett ramverk f\u00f6r anv\u00e4ndargr\u00e4nssnitt som l\u00e5ter dig skapa skrivbordsapplikationer. Du kan implementera teman i en Windows-formul\u00e4rapp genom att skapa valbara knappar f\u00f6r varje tema.<\/p>\n

N\u00e4r anv\u00e4ndaren v\u00e4ljer ett tema kan du \u00e4ndra bakgrundsf\u00e4rgen eller textf\u00e4rgegenskaperna f\u00f6r varje element f\u00f6r att matcha det valda temat.<\/p>\n

Hur man st\u00e4ller in Windows Form Project<\/h2>\n

Skapa f\u00f6rst en ny Windows-formul\u00e4rapp. Fyll det nya projektet med n\u00e5gra grundl\u00e4ggande kontroller, som knappar och etiketter.<\/p>\n

    \n
  1. \n

    Skapa ett nytt Windows Forms-program<\/a> i Visual Studio.<\/p>\n<\/li>\n

  2. \n

    I det nya projektet anv\u00e4nder du verktygsl\u00e5dan f\u00f6r att s\u00f6ka efter en knappkontroll.<\/p>\n

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

  3. \n

    V\u00e4lj knappkontrollen<\/strong> och dra den till duken. L\u00e4gg till totalt tre knappkontroller.<\/p>\n

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

  4. \n

    Anv\u00e4nd verktygsl\u00e5dan, klicka och dra en etikettkontroll<\/strong> till arbetsytan. Placera etiketten under knapparna.<\/p>\n

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

  5. \n

    Style knapparna och etiketterna med hj\u00e4lp av egenskapsf\u00f6nstret. \u00c4ndra egenskaperna till f\u00f6ljande:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Kontrollera<\/th>\nEgendomsnamn<\/th>\nNytt v\u00e4rde<\/th>\n<\/tr>\n<\/thead>\n
    knapp1<\/strong><\/td>\nStorlek<\/td>\n580, 200<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nPlatt<\/td>\n<\/tr>\n
    Text<\/td>\nAnv\u00e4ndare<\/td>\n<\/tr>\n
    knapp 2<\/strong><\/td>\nStorlek<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nPlatt<\/td>\n<\/tr>\n
    Text<\/td>\nkonton<\/td>\n<\/tr>\n
    knapp 3<\/strong><\/td>\nStorlek<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nPlatt<\/td>\n<\/tr>\n
    Text<\/td>\nBeh\u00f6righeter<\/td>\n<\/tr>\n
    etikett1<\/strong><\/td>\nText<\/td>\nCopyright 2022<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    Hur man skapar inst\u00e4llningsknappen och lista \u00f6ver teman<\/h2>\n

    F\u00f6r att en enkel temameny ska fungera skapar du flera knappar som representerar varje tema. Applikationen kommer att inneh\u00e5lla tre teman, ett "Ljus"-tema, ett "Natur"-tema och ett "M\u00f6rkt"-tema.<\/p>\n

      \n
    1. \n

      L\u00e4gg till ytterligare en knappkontroll p\u00e5 arbetsytan f\u00f6r att representera knappen f\u00f6r inst\u00e4llningar (eller "Teman").<\/p>\n<\/li>\n

    2. \n

      \u00c4ndra egenskaperna f\u00f6r den h\u00e4r knappen till f\u00f6ljande:<\/p>\n\n\n\n\n\n\n\n\n
      Egendomsnamn<\/th>\nNytt v\u00e4rde<\/th>\n<\/tr>\n<\/thead>\n
      namn<\/td>\nbtnThemeSettings<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlatt<\/td>\n<\/tr>\n
      Storlek<\/td>\n200, 120<\/td>\n<\/tr>\n
      Text<\/td>\nteman<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    3. \n

      Dra ytterligare tre knappar till duken. Dessa knappar kommer att representera de tre olika teman. \u00c4ndra egenskaperna f\u00f6r var och en av knapparna till f\u00f6ljande:<\/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
      Kontrollera<\/th>\nEgendomsnamn<\/th>\nNytt v\u00e4rde<\/th>\n<\/tr>\n<\/thead>\n
      1:a knappen<\/strong><\/td>\nnamn<\/td>\nbtnLightTheme<\/td>\n<\/tr>\n
      Bakf\u00e4rg<\/td>\nVit r\u00f6k<\/td>\n<\/tr>\n
      Storlek<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlatt<\/td>\n<\/tr>\n
      Text<\/td>\nLjus<\/td>\n<\/tr>\n
      Synlig<\/td>\nFalsk<\/td>\n<\/tr>\n
      2:a knappen<\/strong><\/td>\nnamn<\/td>\nbtnNatureTheme<\/td>\n<\/tr>\n
      Bakf\u00e4rg<\/td>\nM\u00f6rkhavsgr\u00f6n<\/td>\n<\/tr>\n
      Storlek<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlatt<\/td>\n<\/tr>\n
      Text<\/td>\nNatur<\/td>\n<\/tr>\n
      Synlig<\/td>\nFalsk<\/td>\n<\/tr>\n
      3:e knappen<\/strong><\/td>\nnamn<\/td>\nbtnM\u00f6rkt tema<\/td>\n<\/tr>\n
      Bakf\u00e4rg<\/td>\nDimgr\u00e5<\/td>\n<\/tr>\n
      ForeColor<\/td>\nVit<\/td>\n<\/tr>\n
      Storlek<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlatt<\/td>\n<\/tr>\n
      Text<\/td>\nM\u00f6rk<\/td>\n<\/tr>\n
      Synlig<\/td>\nFalsk<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    4. \n

      Dubbelklicka p\u00e5 knappen Teman .<\/strong> Detta kommer att skapa en metod f\u00f6r att hantera h\u00e4ndelsen "vid klick". Metoden k\u00f6rs n\u00e4r anv\u00e4ndaren klickar p\u00e5 den h\u00e4r knappen.<\/p>\n<\/li>\n

    5. \n

      Som standard \u00e4r teman "Ljus", "Natur" och "M\u00f6rk" inte synliga. Inuti funktionen, l\u00e4gg till funktionaliteten f\u00f6r att v\u00e4xla synligheten f\u00f6r knapparna f\u00f6r att antingen visa eller d\u00f6lja.<\/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
      K\u00f6r programmet genom att klicka p\u00e5 den gr\u00f6na uppspelningsknappen h\u00f6gst upp i Visual Studio-f\u00f6nstret.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    7. \n
      Under k\u00f6rning kommer programmet att d\u00f6lja knapparna f\u00f6r vart och ett av de tre teman som standard.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    8. \n
      Klicka p\u00e5 knappen Teman<\/strong> f\u00f6r att v\u00e4xla de teman som ska visas. Du kan forts\u00e4tta att trycka p\u00e5 knappen Teman<\/strong> f\u00f6r att v\u00e4xla deras synlighet.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
      Hur du hanterar dina teman<\/h2>\n
      Skapa ordb\u00f6cker f\u00f6r varje tema f\u00f6r att lagra de olika f\u00e4rgerna som det kommer att anv\u00e4nda. Detta f\u00f6r att du ska lagra alla dina temaf\u00e4rger p\u00e5 ett st\u00e4lle, ifall du beh\u00f6ver anv\u00e4nda dem flera g\u00e5nger. Det underl\u00e4ttar ocks\u00e5 om du vill uppdatera ett tema med nya f\u00e4rger i framtiden.<\/p>\n
        \n
      1. \n
        \u00d6verst i standardfilen Form1.cs<\/strong> C# och inuti klassen Form<\/strong> skapar du en global uppr\u00e4kning. Denna uppr\u00e4kning kommer att lagra de olika typerna av f\u00e4rger du kommer att anv\u00e4nda i ett tema.<\/p>\n
        enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  <\/code><\/pre>\n<\/li>\n
      2. \n
        Nedan f\u00f6rklarar du tre globala ordb\u00f6cker, en f\u00f6r vart och ett av de tre teman. Du kan l\u00e4sa mer om Ordb\u00f6cker om du inte \u00e4r bekant med hur man anv\u00e4nder en ordbok i C#<\/a>.<\/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
        Initiera ordb\u00f6ckerna inuti konstruktorn. L\u00e4gg till v\u00e4rden f\u00f6r de olika f\u00e4rgerna som varje tema kommer att anv\u00e4nda.<\/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
        Hur man \u00e4ndrar temat<\/h2>\n
        Skapa funktioner f\u00f6r att hantera programmets tema. Dessa funktioner kommer att \u00e4ndra bakgrundsf\u00e4rgen eller textf\u00e4rgen f\u00f6r UI-elementen p\u00e5 duken.<\/p>\n
          \n
        1. \n
          Skapa en ny funktion som heter ChangeTheme()<\/strong>. Funktionen tar f\u00e4rgerna f\u00f6r ett tema som argument.<\/p>\n<\/li>\n
        2. \n
          Inuti funktionen \u00e4ndrar du bakgrundsf\u00e4rgegenskaperna f\u00f6r UI-elementen. De nya bakgrundsf\u00e4rgerna kommer att anv\u00e4nda f\u00e4rger f\u00f6r det valda temat.<\/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
          Skapa en ny funktion som heter ChangeTextColor()<\/strong>. Du kan anv\u00e4nda detta f\u00f6r att \u00e4ndra f\u00e4rgen p\u00e5 texten mellan m\u00f6rk och ljus. Detta f\u00f6r att s\u00e4kerst\u00e4lla att text p\u00e5 m\u00f6rk bakgrund fortfarande \u00e4r l\u00e4sbar.<\/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
          Fr\u00e5n designern, dubbelklicka p\u00e5 knappen "Ljus"-knappen. Detta kommer att \u00f6ppna koden bakom filen och generera en h\u00e4ndelsehanterare f\u00f6r n\u00e4r anv\u00e4ndaren klickar p\u00e5 knappen.<\/p>\n<\/li>\n
        5. \n
          Inuti h\u00e4ndelsehanteraren anv\u00e4nder du funktionerna ChangeTheme()<\/strong> och ChangeTextColor()<\/strong>. Mata in f\u00e4rgerna som temat anv\u00e4nder. Du kan h\u00e4mta dessa f\u00e4rger fr\u00e5n temaordboken "Ljus".<\/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
          G\u00e5 tillbaka till designern och klicka p\u00e5 knapparna "Natur" och "M\u00f6rk". Anv\u00e4nd funktionerna ChangeTheme()<\/strong> och ChangeTextColor()<\/strong> i deras h\u00e4ndelsehanterare ocks\u00e5.<\/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
          Som standard ska temat vara inst\u00e4llt p\u00e5 "Ljus"-temat n\u00e4r anv\u00e4ndaren f\u00f6rst \u00f6ppnar appen. I konstruktorn, under ordb\u00f6ckerna, anv\u00e4nd funktionerna ChangeTheme()<\/strong> och 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
          K\u00f6r programmet genom att klicka p\u00e5 den gr\u00f6na uppspelningsknappen h\u00f6gst upp i Visual Studio-f\u00f6nstret.<\/p>\n<\/li>\n
        9. \n
          Som standard anv\u00e4nder applikationen "Ljus"-temat och till\u00e4mpar det gr\u00e5 f\u00e4rgschemat p\u00e5 UI-kontrollerna. V\u00e4xla p\u00e5 temanknappen f\u00f6r att se listan med teman.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        10. \n
          Klicka p\u00e5 temat Natur.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        11. \n
          Klicka p\u00e5 det m\u00f6rka temat.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
          Skapa applikationer med Windows Forms<\/h2>\n
          M\u00e5nga applikationer l\u00e5ter anv\u00e4ndaren v\u00e4xla mellan flera teman. Du kan l\u00e4gga till teman i ett Windows Forms-program genom att skapa alternativ som anv\u00e4ndaren kan v\u00e4lja.<\/p>\n
          N\u00e4r anv\u00e4ndaren klickar p\u00e5 ett tema kan du \u00e4ndra bakgrundsf\u00e4rg, text eller andra egenskaper f\u00f6r att matcha f\u00e4rgerna som anv\u00e4nds i det valda temat.<\/p>\n
          F\u00e4rgerna f\u00f6r vart och ett av teman anv\u00e4nder Visual Studios inbyggda f\u00e4rger. Du kommer att beh\u00f6va anv\u00e4nda ett korrekt f\u00e4rgschema f\u00f6r att ge anv\u00e4ndarna en b\u00e4ttre upplevelse. Du kan l\u00e4ra dig mer om de olika s\u00e4tten du kan v\u00e4lja ett f\u00e4rgschema f\u00f6r din app.<\/p>\n
          Inspelningsk\u00e4lla:  www.makeuseof.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
          Teman \u00e4r ett utm\u00e4rkt s\u00e4tt att l\u00e5ta dina anv\u00e4ndare anpassa din applikation utan att beh\u00f6va bli alltf\u00f6r involverad i specifika detaljer.<\/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":[3045],"tags":[3063],"class_list":["post-270947","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diverse-2","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/270947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=270947"}],"version-history":[{"count":1,"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/270947\/revisions"}],"predecessor-version":[{"id":308830,"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/270947\/revisions\/308830"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/232341"}],"wp:attachment":[{"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=270947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=270947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=270947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}