{"id":270931,"date":"2023-02-14T12:04:00","date_gmt":"2023-02-14T09:04:00","guid":{"rendered":"https:\/\/howto.mediadoma.com\/?p=270931"},"modified":"2025-03-15T01:54:50","modified_gmt":"2025-03-14T22:54:50","slug":"winforms-slik-legger-du-til-flere-temaer-i-applikasjonen-din","status":"publish","type":"post","link":"https:\/\/howto.mediadoma.com\/no\/winforms-slik-legger-du-til-flere-temaer-i-applikasjonen-din\/","title":{"rendered":"WinForms: Slik legger du til flere temaer i applikasjonen din"},"content":{"rendered":"

Temaer er en flott m\u00e5te \u00e5 la brukerne tilpasse applikasjonen din uten \u00e5 m\u00e5tte engasjere seg for spesifikke detaljer.<\/p>\n

Det er vanlig at moderne applikasjoner har en mulighet til \u00e5 bytte mellom ulike temaer. For eksempel lar noen applikasjoner deg bytte mellom et lyst tema eller et m\u00f8rkt tema, mens andre kan ha flere temavalg.<\/p>\n

Windows Forms er et UI-rammeverk som lar deg lage skrivebordsapplikasjoner. Du kan implementere temaer i en Windows-skjemaapp ved \u00e5 lage valgbare knapper for hvert tema.<\/p>\n

N\u00e5r brukeren velger et tema, kan du endre bakgrunnsfargen eller tekstfargeegenskapene til hvert element for \u00e5 matche det valgte temaet.<\/p>\n

Hvordan sette opp Windows Form Project<\/h2>\n

F\u00f8rst oppretter du en ny Windows-skjemaapp. Fyll det nye prosjektet med noen grunnleggende kontroller, for eksempel knapper og etiketter.<\/p>\n

    \n
  1. \n

    Opprett en ny Windows Forms-applikasjon<\/a> i Visual Studio.<\/p>\n<\/li>\n

  2. \n

    I det nye prosjektet bruker du verkt\u00f8ykassen til \u00e5 s\u00f8ke etter en knappekontroll.<\/p>\n

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

  3. \n

    Velg knappekontrollen<\/strong> og dra den inn p\u00e5 lerretet. Legg til totalt tre knappekontroller.<\/p>\n

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

  4. \n

    Bruk verkt\u00f8ykassen til \u00e5 klikke og dra en etikettkontroll<\/strong> til lerretet. Plasser etiketten under knappene.<\/p>\n

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

  5. \n

    Stil knappene og etikettene ved hjelp av egenskapsvinduet. Endre egenskapene til f\u00f8lgende:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Styre<\/th>\nEiendomsnavn<\/th>\nNy verdi<\/th>\n<\/tr>\n<\/thead>\n
    knapp 1<\/strong><\/td>\nSt\u00f8rrelse<\/td>\n580, 200<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nFlat<\/td>\n<\/tr>\n
    Tekst<\/td>\nBrukere<\/td>\n<\/tr>\n
    knapp 2<\/strong><\/td>\nSt\u00f8rrelse<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nFlat<\/td>\n<\/tr>\n
    Tekst<\/td>\nKontoer<\/td>\n<\/tr>\n
    knapp 3<\/strong><\/td>\nSt\u00f8rrelse<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nFlat<\/td>\n<\/tr>\n
    Tekst<\/td>\nTillatelser<\/td>\n<\/tr>\n
    etikett1<\/strong><\/td>\nTekst<\/td>\nCopyright 2022<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    Hvordan lage innstillingsknappen og liste over temaer<\/h2>\n

    For at en enkel temameny skal fungere, lag flere knapper for \u00e5 representere hvert tema. Applikasjonen vil inneholde tre temaer, et "Lys"-tema, et "Natur"-tema og et "M\u00f8rkt"-tema.<\/p>\n

      \n
    1. \n

      Legg til en annen knappkontroll p\u00e5 lerretet for \u00e5 representere innstillingene (eller "Temaer")-knappen.<\/p>\n<\/li>\n

    2. \n

      Endre egenskapene til denne knappen til f\u00f8lgende:<\/p>\n\n\n\n\n\n\n\n\n
      Eiendomsnavn<\/th>\nNy verdi<\/th>\n<\/tr>\n<\/thead>\n
      Navn<\/td>\nbtnThemeSettings<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nFlat<\/td>\n<\/tr>\n
      St\u00f8rrelse<\/td>\n200, 120<\/td>\n<\/tr>\n
      Tekst<\/td>\nTemaer<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    3. \n

      Dra tre knapper til p\u00e5 lerretet. Disse knappene vil representere de tre forskjellige temaene. Endre egenskapene for hver av knappene til f\u00f8lgende:<\/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
      Styre<\/th>\nEiendomsnavn<\/th>\nNy verdi<\/th>\n<\/tr>\n<\/thead>\n
      1 knapp<\/strong><\/td>\nNavn<\/td>\nbtnLightTheme<\/td>\n<\/tr>\n
      Baksidefarge<\/td>\nWhiteSmoke<\/td>\n<\/tr>\n
      St\u00f8rrelse<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nFlat<\/td>\n<\/tr>\n
      Tekst<\/td>\nLys<\/td>\n<\/tr>\n
      Synlig<\/td>\nFalsk<\/td>\n<\/tr>\n
      2 knapp<\/strong><\/td>\nNavn<\/td>\nbtnNatureTheme<\/td>\n<\/tr>\n
      Baksidefarge<\/td>\nDarkSeaGreen<\/td>\n<\/tr>\n
      St\u00f8rrelse<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nFlat<\/td>\n<\/tr>\n
      Tekst<\/td>\nNatur<\/td>\n<\/tr>\n
      Synlig<\/td>\nFalsk<\/td>\n<\/tr>\n
      3 knapp<\/strong><\/td>\nNavn<\/td>\nbtnM\u00f8rkt tema<\/td>\n<\/tr>\n
      Baksidefarge<\/td>\nDimGray<\/td>\n<\/tr>\n
      Forfarge<\/td>\nHvit<\/td>\n<\/tr>\n
      St\u00f8rrelse<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nFlat<\/td>\n<\/tr>\n
      Tekst<\/td>\nM\u00f8rk<\/td>\n<\/tr>\n
      Synlig<\/td>\nFalsk<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    4. \n

      Dobbeltklikk p\u00e5 Temaer<\/strong> – knappen. Dette vil opprette en metode for \u00e5 h\u00e5ndtere "ved klikk"-hendelsen. Metoden vil kj\u00f8re n\u00e5r brukeren klikker p\u00e5 denne knappen.<\/p>\n<\/li>\n

    5. \n

      Som standard vil ikke temaene "Lys", "Natur" og "M\u00f8rk" v\u00e6re synlige. Inne i funksjonen legger du til funksjonaliteten for \u00e5 bytte synligheten til knappene for \u00e5 enten vise eller skjule.<\/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
      Kj\u00f8r programmet ved \u00e5 klikke p\u00e5 den gr\u00f8nne avspillingsknappen \u00f8verst i Visual Studio-vinduet.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    7. \n
      Under kj\u00f8retid vil applikasjonen skjule knappene for hvert av de tre temaene som standard.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    8. \n
      Klikk p\u00e5 Temaer<\/strong> – knappen for \u00e5 veksle mellom temaene som skal vises. Du kan fortsette \u00e5 trykke p\u00e5 Temaer<\/strong> – knappen for \u00e5 bytte synlighet.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
      Hvordan administrere temaene dine<\/h2>\n
      Lag ordb\u00f8ker for hvert tema for \u00e5 lagre de forskjellige fargene det skal bruke. Dette er slik at du lagrer alle temafargene dine p\u00e5 ett sted, i tilfelle du m\u00e5 bruke dem flere ganger. Det gj\u00f8r det ogs\u00e5 enklere hvis du \u00f8nsker \u00e5 oppdatere et tema med nye farger i fremtiden.<\/p>\n
        \n
      1. \n
        \u00d8verst i standard Form1.cs<\/strong> C#-fil og inne i Form<\/strong> -klassen oppretter du en global oppsummering. Denne enumen vil lagre de forskjellige fargetypene du vil bruke i et tema.<\/p>\n
        enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  <\/code><\/pre>\n<\/li>\n
      2. \n
        Under erkl\u00e6rer du tre globale ordb\u00f8ker, en for hvert av de tre temaene. Du kan lese mer om Ordb\u00f8ker hvis du ikke er kjent med hvordan du bruker 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
        Initialiser ordb\u00f8kene inne i konstrukt\u00f8ren. Legg til verdier for de forskjellige fargene hvert tema skal bruke.<\/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
        Hvordan endre temaet<\/h2>\n
        Lag funksjoner for \u00e5 administrere programmets tema. Disse funksjonene vil endre bakgrunnsfargen eller tekstfargen til UI-elementene p\u00e5 lerretet.<\/p>\n
          \n
        1. \n
          Lag en ny funksjon kalt ChangeTheme()<\/strong>. Funksjonen vil ta fargene for et tema som argumenter.<\/p>\n<\/li>\n
        2. \n
          Inne i funksjonen endrer du bakgrunnsfargeegenskapene til UI-elementene. De nye bakgrunnsfargene vil bruke farger for det valgte temaet.<\/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
          Lag en ny funksjon kalt ChangeTextColor()<\/strong>. Du kan bruke denne til \u00e5 endre fargen p\u00e5 teksten mellom m\u00f8rk og lys. Dette er for \u00e5 sikre at tekst p\u00e5 m\u00f8rk bakgrunn fortsatt skal v\u00e6re lesbar.<\/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
          Fra designeren, dobbeltklikk p\u00e5 "Light"-knappkontrollen. Dette vil \u00e5pne kode-bak-filen og generere en hendelsesbehandler for n\u00e5r brukeren klikker p\u00e5 knappen.<\/p>\n<\/li>\n
        5. \n
          Inne i hendelsesbehandleren bruker du funksjonene ChangeTheme()<\/strong> og ChangeTextColor()<\/strong>. Skriv inn fargene som temaet bruker. Du kan hente disse fargene fra "Light"-temaordboken.<\/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 tilbake til designeren og klikk p\u00e5 "Natur" og "M\u00f8rk"-knappene. Bruk funksjonene ChangeTheme()<\/strong> og ChangeTextColor()<\/strong> i hendelsesbehandlerne deres.<\/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 skal temaet settes til "Light"-temaet n\u00e5r brukeren \u00e5pner appen for f\u00f8rste gang. I konstrukt\u00f8ren, under ordb\u00f8kene, bruk funksjonene ChangeTheme()<\/strong> og 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
          Kj\u00f8r programmet ved \u00e5 klikke p\u00e5 den gr\u00f8nne avspillingsknappen \u00f8verst i Visual Studio-vinduet.<\/p>\n<\/li>\n
        9. \n
          Som standard bruker applikasjonen "Light"-temaet og bruker det gr\u00e5 fargeskjemaet p\u00e5 UI-kontrollene. Veksle p\u00e5 temaknappen for \u00e5 se listen over temaer.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        10. \n
          Klikk p\u00e5 temaet Natur.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        11. \n
          Klikk p\u00e5 det m\u00f8rke temaet.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
          Opprette applikasjoner ved hjelp av Windows Forms<\/h2>\n
          Mange applikasjoner lar brukeren bytte mellom flere temaer. Du kan legge til temaer i en Windows Forms-applikasjon ved \u00e5 lage alternativer som brukeren kan velge.<\/p>\n
          N\u00e5r brukeren klikker p\u00e5 et tema, kan du endre bakgrunnsfargen, teksten eller andre egenskaper for \u00e5 matche fargene som brukes i det valgte temaet.<\/p>\n
          Fargene for hvert av temaene bruker Visual Studios innebygde farger. Du m\u00e5 bruke et riktig fargevalg for \u00e5 gi brukerne en bedre opplevelse. Du kan l\u00e6re mer om de forskjellige m\u00e5tene du kan velge et fargeskjema for appen din p\u00e5.<\/p>\n
          Opptakskilde:  www.makeuseof.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
          Temaer er en flott m\u00e5te \u00e5 la brukerne tilpasse applikasjonen din uten \u00e5 m\u00e5tte engasjere seg for spesifikke 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":[2931],"tags":[3060],"class_list":["post-270931","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programmering","tag-affiai-no"],"_links":{"self":[{"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/posts\/270931","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/comments?post=270931"}],"version-history":[{"count":1,"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/posts\/270931\/revisions"}],"predecessor-version":[{"id":316423,"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/posts\/270931\/revisions\/316423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/media\/232341"}],"wp:attachment":[{"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/media?parent=270931"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/categories?post=270931"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/no\/wp-json\/wp\/v2\/tags?post=270931"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}