Formulario Moderno+Iconos Font Awesome, WinForm, C# – VB.NET

Hola a todos, hoy os traigo un nuevo tutorial de diseño de interfaces  de usuario, moderno y multicolor, tanto en el botón, texto e iconos, con la opción de mantener resaltado el botón y mostrar el título e icono cuando el formulario secundario está abierto. Además de implementar todas las funcionalidades de redimensionamiento, arrastrar el formulario, maximizar, restaurar, minimizar y cerrar el formulario. Tal vez  se estén preguntando, como es posible cambiar el color de los iconos. Bueno esto es gracias a FONT AWESOME, en resumen general, esta herramienta permite crear iconos basado en vectores a CSS a partir de un formato de fuentes de texto,  estoy seguro que muchos de ustedes lo han usado al crear páginas o aplicaciones web, donde es realmente sencillo colocar iconos con un color y tamaño personalizado. Hay otras fuentes web, Sin embargo, todos son solamente para incluir en páginas web y hojas de estilo. Entonces un día se me ocurrió por qué no integrar en aplicaciones de escritorio, en fin y al cabo son solo fuentes web y podemos convertir a formato de imagen, pero ya otros lo habían pensado, encontré una librería en los paquetes de NUGET, bajo el nombre de FONTAWESOME.SHARP, desarrollado por mkoertgen y ThomasMentzel. Bueno este paquete es es muy interesante, con todas las opciones requeridas, y me gustó la facilidad de agregar iconos con colores y tamaños personalizados en nuestras aplicaciones de escritorio.

Todo ello en lenguaje de C# y Visual Basic .NET con Windows Form.

MainMenu.cs/vb

public partial class FormMainMenu : Form
{
    //Fields
    private IconButton currentBtn;
    private Panel leftBorderBtn;
    private Form currentChildForm;

    //Constructor
    public FormMainMenu()
    {
        InitializeComponent();
        leftBorderBtn = new Panel();
        leftBorderBtn.Size = new Size(7, 60);
        panelMenu.Controls.Add(leftBorderBtn);
        //Form
        this.Text = string.Empty;
        this.ControlBox = false;
        this.DoubleBuffered = true;
        this.MaximizedBounds = Screen.FromHandle(this.Handle).WorkingArea;
    }
    //Structs
    private struct RGBColors
    {
        public static Color color1 = Color.FromArgb(172, 126, 241);
        public static Color color2 = Color.FromArgb(249, 118, 176);
        public static Color color3 = Color.FromArgb(253, 138, 114);
        public static Color color4 = Color.FromArgb(95, 77, 221);
        public static Color color5 = Color.FromArgb(249, 88, 155);
        public static Color color6 = Color.FromArgb(24, 161, 251);

    }

    //Methods
    private void ActivateButton(object senderBtn, Color color)
    {
        if (senderBtn != null)
        {
            DisableButton();
            //Button
            currentBtn = (IconButton)senderBtn;
            currentBtn.BackColor = Color.FromArgb(37, 36, 81);
            currentBtn.ForeColor = color;
            currentBtn.TextAlign = ContentAlignment.MiddleCenter;
            currentBtn.IconColor = color;
            currentBtn.TextImageRelation = TextImageRelation.TextBeforeImage;
            currentBtn.ImageAlign = ContentAlignment.MiddleRight;
            //Left border button
            leftBorderBtn.BackColor = color;
            leftBorderBtn.Location = new Point(0, currentBtn.Location.Y);
            leftBorderBtn.Visible = true;
            leftBorderBtn.BringToFront();
            //Current Child Form Icon
            iconCurrentChildForm.IconChar = currentBtn.IconChar;
            iconCurrentChildForm.IconColor = color;
        }
    }

    private void DisableButton()
    {
        if (currentBtn != null)
        {
            currentBtn.BackColor = Color.FromArgb(31, 30, 68);
            currentBtn.ForeColor = Color.Gainsboro;
            currentBtn.TextAlign = ContentAlignment.MiddleLeft;
            currentBtn.IconColor = Color.Gainsboro;
            currentBtn.TextImageRelation = TextImageRelation.ImageBeforeText;
            currentBtn.ImageAlign = ContentAlignment.MiddleLeft;
        }
    }

