{"id":272871,"date":"2023-02-14T11:48:00","date_gmt":"2023-02-14T08:48:00","guid":{"rendered":"https:\/\/howto.mediadoma.com\/?p=272871"},"modified":"2025-03-13T22:51:43","modified_gmt":"2025-03-13T19:51:43","slug":"winforms-como-agregar-multiples-temas-a-su-aplicacion","status":"publish","type":"post","link":"https:\/\/howto.mediadoma.com\/es\/winforms-como-agregar-multiples-temas-a-su-aplicacion\/","title":{"rendered":"WinForms: c\u00f3mo agregar m\u00faltiples temas a su aplicaci\u00f3n"},"content":{"rendered":"

Los temas son una excelente manera de permitir que los usuarios personalicen su aplicaci\u00f3n sin tener que involucrarse demasiado en detalles espec\u00edficos.<\/p>\n

Es com\u00fan que las aplicaciones modernas tengan una opci\u00f3n para cambiar entre diferentes temas. Por ejemplo, algunas aplicaciones le permiten cambiar entre un tema claro o un tema oscuro, mientras que otras pueden tener m\u00e1s opciones de temas.<\/p>\n

Windows Forms es un marco de interfaz de usuario que le permite crear aplicaciones de escritorio. Puede implementar temas en una aplicaci\u00f3n de formulario de Windows mediante la creaci\u00f3n de botones seleccionables para cada tema.<\/p>\n

Cuando el usuario selecciona un tema, puede cambiar el color de fondo o las propiedades del color del texto de cada elemento para que coincida con el tema seleccionado.<\/p>\n

C\u00f3mo configurar el proyecto de Windows Forms<\/h2>\n

Primero, cree una nueva aplicaci\u00f3n de formulario de Windows. Rellene el nuevo proyecto con algunos controles b\u00e1sicos, como botones y etiquetas.<\/p>\n

    \n
  1. \n

    Cree una nueva aplicaci\u00f3n de Windows Forms<\/a> en Visual Studio.<\/p>\n<\/li>\n

  2. \n

    En el nuevo proyecto, use la caja de herramientas para buscar un control de bot\u00f3n.<\/p>\n

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

  3. \n

    Seleccione el control de bot\u00f3n<\/strong> y arr\u00e1strelo al lienzo. Agregue un total de tres controles de bot\u00f3n.<\/p>\n

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

  4. \n

    Con la caja de herramientas, haga clic y arrastre un control de etiqueta<\/strong> al lienzo. Coloque la etiqueta debajo de los botones.<\/p>\n

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

  5. \n

    Dale estilo a los botones y etiquetas usando la ventana de propiedades. Cambie las propiedades a lo siguiente:<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    Control<\/th>\nNombre de la propiedad<\/th>\nNuevo valor<\/th>\n<\/tr>\n<\/thead>\n
    bot\u00f3n 1<\/strong><\/td>\nTama\u00f1o<\/td>\n580, 200<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nPlano<\/td>\n<\/tr>\n
    Texto<\/td>\nUsuarios<\/td>\n<\/tr>\n
    boton2<\/strong><\/td>\nTama\u00f1o<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nPlano<\/td>\n<\/tr>\n
    Texto<\/td>\ncuentas<\/td>\n<\/tr>\n
    boton3<\/strong><\/td>\nTama\u00f1o<\/td>\n580, 100<\/td>\n<\/tr>\n
    FlatStyle<\/td>\nPlano<\/td>\n<\/tr>\n
    Texto<\/td>\npermisos<\/td>\n<\/tr>\n
    etiqueta1<\/strong><\/td>\nTexto<\/td>\nDerechos de autor 2022<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    C\u00f3mo crear el bot\u00f3n de configuraci\u00f3n y la lista de temas<\/h2>\n

    Para que funcione un men\u00fa de temas simple, cree varios botones para representar cada tema. La aplicaci\u00f3n incluir\u00e1 tres temas, un tema "Luz", un tema "Naturaleza" y un tema "Oscuro".<\/p>\n

      \n
    1. \n

      Agregue otro control de bot\u00f3n al lienzo para representar el bot\u00f3n de configuraci\u00f3n (o "Temas").<\/p>\n<\/li>\n

    2. \n

      Cambie las propiedades de este bot\u00f3n a lo siguiente:<\/p>\n\n\n\n\n\n\n\n\n
      Nombre de la propiedad<\/th>\nNuevo valor<\/th>\n<\/tr>\n<\/thead>\n
      Nombre<\/td>\nbtnConfiguraci\u00f3n del tema<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlano<\/td>\n<\/tr>\n
      Tama\u00f1o<\/td>\n200, 120<\/td>\n<\/tr>\n
      Texto<\/td>\nTemas<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    3. \n

      Arrastre tres botones m\u00e1s al lienzo. Estos botones representar\u00e1n los tres temas diferentes. Cambie las propiedades de cada uno de los botones a lo siguiente:<\/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
      Control<\/th>\nNombre de la propiedad<\/th>\nNuevo valor<\/th>\n<\/tr>\n<\/thead>\n
      1er bot\u00f3n<\/strong><\/td>\nNombre<\/td>\nbtnLightTema<\/td>\n<\/tr>\n
      BackColor<\/td>\nHumo blanco<\/td>\n<\/tr>\n
      Tama\u00f1o<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlano<\/td>\n<\/tr>\n
      Texto<\/td>\nLuz<\/td>\n<\/tr>\n
      Visible<\/td>\nFalso<\/td>\n<\/tr>\n
      2do bot\u00f3n<\/strong><\/td>\nNombre<\/td>\nbtnNaturalezaTema<\/td>\n<\/tr>\n
      BackColor<\/td>\noscuromarverde<\/td>\n<\/tr>\n
      Tama\u00f1o<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlano<\/td>\n<\/tr>\n
      Texto<\/td>\nNaturaleza<\/td>\n<\/tr>\n
      Visible<\/td>\nFalso<\/td>\n<\/tr>\n
      3er bot\u00f3n<\/strong><\/td>\nNombre<\/td>\nbtnTema oscuro<\/td>\n<\/tr>\n
      BackColor<\/td>\nDimGray<\/td>\n<\/tr>\n
      Color primario<\/td>\nBlanco<\/td>\n<\/tr>\n
      Tama\u00f1o<\/td>\n200, 80<\/td>\n<\/tr>\n
      FlatStyle<\/td>\nPlano<\/td>\n<\/tr>\n
      Texto<\/td>\nOscuro<\/td>\n<\/tr>\n
      Visible<\/td>\nFalso<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

    4. \n

      Haga doble clic en el bot\u00f3n Temas<\/strong>. Esto crear\u00e1 un m\u00e9todo para manejar el evento "al hacer clic". El m\u00e9todo se ejecutar\u00e1 cuando el usuario haga clic en este bot\u00f3n.<\/p>\n<\/li>\n

    5. \n

      De forma predeterminada, los temas "Claro", "Naturaleza" y "Oscuro" no estar\u00e1n visibles. Dentro de la funci\u00f3n, agregue la funcionalidad para alternar la visibilidad de los botones para mostrar u ocultar.<\/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
      Ejecute la aplicaci\u00f3n haciendo clic en el bot\u00f3n verde de reproducci\u00f3n en la parte superior de la ventana de Visual Studio.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    7. \n
      En tiempo de ejecuci\u00f3n, la aplicaci\u00f3n ocultar\u00e1 los botones de cada uno de los tres temas de forma predeterminada.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n
    8. \n
      Haga clic en el bot\u00f3n Temas<\/strong> para alternar los temas que se mostrar\u00e1n. Puede continuar presionando el bot\u00f3n Temas<\/strong> para alternar su visibilidad.<\/p>\n
      \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
      C\u00f3mo administrar tus temas<\/h2>\n
      Cree diccionarios para cada tema para almacenar los diferentes colores que utilizar\u00e1. Esto es para que almacene todos los colores de su tema en un solo lugar, en caso de que necesite usarlos varias veces. Tambi\u00e9n lo hace m\u00e1s f\u00e1cil si desea actualizar un tema con nuevos colores en el futuro.<\/p>\n
        \n
      1. \n
        En la parte superior del archivo Form1.cs<\/strong> C# predeterminado y dentro de la clase Form<\/strong>, cree una enumeraci\u00f3n global. Esta enumeraci\u00f3n almacenar\u00e1 los diferentes tipos de colores que utilizar\u00e1 en un tema.<\/p>\n
        enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  <\/code><\/pre>\n<\/li>\n
      2. \n
        Debajo, declara tres diccionarios globales, uno para cada uno de los tres temas. Puede obtener m\u00e1s informaci\u00f3n sobre los diccionarios si no est\u00e1 familiarizado con el uso de un diccionario en 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
        Dentro del constructor, inicialice los diccionarios. Agregue valores para los diferentes colores que usar\u00e1 cada tema.<\/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
        C\u00f3mo cambiar el tema<\/h2>\n
        Crea funciones para administrar el tema de la aplicaci\u00f3n. Estas funciones cambiar\u00e1n el color de fondo o el color del texto de los elementos de la interfaz de usuario en el lienzo.<\/p>\n
          \n
        1. \n
          Cree una nueva funci\u00f3n llamada ChangeTheme()<\/strong>. La funci\u00f3n tomar\u00e1 los colores de un tema como argumentos.<\/p>\n<\/li>\n
        2. \n
          Dentro de la funci\u00f3n, cambie las propiedades de color de fondo de los elementos de la interfaz de usuario. Los nuevos colores de fondo usar\u00e1n colores para el tema seleccionado.<\/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
          Cree una nueva funci\u00f3n llamada ChangeTextColor()<\/strong>. Puede usar esto para cambiar el color del texto entre oscuro y claro. Esto es para garantizar que el texto sobre un fondo oscuro a\u00fan se pueda leer.<\/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
          Desde el dise\u00f1ador, haga doble clic en el control del bot\u00f3n "Luz". Esto abrir\u00e1 el archivo de c\u00f3digo subyacente y generar\u00e1 un controlador de eventos para cuando el usuario haga clic en el bot\u00f3n.<\/p>\n<\/li>\n
        5. \n
          Dentro del controlador de eventos, use las funciones ChangeTheme()<\/strong> y ChangeTextColor()<\/strong>. Introduzca los colores que utiliza el tema. Puede recuperar estos colores del diccionario de temas "Luz".<\/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
          Vuelva al dise\u00f1ador y haga clic en los botones "Naturaleza" y "Oscuridad". Utilice las funciones ChangeTheme()<\/strong> y ChangeTextColor()<\/strong> en sus controladores de eventos tambi\u00e9n.<\/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
          De forma predeterminada, el tema debe establecerse en el tema "Ligero" cuando el usuario abre la aplicaci\u00f3n por primera vez. En el constructor, debajo de los diccionarios, use las funciones ChangeTheme()<\/strong> y 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
          Ejecute la aplicaci\u00f3n haciendo clic en el bot\u00f3n verde de reproducci\u00f3n en la parte superior de la ventana de Visual Studio.<\/p>\n<\/li>\n
        9. \n
          De manera predeterminada, la aplicaci\u00f3n usa el tema "Light" y aplica el esquema de color gris a los controles de la interfaz de usuario. Alterne el bot\u00f3n de temas para ver la lista de temas.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        10. \n
          Haga clic en el tema Naturaleza.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n
        11. \n
          Haga clic en el tema oscuro.<\/p>\n
          \"WinForms:<\/a>\n<\/li>\n<\/ol>\n
          Creaci\u00f3n de aplicaciones usando Windows Forms<\/h2>\n
          Muchas aplicaciones permiten al usuario cambiar entre varios temas. Puede agregar temas a una aplicaci\u00f3n de Windows Forms creando opciones para que el usuario seleccione.<\/p>\n
          Cuando el usuario hace clic en un tema, puede cambiar el color de fondo, el texto o cualquier otra propiedad para que coincida con los colores utilizados en el tema seleccionado.<\/p>\n
          Los colores de cada uno de los temas utilizan los colores integrados de Visual Studio. Deber\u00e1 utilizar un esquema de color adecuado para brindar a los usuarios una mejor experiencia. Puede obtener m\u00e1s informaci\u00f3n sobre las diferentes formas en que puede elegir un esquema de color para su aplicaci\u00f3n.<\/p>\n
          Fuente de grabaci\u00f3n:  www.makeuseof.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
          Los temas son una excelente manera de permitir que los usuarios personalicen su aplicaci\u00f3n sin tener que involucrarse demasiado en detalles espec\u00edficos.<\/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":[2933],"tags":[3062],"class_list":["post-272871","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacion","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/272871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=272871"}],"version-history":[{"count":1,"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/272871\/revisions"}],"predecessor-version":[{"id":302959,"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/272871\/revisions\/302959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/232341"}],"wp:attachment":[{"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=272871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=272871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howto.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=272871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}