Interfaz Gráfico de Usuario Moderno

Interfaz Gráfico de Usuario Moderno, Multi Forms, C#,
VB.Net, WinForm – (RC, Estable)

RJ Code Advance .NET C# Escritorio GUI Visual Basic Windows Forms 25 junio, 2019 | 0
Hola, en este tutorial realizaremos un Formulario de Menú Principal Plano, Moderno y Multi Forms
(Abrir Varios Formularios en un panel, tal como lo harías en un MDI Parent), con todas las
funcionalidades de un formulario normal, totalmente personalizado, con Windows Form, C# o
Visual Basic (VB.Net).
Bien, empecemos con el tutorial:
Paso 1: Crear Proyecto y Formulario de Menú Principal
 Creamos un proyecto nuevo de aplicación de Windows Form en C# o Visual Vasic

(VB.Net).
 Removemos el borde del formulario: Propiedad-> FormBorderStyle=None
 Cambiamos el tamaño al formulario: Propiedad-> Size= 1100; 600
 Asignamos el tamaño mínimo del formulario: Propiedad-> MinimumSize= 680; 500
Paso 2: Crear Función de Redimensionar (Cambiar de Tamaño – Resize) el

Formulario
Al establecer la propiedad FormBorderStyle=None del formulario, este pierde la funcionalidad de

poder cambiar de tamaño, para solucionar el problema, realizamos lo siguiente.
 Agregamos un Panel como Contenedor Principal para otros paneles y formularios.
 Establecemos la propiedad BackColor = ActiveCaption (OPCIONAL)
 Establecemos la propiedad Dock = Fill
 Asignamos un nombre al panel: Name = “PanelContenedor”
 El diseño de debió haber quedado de la siguiente manera:
 Ahora es momento de codificar la funcionalidad de redimensionar el formulario a
través de Panel Contenedor Principal.
FormMenuPrincipal.cs /.vb
 c#
 visual basic
 //Constructor
 public FormMenuPrincipal()
 {
 InitializeComponent();
 //Estas lineas eliminan los parpadeos del formulario o controles en la interfaz grafica (Pero no en un
100%)
 this.SetStyle(ControlStyles.ResizeRedraw, true);
 this.DoubleBuffered = true;
 }
 //RESIZE METODO PARA REDIMENCIONAR/CAMBIAR TAMAÑO A FORMULARIO EN
TIEMPO DE EJECUCION ----------------------------------------------------------
 private int tolerance = 12;
 private const int WM_NCHITTEST = 132;
 private const int HTBOTTOMRIGHT = 17;
 private Rectangle sizeGripRectangle;

 protected override void WndProc(ref Message m)
 {
 switch (m.Msg)
 {
 case WM_NCHITTEST:
 base.WndProc(ref m);
 var hitPoint = this.PointToClient(new Point(m.LParam.ToInt32() & 0xffff, m.LParam.ToInt32() >>
16));
 if (sizeGripRectangle.Contains(hitPoint))
 m.Result = new IntPtr(HTBOTTOMRIGHT);
 break;
 default:
 base.WndProc(ref m);
 break;
 }
 }
 //----------------DIBUJAR RECTANGULO / EXCLUIR ESQUINA PANEL
 protected override void OnSizeChanged(EventArgs e)
 {
 base.OnSizeChanged(e);
 var region = new Region(new Rectangle(0, 0, this.ClientRectangle.Width,
this.ClientRectangle.Height));

 sizeGripRectangle = new Rectangle(this.ClientRectangle.Width - tolerance,
this.ClientRectangle.Height - tolerance, tolerance, tolerance);

 region.Exclude(sizeGripRectangle);
 this.panelContenedor.Region = region;
 this.Invalidate();
 }
 //----------------COLOR Y GRIP DE RECTANGULO INFERIOR
 protected override void OnPaint(PaintEventArgs e)
 {
 SolidBrush blueBrush = new SolidBrush(Color.FromArgb(244, 244, 244));
 e.Graphics.FillRectangle(blueBrush, sizeGripRectangle);

 base.OnPaint(e);
 ControlPaint.DrawSizeGrip(e.Graphics, Color.Transparent, sizeGripRectangle);
 }

Paso 3: Diseñar la Interfaz Gráfica de Menú Principal
 Diseñe la interfaz gráfica de menú principal sobre el Panel Contenedor. La

configuración de las propiedades se describen abajo.
 Establezca las siguientes propiedades en los controles de usuario.
