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

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 u 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.

ver una película con un amigo en línea

MAKEUSEOF VÍDEO DEL DÍA

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.

Crear un nueva aplicación de formularios de Windows en Visual Studio.
En el nuevo proyecto, use la caja de herramientas para buscar un control de botón.
Selecciona el botón de control y arrástrelo al lienzo. Agregue un total de tres controles de botón.
Con la caja de herramientas, haga clic y arrastre un etiqueta de control sobre el lienzo. Coloque la etiqueta debajo de los botones.

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

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'.

Agregue otro control de botón al lienzo para representar el botón de configuración (o 'Temas').
Cambie las propiedades de este botón a lo siguiente:

Nombre btnConfiguración del tema

FlatStyle Plano

Tamaño 200, 120

Texto Temas

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:

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

Haga doble clic en el Temas botón. 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.

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

Ejecute la aplicación haciendo clic en el botón verde de reproducción en la parte superior de la ventana de Visual Studio.
En tiempo de ejecución, la aplicación ocultará los botones de cada uno de los tres temas de forma predeterminada.
Haga clic en el Temas para alternar los temas a mostrar. 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.

En la parte superior del valor predeterminado Formulario1.cs archivo C# y dentro del Forma clase, cree una enumeración global. Esta enumeración almacenará los diferentes tipos de colores que usará en un tema.
```
enum ThemeColor 
{ 
    Primary, 
    Secondary, 
    Tertiary, 
    Text 
}  
```

Debajo, declara tres diccionarios globales, uno para cada uno de los tres temas. Puede leer más sobre 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>();

Dentro del constructor, inicialice los diccionarios. Agregue valores para los diferentes colores que usará cada tema.

public Form1() 
{ 
    InitializeComponent(); 
    // Add dictionaries here 
    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.

Crear una nueva función llamada Cambiar de tema() . La función tomará los colores de un tema como argumentos.

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) 
{ 
    // Change background color of buttons 
    btnThemeSettings.BackColor = primaryColor; 
    button1.BackColor = primaryColor; 
    button2.BackColor = secondaryColor; 
    button3.BackColor = secondaryColor; 
    this.BackColor = tertiaryColor; 
}

Crear una nueva función llamada CambiarColorTexto() . Puede usar esto para cambiar el color del texto entre oscuro y claro. Esto es para garantizar que el texto sobre un fondo oscuro siga siendo legible.

private void ChangeTextColor(Color textColor) 
{ 
    // Change color of text 
    button1.ForeColor = textColor; 
    button2.ForeColor = textColor; 
    button3.ForeColor = textColor; 
    label1.ForeColor = textColor; 
    btnThemeSettings.ForeColor = textColor; 
}

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.

Dentro del controlador de eventos, use el Cambiar de tema() y CambiarColorTexto() funciones 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]); 
}

Vuelva al diseñador y haga clic en los botones 'Naturaleza' y 'Oscuro'. Utilizar el Cambiar de tema() y CambiarColorTexto() también funciona en sus controladores de eventos.

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

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 el Cambiar de tema() y CambiarColorTexto() funciones.
```
ChangeTheme(Light[ThemeColor.Primary], Light[ThemeColor.Secondary], Light[ThemeColor.Tertiary]); 
ChangeTextColor(Light[ThemeColor.Text]);
```
Ejecute la aplicación haciendo clic en el botón verde de reproducción en la parte superior de la ventana de Visual Studio.
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.
Haga clic en el tema Naturaleza.
Haz 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.

Nombre	btnConfiguración del tema
FlatStyle	Plano
Tamaño	200, 120
Texto	Temas