    private void OpenChildForm(Form childForm)
    {
        //open only form
        if (currentChildForm != null)
        {
            currentChildForm.Close();
        }
        currentChildForm = childForm;
        //End
        childForm.TopLevel = false;
        childForm.FormBorderStyle = FormBorderStyle.None;
        childForm.Dock = DockStyle.Fill;
        panelDesktop.Controls.Add(childForm);
        panelDesktop.Tag = childForm;
        childForm.BringToFront();
        childForm.Show();
        lblTitleChildForm.Text = childForm.Text;
    }

    private void Reset()
    {
        DisableButton();
        leftBorderBtn.Visible = false;
        iconCurrentChildForm.IconChar = IconChar.Home;
        iconCurrentChildForm.IconColor = Color.MediumPurple;
        lblTitleChildForm.Text = "Home";
    }

    //Events
    //Reset
    private void btnHome_Click(object sender, EventArgs e)
    {
        if (currentChildForm != null)
        {
            currentChildForm.Close();
        }
        Reset();
    }
    //Menu Button_Clicks
    private void btnDashboard_Click(object sender, EventArgs e)
    {
        ActivateButton(sender, RGBColors.color1);
        OpenChildForm(new FormDashboard());
    }

    private void btnOrder_Click(object sender, EventArgs e)
    {
        ActivateButton(sender, RGBColors.color2);
        OpenChildForm(new FormOrders());
    }

    private void btnProduct_Click(object sender, EventArgs e)
    {
        ActivateButton(sender, RGBColors.color3);
        OpenChildForm(new FormProducts());
    }

    private void btnCustomer_Click(object sender, EventArgs e)
    {
        ActivateButton(sender, RGBColors.color4);
        OpenChildForm(new FormCustomers());
    }

    private void btnMarketing_Click(object sender, EventArgs e)
    {
        ActivateButton(sender, RGBColors.color5);
        OpenChildForm(new FormMarketing());
    }

    private void btnSetting_Click(object sender, EventArgs e)
    {
        ActivateButton(sender, RGBColors.color6);
        OpenChildForm(new FormSetting());
    }

    //Drag Form
    [DllImport("user32.DLL", EntryPoint = "ReleaseCapture")]
    private extern static void ReleaseCapture();

    [DllImport("user32.DLL", EntryPoint = "SendMessage")]
    private extern static void SendMessage(System.IntPtr hWnd, int wMsg, int wParam, int lParam);

    private void panelTitleBar_MouseDown(object sender, MouseEventArgs e)
    {
        ReleaseCapture();
        SendMessage(this.Handle, 0x112, 0xf012, 0);
    }

    //Close-Maximize-Minimize
    private void btnExit_Click(object sender, EventArgs e)
    {
        Application.Exit();
    }

    private void btnMaximize_Click(object sender, EventArgs e)
    {
        if (WindowState == FormWindowState.Normal)
            WindowState = FormWindowState.Maximized;
        else
            WindowState = FormWindowState.Normal;
    }

    private void btnMinimize_Click(object sender, EventArgs e)
    {
        WindowState = FormWindowState.Minimized;
    }

    //Remove transparent border in maximized state
    private void FormMainMenu_Resize(object sender, EventArgs e)
    {
        if (WindowState == FormWindowState.Maximized)
            FormBorderStyle = FormBorderStyle.None;
        else
            FormBorderStyle = FormBorderStyle.Sizable;
    }
Imports System.Runtime.InteropServices
Imports FontAwesome.Sharp

Public Class FormMainMenu 
    'Fields'
    Private currentBtn As IconButton
    Private leftBorderBtn As Panel
    Private currentChildForm As Form

    'Constructor'
    Public Sub New()

        ' This call is required by the designer.'
        InitializeComponent()

        ' Add any initialization after the InitializeComponent() call.'
        leftBorderBtn = New Panel()
        leftBorderBtn.Size = New Size(7, 60)
        PanelMenu.Controls.Add(leftBorderBtn)
        'Form'
        Me.Text = String.Empty
        Me.ControlBox = False
        Me.DoubleBuffered = True
        Me.MaximizedBounds = Screen.PrimaryScreen.WorkingArea

    End Sub