Panel Barra Titulo
BackColor = 0; 100; 182
Dock = Top
Name = «panelBarraTitulo»
Size = 1200; 40
Panel Menú
Name = «panelMenu»
Dock = Left
Size = 240; 560
BackColor = 37; 54; 75
Panel Formularios
BackColor = Control
Dock = Fill
Name = «panelFormularios»
Picture Box Cerrar, Maximizar, Minimizar, Restaurar
Size = 16;16
Cursor = Hand
Anchor = Top | Right (Responsive)
Botones
FlatStyle = Flat
FlatAppearance.BorderSize = 0
Size = 230, 45
Paso 4: Crear Función de Cerrar, Maximizar/Restaurar y Minimizar el formulario
 Creamos los eventos Clic de cada botón, y codificamos de la siguiente manera:
 c#
 visual basic
 private void btnCerrar_Click(object sender, EventArgs e)
 {
 Application.Exit();
 }
 //Capturar posicion y tamaño antes de maximizar para restaurar
 int lx, ly;
 int sw, sh;
 private void btnMaximizar_Click(object sender, EventArgs e)
 {
 lx = this.Location.X;
 ly = this.Location.Y;
 sw = this.Size.Width;
 sh = this.Size.Height;
 btnMaximizar.Visible = false;
 btnRestaurar. Visible = true;
 this.Size = Screen.PrimaryScreen.WorkingArea.Size;
 this.Location = Screen.PrimaryScreen.WorkingArea.Location;
 }

 private void btnRestaurar_Click(object sender, EventArgs e)
 {
 btnMaximizar.Visible = true ;
 btnRestaurar.Visible = false;
 this.Size = new Size(sw,sh);
 this.Location = new Point(lx,ly);
 }

 private void btnMinimizar_Click(object sender, EventArgs e)
 {
 this.WindowState = FormWindowState.Minimized;
 }

Paso 5: Crear Función de Arrastrar el formulario (Drag Form)
 Importamos la librería System.Runtime.InteropServices, y agregamos los siguientes

fragmentos de código.
 c#
 visual basic
 [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.
 c#
 visual basic
 private void panelBarraTitulo_MouseMove(object sender, MouseEventArgs e)
 {
 ReleaseCapture();
 SendMessage(this.Handle, 0x112, 0xf012, 0);
 }
Paso 6: Crear Método para Abrir formularios en el panel Contenedor.
 Creamos el siguiente método que nos permitirá abrir varios formularios dentro del panel

contenedor de formularios.
 c#
 visual basic
 private void AbrirFormulario<MiForm>() where MiForm : Form, new() {
 Form formulario;
 formulario = panelformularios.Controls.OfType<MiForm>().FirstOrDefault();//Busca en la colecion
el formulario
 //si el formulario/instancia no existe
 if (formulario == null)
 {
 formulario = new MiForm();
 formulario.TopLevel = false;
 formulario.FormBorderStyle = FormBorderStyle.None;
 formulario.Dock = DockStyle.Fill;
 panelformularios.Controls.Add(formulario);
 panelformularios.Tag = formulario;
 formulario.Show();
 formulario.BringToFront();
 }
 //si el formulario/instancia existe
 else {
 formulario.BringToFront();
 }
 }

 Invocamos el método anterior de la siguiente manera:

 c#
 visual basic
 private void button1_Click(object sender, EventArgs e)
 {
 AbrirFormulario<Form1>();
 }

 private void button2_Click(object sender, EventArgs e)
 {
 AbrirFormulario<Form2>();
 }

Recomendaciones Finales
Crea los formularios hijos que se abrirán en el panel contenedor de Formulario al mismo tamaño
de este, adicionando las dimensiones del borde. para este ejemplo, el tamaño ideal es: 886 de
ancho; 496 de alto (El tamaño del panel contenedor de Formulario es 870; 457, a este le
sumamos el tamaño de los bordes del form: 16 de ancho, 39 de alto ), de esa manera evitamos
que le formulario parpadee al abrir formularios o redimensionar en tiempo de ejecución.
Eso es todo 🙂
Ver Video Tutorial

C#
Visual Basic (VB .Net)
Descargas
Descargar Proyecto en C#
(GitHub)
Descargar Proyecto en VB
(GitHub)
Ver Tutorial Dashboard/ Gráficos estadísticos







Navegación de entradas
Anterior: Entrada anterior:P2/ Formulario Plano, Sin Bordes y Moderno con Menú animado Efecto Sliding,
One Window, Versión Completa/ C#, WinForm + Pasar Datos entre Forms
Siguiente: Siguiente entrada:¿Cómo pasar datos entre formularios en Visual Basic .Net y Windows Forms?

Interfaz Gráfico de Usuario Moderno

Cargado por

Copyright:

Formatos disponibles

Interfaz Gráfico de Usuario Moderno

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Interfaz Gráfico de Usuario Moderno

Cargado por

Copyright:

Formatos disponibles

Interfaz Gráfico de Usuario Moderno, Multi Forms, C#,

VB.Net, WinForm – (RC, Estable)

Paso 1: Crear Proyecto y Formulario de Menú Principal

 Creamos un proyecto nuevo de aplicación de Windows Form en C# o Visual Vasic

Paso 2: Crear Función de Redimensionar (Cambiar de Tamaño – Resize) el

Al establecer la propiedad FormBorderStyle=None del formulario, este pierde la funcionalidad de

Paso 3: Diseñar la Interfaz Gráfica de Menú Principal

 Diseñe la interfaz gráfica de menú principal sobre el Panel Contenedor. La

Paso 5: Crear Función de Arrastrar el formulario (Drag Form)

 Importamos la librería System.Runtime.InteropServices, y agregamos los siguientes

Paso 6: Crear Método para Abrir formularios en el panel Contenedor.

 Creamos el siguiente método que nos permitirá abrir varios formularios dentro del panel

 Invocamos el método anterior de la siguiente manera:

Ver Video Tutorial

Visual Basic (VB .Net)

Ver Tutorial Dashboard/ Gráficos estadísticos

También podría gustarte