Hasta la fecha, no hay muchas soluciones para crear interfaces de usuario dinámicas en una aplicación de escritorio para Windows usando herramientas como WinForms. La forma más conocida de hacerlo es implementando CefSharp para poder diseñar tu interfaz usando HTML, CSS y JavaScript. Sin embargo, no todos pueden simplemente agregar más de 50 MB al tamaño del proyecto implementando CefSharp para usar controles HTML personalizados en sus proyectos . Para aquellos que aún desean implementar controles personalizados y hacer que se vean mejor de lo que son por defecto, todavía hay una solución increíble para no aumentar considerablemente el tamaño de su proyecto y usar controles personalizados.
Estamos hablando de MetroFramework, este marco de interfaz de usuario trae el alias Metro UI moderno de Windows 8 a cualquier aplicación .NET Windows Forms. Este marco agrega componentes con estilo Metro como:
- Botón
- Caja combo
- Caja
- Boton de radio
- Palanca
- Etiqueta
- Enlace
- Panel
- Barra de desplazamiento
- MetroTile
- Barra de progreso
- ProgressSpinner
- TabControl
- Barra de seguimiento
- Control de usuario personalizado
- Menú de contexto
- Caja de mensaje
- DateTimePicker
- Cuadrícula
Si sabe cómo configurarlo, podrá simplemente arrastrar y soltar los elementos en su formulario fácilmente y agregar la biblioteca como referencia para usarla en su aplicación en cualquier lugar. En este artículo te vamos a enseñar precisamente esto.
1. Instale el marco a través de NuGet
La forma preferida de instalación es a través de NuGet. Instale el paquete con Visual Studio, accediendo al administrador de paquetes NuGET. Haga clic derecho en su proyecto en el Explorador de soluciones en la parte superior derecha de Visual Studio y seleccione Administrar paquetes NuGet en el menú desplegable:
En la ventana emergente, ve a la pestaña Examinar y busca metromodernui, selecciona el paquete en la lista e instálelo en su proyecto:
Una vez que finalice la instalación, podrá utilizar las bibliotecas dinámicas incluidas en el paquete. Para obtener más información sobre esta biblioteca, visite el repositorio oficial en Github aquí .
2. Cree una nueva pestaña para los controles de Metro en la caja de herramientas
Con MetroFramework podrá arrastrar y soltar controles en sus formularios de la misma manera que lo hace con los controles tradicionales. Para organizarse, le recomendamos que cree una pestaña de caja de herramientas personalizada para almacenar dentro de los controles exclusivos de MetroFramework. Haga clic derecho en un espacio vacío de la Caja de herramientas y desde el menú desplegable seleccione Agregar pestaña , esto le permitirá crear una pestaña vacía y darle un nombre personalizado, en este caso lo llamaremos Metro Controls:
Luego haga clic derecho en la pestaña personalizada que ha creado (Metro Controls) y seleccione Elegir elementos en el menú:
En la nueva ventana, vaya a la pestaña Componentes de .NET Framework y haga clic en Examinar:
Una vez que aparezca el navegador de archivos, deberá navegar a la carpeta de su proyecto WinForms, luego dentro de la carpeta de paquetes busque la carpeta MetroModernUI, luego en lib y finalmente en net. Dentro de la carpeta de red debe haber 3 archivos .dll, solo seleccionará el archivo MetroFramework.dll y hará clic en abrir.
Luego aparecerá una barra de carga y los controles aparecerán en la lista de componentes .NET, finalmente haga clic en Aceptar:
De forma predeterminada, se seleccionarán todos los componentes, sin embargo, puede deseleccionar el que no desea. Finalmente los controles aparecerán en la pestaña de Controles previamente creada:
Y podrá simplemente arrastrar y soltar los controles que necesita en su formulario de la misma manera que lo hace con los componentes predeterminados de Windows.
3. Agregue referencias a los controles y fuentes de Metro
Con el paso anterior, puede arrastrar y soltar componentes y trabajar con ellos en su proyecto, sin embargo, si decide implementar su proyecto en otra computadora, no funcionará porque esos componentes no existen allí. Por lo tanto, debe agregar la referencia a los archivos DLL de MetroFramework en su proyecto para poder usarlos en todas partes.
Vaya al explorador de soluciones en el área superior derecha de Visual Studio, haga clic derecho en su proyecto, luego en el menú Agregar y luego en Referencia:
En la ventana emergente, busque la pestaña Examinar y luego haga clic en el botón Examinar. Una vez más, como hicimos anteriormente en el Paso 2, busque la carpeta net dentro de la carpeta MetroModern en los paquetes y seleccione los 3 archivos dll:
Haga clic en Agregar y luego en la ventana Administrador de referencias seleccione Aceptar. Luego, en las referencias de su proyecto, deberían aparecer las 3 referencias a los archivos DLL:
¡Ahora puedes hacer lo que quieras con este marco!
4. Uso del framework
Aunque la mayoría de las funcionalidades funcionan de la misma manera, si desea trabajar con código directamente desde el marco, por ejemplo, los cuadros de alerta, deberá importar los espacios de nombres requeridos en la parte superior de su clase:
using MetroFramework.Forms;
using MetroFramework;Por ejemplo, puede agregar un botón con el constructor visual en su formulario, luego hacer doble clic en él y el evento de clic se agregará automáticamente de la misma manera que lo hace con los controles predeterminados. Ahora, en el evento de clic, puede mostrar un Metro Box usando:
MetroMessageBox.Show(this, "Your message here.", "Title Here", MessageBoxButtons.OKCancel, MessageBoxIcon.Hand);Y mostrará un cuadro de mensaje con estilo metro:
Para más información te recomendamos leer la documentación en el blog oficial del autor de la biblioteca o consultar el repositorio oficial en Github aquí .
Que te diviertas ❤️!
Conviertete en un programador más sociable