    'Methods'
    Private Sub ActivateButton(senderBtn As Object, customColor As Color)
        If senderBtn IsNot Nothing Then
            DisableButton()
            'Button'
            currentBtn = CType(senderBtn, IconButton)
            currentBtn.BackColor = Color.FromArgb(37, 36, 81)
            currentBtn.ForeColor = customColor
            currentBtn.IconColor = customColor
            currentBtn.TextAlign = ContentAlignment.MiddleCenter
            currentBtn.ImageAlign = ContentAlignment.MiddleRight
            currentBtn.TextImageRelation = TextImageRelation.TextBeforeImage
            'Left Border'
            leftBorderBtn.BackColor = customColor
            leftBorderBtn.Location = New Point(0, currentBtn.Location.Y)
            leftBorderBtn.Visible = True
            leftBorderBtn.BringToFront()
            'current Form icon'
            IconCurrentForm.IconChar = currentBtn.IconChar
            IconCurrentForm.IconColor = customColor

        End If
    End Sub

    Private Sub DisableButton()
        If currentBtn IsNot Nothing Then
            currentBtn.BackColor = Color.FromArgb(31, 30, 68)
            currentBtn.ForeColor = Color.Gainsboro
            currentBtn.IconColor = Color.Gainsboro
            currentBtn.TextAlign = ContentAlignment.MiddleLeft
            currentBtn.ImageAlign = ContentAlignment.MiddleLeft
            currentBtn.TextImageRelation = TextImageRelation.ImageBeforeText
        End If
    End Sub

    Private Sub OpenChildForm(childForm As Form)
        'Open only form'
        If currentChildForm IsNot Nothing Then
            currentChildForm.Close()
        End If
        currentChildForm = childForm
        'end'
        childForm.TopLevel = False
        childForm.FormBorderStyle = FormBorderStyle.None
        childForm.Dock = DockStyle.Fill
        PanelDesktop.Controls.Add(childForm)
        PanelDesktop.Tag = childForm
        childForm.BringToFront()
        childForm.Show()
        lblFormTitle.Text = childForm.Text
    End Sub

    Private Sub Reset()
        DisableButton()
        leftBorderBtn.Visible = False
        IconCurrentForm.IconChar = IconChar.Home
        IconCurrentForm.IconColor = Color.MediumPurple
        lblFormTitle.Text = "Home"
    End Sub

    'Events'
    'Reset'
    Private Sub imgHome_Click(sender As Object, e As EventArgs) Handles imgHome.Click
        If currentChildForm IsNot Nothing Then
            currentChildForm.Close()
        End If
        Reset()
    End Sub

   'Menu buttons Cliks'
    Private Sub btnDashboard_Click(sender As Object, e As EventArgs) Handles btnDashboard.Click
        ActivateButton(sender, RGBColors.color1)
        OpenChildForm(New FormDashboard)
    End Sub

    Private Sub btnOrders_Click(sender As Object, e As EventArgs) Handles btnOrders.Click
        ActivateButton(sender, RGBColors.color2)
        OpenChildForm(New FormOrders)
    End Sub

    Private Sub btnProducts_Click(sender As Object, e As EventArgs) Handles btnProducts.Click
        ActivateButton(sender, RGBColors.color3)
        OpenChildForm(New FormProducts)
    End Sub

    Private Sub btnCustomers_Click(sender As Object, e As EventArgs) Handles btnCustomers.Click
        ActivateButton(sender, RGBColors.color4)
        OpenChildForm(New FormCustomers)
    End Sub

    Private Sub btnMarketing_Click(sender As Object, e As EventArgs) Handles btnMarketing.Click
        ActivateButton(sender, RGBColors.color5)
        OpenChildForm(New FormMarketing)
    End Sub

    Private Sub btnSetting_Click(sender As Object, e As EventArgs) Handles btnSetting.Click
        ActivateButton(sender, RGBColors.color6)
        OpenChildForm(New FormSetting)
    End Sub

    'Drag Form'
    <DllImport("user32.DLL", EntryPoint:="ReleaseCapture")>
    Private Shared Sub ReleaseCapture()
    End Sub
    <DllImport("user32.DLL", EntryPoint:="SendMessage")>
    Private Shared Sub SendMessage(ByVal hWnd As System.IntPtr, ByVal wMsg As Integer, ByVal wParam As Integer, ByVal lParam As Integer)
    End Sub

    Private Sub PanelTitleBar_MouseDown(sender As Object, e As MouseEventArgs) Handles PanelTitleBar.MouseDown
        ReleaseCapture()
        SendMessage(Me.Handle, &H112&, &HF012&, 0)
    End Sub

