WinForms: cómo agregar múltiples temas a su aplicación

Los temas son una excelente manera de permitir que los usuarios personalicen su aplicación sin tener que involucrarse demasiado en detalles específicos.

Es común que las aplicaciones modernas tengan una opción 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ás opciones de temas.

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

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.

Cómo configurar el proyecto de Windows Forms

Primero, cree una nueva aplicación de formulario de Windows. Rellene el nuevo proyecto con algunos controles básicos, como botones y etiquetas.

1. Cree una nueva aplicación de Windows Forms en Visual Studio.

2. En el nuevo proyecto, use la caja de herramientas para buscar un control de botón.

3. Seleccione el control de botón y arrástrelo al lienzo. Agregue un total de tres controles de botón.

4. Con la caja de herramientas, haga clic y arrastre un control de etiqueta al lienzo. Coloque la etiqueta debajo de los botones.

5. Dale estilo a los botones y etiquetas usando la ventana de propiedades. Cambie las propiedades a lo siguiente:

   Control	Nombre de la propiedad	Nuevo valor
   botón 1	Tamaño	580, 200
   FlatStyle	Plano
   Texto	Usuarios
   boton2	Tamaño	580, 100
   FlatStyle	Plano
   Texto	cuentas
   boton3	Tamaño	580, 100
   FlatStyle	Plano
   Texto	permisos
   etiqueta1	Texto	Derechos de autor 2022

Cómo crear el botón de configuración y la lista de temas

Para que funcione un menú de temas simple, cree varios botones para representar cada tema. La aplicación incluirá tres temas, un tema "Luz", un tema "Naturaleza" y un tema "Oscuro".

1. Agregue otro control de botón al lienzo para representar el botón de configuración (o "Temas").

2. Cambie las propiedades de este botón a lo siguiente:

   Nombre de la propiedad	Nuevo valor
   Nombre	btnConfiguración del tema
   FlatStyle	Plano
   Tamaño	200, 120
   Texto	Temas

3. Arrastre tres botones más al lienzo. Estos botones representarán los tres temas diferentes. Cambie las propiedades de cada uno de los botones a lo siguiente:

   Control	Nombre de la propiedad	Nuevo valor
   1er botón	Nombre	btnLightTema
   BackColor	Humo blanco
   Tamaño	200, 80
   FlatStyle	Plano
   Texto	Luz
   Visible	Falso
   2do botón	Nombre	btnNaturalezaTema
   BackColor	oscuromarverde
   Tamaño	200, 80
   FlatStyle	Plano
   Texto	Naturaleza
   Visible	Falso
   3er botón	Nombre	btnTema oscuro
   BackColor	DimGray
   Color primario	Blanco
   Tamaño	200, 80
   FlatStyle	Plano
   Texto	Oscuro
   Visible	Falso

4. Haga doble clic en el botón Temas. Esto creará un método para manejar el evento "al hacer clic". El método se ejecutará cuando el usuario haga clic en este botón.

5. De forma predeterminada, los temas "Claro", "Naturaleza" y "Oscuro" no estarán visibles. Dentro de la función, agregue la funcionalidad para alternar la visibilidad de los botones para mostrar u ocultar.

   private void btnThemeSettings_Click(object sender, EventArgs e){    btnNatureTheme.Visible = !btnNatureTheme.Visible;    btnLightTheme.Visible = !btnLightTheme.Visible;    btnDarkTheme.Visible = !btnDarkTheme.Visible;}

6. Ejecute la aplicación haciendo clic en el botón verde de reproducción en la parte superior de la ventana de Visual Studio.

7. En tiempo de ejecución, la aplicación ocultará los botones de cada uno de los tres temas de forma predeterminada.

8. Haga clic en el botón Temas para alternar los temas que se mostrarán. Puede continuar presionando el botón Temas para alternar su visibilidad.

Cómo administrar tus temas

Cree diccionarios para cada tema para almacenar los diferentes colores que utilizará. Esto es para que almacene todos los colores de su tema en un solo lugar, en caso de que necesite usarlos varias veces. También lo hace más fácil si desea actualizar un tema con nuevos colores en el futuro.

1. En la parte superior del archivo Form1.cs C# predeterminado y dentro de la clase Form, cree una enumeración global. Esta enumeración almacenará los diferentes tipos de colores que utilizará en un tema.

   enum ThemeColor{    Primary,    Secondary,    Tertiary,    Text}  

2. Debajo, declara tres diccionarios globales, uno para cada uno de los tres temas. Puede obtener más información sobre los diccionarios si no está familiarizado con el uso de un diccionario en 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. Dentro del constructor, inicialice los diccionarios. Agregue valores para los diferentes colores que usará cada tema.

   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 }    };}

Cómo cambiar el tema

Crea funciones para administrar el tema de la aplicación. Estas funciones cambiarán el color de fondo o el color del texto de los elementos de la interfaz de usuario en el lienzo.

1. Cree una nueva función llamada ChangeTheme(). La función tomará los colores de un tema como argumentos.

2. Dentro de la función, cambie las propiedades de color de fondo de los elementos de la interfaz de usuario. Los nuevos colores de fondo usarán colores para el tema seleccionado.

   private void ChangeTheme(Color primaryColor, Color secondaryColor, Color tertiaryColor){        btnThemeSettings.BackColor = primaryColor;    button1.BackColor = primaryColor;    button2.BackColor = secondaryColor;    button3.BackColor = secondaryColor;    this.BackColor = tertiaryColor;}

3. Cree una nueva función llamada ChangeTextColor(). 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ún se pueda leer.

   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. Desde el diseñador, haga doble clic en el control del botón "Luz". Esto abrirá el archivo de código subyacente y generará un controlador de eventos para cuando el usuario haga clic en el botón.

5. Dentro del controlador de eventos, use las funciones ChangeTheme() y ChangeTextColor(). Introduzca los colores que utiliza el tema. Puede recuperar estos colores del diccionario de temas "Luz".

   private void btnLightTheme_Click(object sender, EventArgs e){    ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);    ChangeTextColor(Light[ThemeColor.Text]);}

6. Vuelva al diseñador y haga clic en los botones "Naturaleza" y "Oscuridad". Utilice las funciones ChangeTheme() y ChangeTextColor() en sus controladores de eventos tambié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]);}

7. De forma predeterminada, el tema debe establecerse en el tema "Ligero" cuando el usuario abre la aplicación por primera vez. En el constructor, debajo de los diccionarios, use las funciones ChangeTheme() y ChangeTextColor().

   ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]);ChangeTextColor(Light[ThemeColor.Text]);

8. Ejecute la aplicación haciendo clic en el botón verde de reproducción en la parte superior de la ventana de Visual Studio.

9. De manera predeterminada, la aplicación usa el tema "Light" y aplica el esquema de color gris a los controles de la interfaz de usuario. Alterne el botón de temas para ver la lista de temas.

10. Haga clic en el tema Naturaleza.

11. Haga clic en el tema oscuro.

Creación de aplicaciones usando Windows Forms

Muchas aplicaciones permiten al usuario cambiar entre varios temas. Puede agregar temas a una aplicación de Windows Forms creando opciones para que el usuario seleccione.

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.

Los colores de cada uno de los temas utilizan los colores integrados de Visual Studio. Deberá utilizar un esquema de color adecuado para brindar a los usuarios una mejor experiencia. Puede obtener más información sobre las diferentes formas en que puede elegir un esquema de color para su aplicación.