IU Moderno, Menú Desplegable/Deslizante, Menú Lateral, Responsivo, Only Form – C#, VB.Net, WinForm

Versión actualizada…Solo para vídeo tutorial en C#

«Se eliminó el metodo customizeDesign() y se modificó el método hideSubmenu(), Ver punto 3, el vídeo tutorial en visual basic está basada en este articulo, no tiene cambios»

……..

Hola, en esta oportunidad crearemos otra interfaz de usuario plano y moderno, con menú lateral, menús desplegables, la opción de abrir un único formulario en un panel, y cómo hacer una interfaz de usuario responsivo, o adaptable a cualquier tamaño, por ejemplo, el logo siempre debe permanecer en el centro del formulario a pesar de redimensionarlo, de igual manera con los controles de usuario, como: Datagridview, cuadros de texto, botones, etiquetas, entre otros. Para lograr una interfaz de usuario responsivo, o adaptable a cualquier tamaño, Simplemente es necesario establecer la propiedad ANCHOR o DOCK, dependiendo del objetivo que se quiere lograr. También el uso de estas propiedades, es el truco para lograr Menús desplegables y adaptables. En este tutorial les enseñaré la manera más sencilla y rápida, con unas cuantas líneas de código, aplicando lógica e imaginación. Todo ello con Windows Forms, C#, Visual Basic.Net.

Bueno empecemos con el tutorial:

1. Crear proyecto de aplicación de Windows Forms

En Visual Studio, crea un proyecto de aplicación de Windows Form en Visual C# o Visual Basic,  y asígnele el nombre que desee.

2. Diseñar la Interfaz Gráfica de Usuario

Una vez creado el proyecto, diseñe el Formulario de la siguiente manera, la configuración de las propiedades se describen abajo.

Descripción de las propiedades del formulario y controles de usuario:

3. Crear Método Ocultar submenús

Ahora codificaremos el formulario. Para ello, clic derecho sobre el formulario y seleccionamos ver código, o puedes realizar doble clic sobre el formulario para abrir el código y crear el evento load.

• Creamos un método de tipo vacío de nombre ocultar submenu (hideSubmenu). En este método simplemente ocultaremos todos los paneles de submenú al iniciar la aplicación, o para ocultar el panel submenú que se mostró/abrió previamente. Para ello, establecemos la propiedad visible a falso.

• Invocamos el método en el constructor ( debe ser después del método inicializar componentes), o desde el evento load del formulario. También invocamos el método desde los botones de submenu y botones que no muestran un menú desplegable. Ver punto 7 .

    public Form1()
    {
        InitializeComponent();
        hideSubMenu();
    }

    private void hideSubMenu()
    {
        panelMediaSubMenu.Visible = false;
        panelPlaylistSubMenu.Visible = false;
        panelToolsSubMenu.Visible = false;
    }

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        hideSubmenu()
    End Sub

    Private Sub hideSubmenu()

        PanelMediaSubmenu.Visible = False
        PanelPlaylistSubmenu.Visible = False
        PanelToolsSubmenu.Visible = False

    End Sub

4. Crear Método Mostrar submenú

Creamos otro método de tipo vacío para mostrar el panel submenú.

private void showSubMenu(Panel subMenu)
{
    if (subMenu.Visible == false)
    {
        hideSubMenu();
        subMenu.Visible = true;
    }
    else
        subMenu.Visible = false;
}

    Private Sub showSubmenu(submenu As Panel)

        If submenu.Visible = False Then
            hideSubmenu()
            submenu.Visible = True
        Else
            submenu.Visible = False
        End If

    End Sub

5. Mostrar Panel submenú desde el botón menú desplegable (Botón Principal)

Invocamos el método mostrar submenu (showSubMenu) desde los respectivos botones que tienen paneles de submenú.

private void btnMedia_Click(object sender, EventArgs e)
{
    showSubMenu(panelMediaSubMenu);
}
private void btnPlaylist_Click(object sender, EventArgs e)
{
    showSubMenu(panelPlaylistSubMenu);
}
private void btnTools_Click(object sender, EventArgs e)
{
    showSubMenu(panelToolsSubMenu);
}

    Private Sub btnMedia_Click(sender As Object, e As EventArgs) Handles btnMedia.Click
        showSubmenu(PanelMediaSubmenu)
    End Sub

    Private Sub btnPlaylist_Click(sender As Object, e As EventArgs) Handles btnPlaylist.Click
        showSubmenu(PanelPlaylistSubmenu)
    End Sub

    Private Sub btnTools_Click(sender As Object, e As EventArgs) Handles btnTools.Click
        showSubmenu(PanelToolsSubmenu)
    End Sub

6. Crear Método Abrir formulario hijo en panel contenedor

Creamos un método para abrir los formularios hijos en el panel contenedor. Abriremos un único formulario dentro del panel contenedor. Para ello es necesario cerrar el formulario anterior, entonces necesario almacenar el formulario que se abre en una variable de nombre formulario activo o formulario actual. Si deseas abrir varios formularios dentro del panel, puedes ver este este tutorial en C# o Visual Basic, o puedes modificar este método según tus necesidades.

private Form activeForm = null;
private void openChildFormInPanel(Form childForm)
{
    if (activeForm != null)
        activeForm.Close();
    activeForm = childForm;
    childForm.TopLevel = false;
    childForm.FormBorderStyle = FormBorderStyle.None;
    childForm.Dock = DockStyle.Fill;
    panelChildForm.Controls.Add(childForm);
    panelChildForm.Tag = childForm;
    childForm.BringToFront();
    childForm.Show();
}

    Private currentForm As Form = Nothing
    Private Sub openChildForm(childForm As Form)

        If currentForm IsNot Nothing Then currentForm.Close()
        currentForm = childForm
        childForm.TopLevel = False
        childForm.FormBorderStyle = FormBorderStyle.None
        childForm.Dock = DockStyle.Fill
        PanelChildForm.Controls.Add(childForm)
        PanelChildForm.Tag = childForm
        childForm.BringToFront()
        childForm.Show()

    End Sub

7.-Abrir Formulario hijo y ocultar submenu abierto

private void button2_Click(object sender, EventArgs e)
{
    openChildFormInPanel(new Form2());
    //..
    //your codes
    //..
    hideSubMenu();
}

    Private Sub button2_Click(sender As Object, e As EventArgs) Handles button2.Click

        openChildForm(New Form2())
        '...
        'your codes
        '...
        hideSubmenu()

    End Sub

Eso es todo 🙂

Ver video tutorial

C#

Visual Basic (VB.Net)

Descargas

Ver IU Moderno, Plano, Multi Formulario

C#

Visual Basic .NET