GUI Parte 1/ Diseñar Formulario Moderno + Sub Menú con C# y Windows Form – Versión Básica (Beta)

Hola, en esta oportunidad realizaremos un Formulario de Menú Principal Moderno, Plano, sin bordes + Sub-Menú, con Windows Form y C# en Visual Studio.

Bien, empecemos con el tutorial:

Paso 1: Diseñar Formulario Menú Principal

Diseñe la interfaz gráfica de usuario para el menú principal de la siguiente manera, o puedes hacer el diseño que desees. La configuración de las propiedades se describen abajo.

Establezca las siguientes propiedades del form y controles.

Formulario

FormBorderStyle = None
Size= 1300, 650

Panel Barra Titulo

BackColor = 0; 80; 200
Dock = Top
Name = «BarraTitulo»
Size = 1300; 38

Panel Menú

Name = «MenuVertical»
Dock = Left
Size = 220; 612
BackColor = 26; 32; 40

Panel Contenedor

BackColor = 49; 66; 82
Dock = Fill
Name = «panelContenedor»

Picture Box: Cerrar, Maximizar, Minimizar, Restaurar

Size = 25;25
Cursor = Hand
Anchor = Top | Right (Responsive)

Botones

FlatStyle = Flat
FlatAppearance.BorderSize = 0
FlatAppearance.MouseOverBackColor = 0; 80; 200
Size = 217; 32

Panel Sub Menú

Name=»SubmenuReportes»
Size= 179;100
Visible= False //Para mantener oculto el sub menú

Botones Sub Menú

FlatStyle = Flat
FlatAppearance.BorderSize = 0
FlatAppearance.MouseOverBackColor = 0; 80; 200
Size = 176; 28

Paso 2: Agregar Funcionalidad de Arrastrar el formulario (Drag Form)

Importamos la librería System.Runtime.InteropServices, y agregamos los siguientes fragmentos de código.

        [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);

Creamos el evento MouseDown del Panel Barra de Titulo, e invocamos los métodos anteriores creados.

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

Paso 3: Crear Funcionalidades de Cerrar, Maximizar/Restaurar y Minimizar el formulario.

Creamos los eventos Clic de cada botón, y codificamos de la siguiente manera:

        private void btnCerrar_Click(object sender, EventArgs e)
        {
            Application.Exit();
        }

        private void btnMaximizar_Click(object sender, EventArgs e)
        {
            this.WindowState = FormWindowState.Maximized;
            btnMaximizar.Visible = false;
            btnRestaurar.Visible = true;
        }

        private void btnRestaurar_Click(object sender, EventArgs e)
        {
            this.WindowState = FormWindowState.Normal;
            btnRestaurar.Visible = false;
            btnMaximizar.Visible = true;
        }

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

Paso 4: Mostrar/Ocultar Sub-Menú

Creamos el evento click del botón de reportes y simplemente establecemos la propiedad visible a verdadero del panel Sub Menú para mostrar el Sub Menú.

        private void btnReportes_Click(object sender, EventArgs e)
        {
            SubmenuReportes.Visible = true;
        }

Creamos el evento click de cualquier botón del Sub menu y volvemos a ocultar el panel sub menú.

        private void btnrptventa_Click(object sender, EventArgs e)
        {
            //Inserta los códigos que desees antes de ocultar el sub-menu
            SubmenuReportes.Visible = false;
        }