    'Close-Maximize-Minimize'
    Private Sub btnExit_Click(sender As Object, e As EventArgs) Handles btnExit.Click
        Application.Exit()
    End Sub

    Private Sub btnMaximize_Click(sender As Object, e As EventArgs) Handles btnMaximize.Click
        If WindowState = FormWindowState.Normal Then
            WindowState = FormWindowState.Maximized
        Else
            WindowState = FormWindowState.Normal
        End If
    End Sub

    Private Sub btnMinimize_Click(sender As Object, e As EventArgs) Handles btnMinimize.Click
        WindowState = FormWindowState.Minimized
    End Sub

    'Remove transparent border in maximized state'
    Private Sub Form1_Resize(sender As Object, e As EventArgs) Handles MyBase.Resize
        If WindowState = FormWindowState.Maximized Then
            FormBorderStyle = FormBorderStyle.None
        Else
            FormBorderStyle = FormBorderStyle.Sizable
        End If
    End Sub

End Class

'............................................'
Public Structure RGBColors
    Public Shared color1 As Color = Color.FromArgb(172, 126, 241)
    Public Shared color2 As Color = Color.FromArgb(249, 118, 176)
    Public Shared color3 As Color = Color.FromArgb(253, 138, 114)
    Public Shared color4 As Color = Color.FromArgb(95, 77, 221)
    Public Shared color5 As Color = Color.FromArgb(249, 88, 155)
    Public Shared color6 As Color = Color.FromArgb(24, 161, 251)
End Structure

Ver Vídeo Tutorial

C#

VB .NET

28 comentarios en «Formulario Moderno+Iconos Font Awesome, WinForm, C# – VB.NET»

  1. ola buenos días, antes que nada agradecer por tus videos ya que son de gran ayuda y aporte a la comunidad de vb, bueno quisiera proponer que isieras un proyecto en donde podamos enviar mensajes por WhatsApp desde nuestra apliacion en vb, ya que esto esta de moda hoy en día y es de mucha importancia tener algo asi integrado en nuestros proyectos, Gracias.

  2. hola gracias por tus videos tutoriales son los mejores que he visto en el internet (Mi Criterio Personal), necesito que si puedes hagas un tutorial como abrir documentos pdf en un formulario, pero ojo que ya este en los recursos del formulario,ejemplo que cuando le de clic a un label por ejemplo se abra el documento pdf en el formulario, de antemano muchas gracias…..

  3. Hello,
    Thanks for this tutorial, Someone has project files for this ? In VB.Net
    And would like to make a request for a job to make and finish my ACARS Project.
    With this UI Forms Thanks
    Regards Fred

  4. Hola RJ. Te felicito por el tutorial, me estoy iniciando en programación y realmente lo explicas muy fácil. Pero tengo un problema cuando hago clic en alguno de los botones.
    System.NullReferenceException
    HResult=0x80004003
    Mensaje = Referencia a objeto no establecida como instancia de un objeto.
    Origen = Comisiones
    Seguimiento de la pila:
    at Comisiones.frmMenuPrincipal.ActivateButton(Object senderBtn, Color customColor) in frmMenuPrincipal.vb:line 34
    ——> esta es la linea 34 (leftBorderBtn.BackColor = customColor)
    Gracias por la ayuda.

  5. Pingback: Google

  6. Pingback: Google

  7. Buenas crack saludos una pregunta me gustaria saber que libreria utilizaste para poner la parte donde plasmas codigo el cuadro negro que queda estilo github saludos crack desde chihuahua mexico

  8. You’re so interesting! I don’t think I have read through anything like that before.
    So good to find someone with a few genuine thoughts on this subject
    matter. Seriously.. many thanks for starting this up.
    This site is something that’s needed on the web, someone
    with a little originality!

  9. Can I simply just say what a relief to uncover someone who truly understands what
    they’re talking about on the internet. You definitely understand how to bring a problem to light
    and make it important. More and more people need to check this out and understand
    this side of your story. I was surprised that you aren’t more popular since you definitely possess the gift.

  10. Hi, i read your blog from time to time and i own a similar
    one and i was just wondering if you get a lot of spam comments?
    If so how do you reduce it, any plugin or anything
    you can recommend? I get so much lately it’s driving me crazy so any assistance is very much appreciated.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *