Cómo usar los controles de diseño con estilo Material en tu aplicación C# WinForms

Todo el mundo ama Material Design, el diseño integral que se utiliza como guía para el diseño visual, de movimiento y de interacción en plataformas y dispositivos. Aunque el diseño de materiales se utiliza específicamente en el sistema operativo Android y otros productos de Google, puede seguir utilizando el diseño como desee y donde quiera.

Para usar material design en sus aplicaciones WinForms, puede usar la biblioteca MaterialSkin para agregar un tema a .NET WinForms, C # o VB.Net con los Principios de diseño de materiales de Google. Esta biblioteca sigue las pautas definidas en la especificación de diseño de materiales y utiliza los mismos componentes y funcionalidades.

1. Instale MaterialSkin 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:

Solution explorer nuget packages

En la ventana emergente, vaya a la pestaña Examinar y busque MaterialSkin, seleccione el paquete (con la última versión, a saber, MaterialSkin actualizado) en la lista e instálelo en su proyecto:

Nota

Según la versión de .NET Framework que esté utilizando, deberá descargar una versión específica del complemento. Por ejemplo, el paquete MaterialSking.Updated requiere al menos .NET Framework 4.6.2.

Material Skin WinForms c#

Una vez finalizada la instalación del paquete, podrá trabajar con el Material Design en su proyecto. Visite el repositorio oficial en Github para obtener más información sobre esta biblioteca .

2. Agregar controles de material a la caja de herramientas de controles

Con MaterialSking 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 esta biblioteca. 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 Controles de material:

Material Controls Toolbox Tab

Luego haga clic derecho en la pestaña personalizada que ha creado (Metro Controls) y seleccione Elegir elementos en el menú:

Material Controls Toolbox

En la nueva ventana, vaya a la pestaña Componentes de .NET Framework y haga clic en Examinar:

WinForms MetroFramework Select Components

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 MaterialSking, luego en lib. Dentro de la carpeta lib debería haber un archivo dll, selecciónelo y haga clic en abrir:

Material Controls DLL file

Luego aparecerá una barra de carga y los controles aparecerán en la lista de componentes .NET, finalmente haga clic en Aceptar:

Material Controls List

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:

Material Controls WinForms

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. Establecer estilo de material

Hasta el paso anterior, ahora puede arrastrar y soltar elementos en su formulario fácilmente como lo hace con los controles típicos de .NET. Sin embargo, si desea proporcionar un estilo de material a todo su formulario (no solo a los elementos dentro del formulario), deberá modificar el código de su formulario.

Comience importando los espacios de nombres de MaterialSkin en la parte superior de su clase:

using MaterialSkin;
using MaterialSkin.Controls;

Entonces podrás cambiar el tipo de tu formulario. Por lo general, la declaración de su formulario es del Formtipo class Form1 : Form, por ejemplo , pero si lo desea con Material Style, debe cambiar el tipo Form MaterialForm:

namespace Sandbox
{   
    public partial class Form1 : MaterialForm
    {

  // ... //

  // ... //

  // ... //

Ahora, en la función constructora de su clase, en este caso Form1, debajo de la función InitializeComponent, agregue algún código para usar el Material Skin en lugar del predeterminado y cambie la paleta de colores del formulario:

public Form1()
{
    InitializeComponent();

    // Cree un administrador de temas de materiales y agregue el formulario para administrar (this)
    MaterialSkinManager materialSkinManager = MaterialSkinManager.Instance;
    materialSkinManager.AddFormToManage(this);
    materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;

    // Configurar esquema de color
    materialSkinManager.ColorScheme = new ColorScheme(
        Primary.Blue400, Primary.Blue500,
        Primary.Blue500, Accent.LightBlue200, 
        TextShade.WHITE
    );
}

Como puede ver, la implementación de controles personalizados para WinForms es bastante fácil. ¡Guarde los cambios y ejecute su formulario para ver qué sucede!

4. Ejemplo

El siguiente ejemplo muestra cómo crear un formulario con estilo de material en su formulario principal en un proyecto simple de WinForms:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

// Importar el skin Material
using MaterialSkin;
using MaterialSkin.Controls;

namespace Sandbox
{
    public partial class Form1 : MaterialForm
    {
        public Form1()
        {
            InitializeComponent();

            // Cree un administrador de temas de materiales y agregue el formulario para administrar (this)
            MaterialSkinManager materialSkinManager = MaterialSkinManager.Instance;
            materialSkinManager.AddFormToManage(this);
            materialSkinManager.Theme = MaterialSkinManager.Themes.LIGHT;

            // Configurar esquema de color
            materialSkinManager.ColorScheme = new ColorScheme(
                Primary.Blue400, Primary.Blue500,
                Primary.Blue500, Accent.LightBlue200,
                TextShade.WHITE
            );
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

El código anterior generaría la siguiente forma:

Material Form C#

Luego, simplemente puede arrastrar y soltar algunos controles de la caja de herramientas creada en el paso 2 y crear formularios increíbles:

Material Controls C# WinForms

Para obtener más información o leer los documentos de la biblioteca, le recomendamos que visite el repositorio oficial de Github aquí . Aunque este proyecto ya no se encuentra en desarrollo activo, está bien hecho y tiene muchos componentes útiles y las contribuciones aún son bienvenidas. Además, es probable que la comunidad aún te ayude si abres un problema.

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable