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 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.
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:
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".
- 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 de la propiedad Nuevo valor 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:
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 - 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.
privadovacíobtnThemeSettings_Click(remitente del objeto, EventArgs e)
{
btnNatureTheme. Visible = !btnNatureTheme. Visible;
btnLightTheme. Visible = !btnLightTheme. Visible;
btnTema oscuro. 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 utilizará en un tema.
enumeración Color del tema
{
Primario,
Secundario,
Terciario,
Texto
} - 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#.
Diccionario<TemaColor, Color> Luz = nuevo Diccionario<TemaColor, Color>();
Diccionario<TemaColor, Color> Naturaleza = nuevo Diccionario<TemaColor, Color>();
Diccionario<TemaColor, Color> Oscuro = nuevo Diccionario<TemaColor, Color>(); - Dentro del constructor, inicialice los diccionarios. Agregue valores para los diferentes colores que usará cada tema.
público Formulario 1()
{
InicializarComponente();
// Añadir diccionarios aquí
Luz = nuevo Diccionario<TemaColor, Color>() {
{ Color del tema. Color primario. Humo blanco },
{ Color del tema. Color secundario. Plata },
{ Color del tema. Terciario, Color. Blanco },
{ Color del tema. Color de texto. Negro }
};
Naturaleza = nuevo Diccionario<TemaColor, Color>() {
{ Color del tema. Color primario. verdemaroscuro},
{ Color del tema. Color secundario. Alice azul },
{ Color del tema. Terciario, Color. Gotas de miel },
{ Color del tema. Color de texto. Negro }
};
Oscuro = nuevo Diccionario<TemaColor, Color>() {
{ Color del tema. Color primario. DimGray},
{ Color del tema. Color secundario. DimGray},
{ Color del tema. Terciario, Color. Negro },
{ Color del tema. Color de texto. Blanco }
};
}
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.
privadovacíoCambiar de tema(Color primarioColor, Color secundarioColor, Color terciarioColor)
{
// Cambia el color de fondo de los botones
btnConfiguración del tema. BackColor = colorprimario;
button1.BackColor = colorprincipal;
button2.BackColor = colorsecundario;
button3.BackColor = colorsecundario;
este.BackColor = colorterciario;
} - 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 aún se pueda leer.
privadovacíoCambiarColorTexto(Color textoColor)
{
// Cambio color detexto
button1.ForeColor = textColor;
button2.ForeColor = textColor;
button3.ForeColor = textColor;
etiqueta1.ForeColor = textColor;
btnConfiguración del tema. 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".
privadovacíobtnLightTheme_Click(remitente del objeto, EventArgs e)
{
Cambiar de tema(Luz[Color del tema. Primario], Luz[Color del tema. Secundario], Luz[Color del tema. Terciario]);
CambiarColorTexto(Luz[Color del tema. Texto]);
} - Vuelva al diseñador y haga clic en los botones "Naturaleza" y "Oscuro". Utilizar el Cambiar de tema() y CambiarColorTexto() funciones en sus controladores de eventos también.
privadovacíobtnNatureTheme_Click(remitente del objeto, EventArgs e)
{
Cambiar de tema(Naturaleza[Color del tema. Primario], Naturaleza[Color del tema. Secundario], Naturaleza[Color del tema. Terciario]);
CambiarColorTexto(Naturaleza[Color del tema. Texto]);
}
privadovacíobtnDarkTheme_Click(remitente del objeto, EventArgs e)
{
Cambiar de tema(Oscuro[Color del tema. Primario], Oscuro[Color del tema. Secundario], Oscuro[Color del tema. Terciario]);
CambiarColorTexto(Oscuro[Color del tema. Texto]);
} - 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
Cambiar de tema(Luz[Color del tema. Primario], Luz[Color del tema. Secundario], Luz[Color del tema. Terciario]);
CambiarColorTexto(Luz[Color del tema. Texto]); - 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.
