Cómo Diseñar un Menú Moderno en C#, GUI Design

Cómo Diseñar un Menú Moderno en C#, GUI Design

Una parte imperativa de la interfaz de usuario en una aplicación basada en Windows es el menú. A continuación, veremos cómo diseñar un menú moderno simple.

1. Crear un Nuevo Proyecto tipo Aplicación de Windows Forms

Debemos de crear un nuevo proyecto o en todo caso utilizar uno existente, en este caso en el lenguaje de programación C#.

2. Diseñar el Aspecto del Formulario

Una vez creada nuestro proyecto, ahora nos toca personalizar el aspecto que tendrá nuestro formulario. En este diseño se utiliza paneles, botones, labels, iconos y un timer para mostrar la fecha y la hora.

Menú Moderno

Propiedades de cada Objeto del Formulario:

Formulario

FormBorderStyle: None

Size: 960; 480

StartPosition: CenterScreen


Primer Panel (principal)

BackColor: Control

Dock: Fill


Panel Lateral

BackColor: 29; 34; 39

Dock: Left

Size: 230; 517 (modificar solo el width)


Panel Top - Superior

BackColor: 214; 61; 92

Dock: Top

Size: 730; 80 (modificar solo el height)


Panel Bottom

BackColor: 55; 61; 69

Dock: Bottom

Size: 730; 50 (modificar solo el height)


Panel Contenedor

Anchor: Top, Bottom, Left, Right

BackColor: 64; 69; 76

Location: 236; 86

Size: 712; 375

Botones

BackColor: 29; 34; 39

Cursor: Hand

OnHoverColor: 64; 69; 76 (solo para botones de la librería Bunifu o Guna)

TextAlign: MiddleRight

Font: Roboto; 12pt

ForeColor: White

Location: 12; 180

Size: 213; 48


Botones para Control del Formulario

Anchor: Top, Right

Cursor: Hand

Location: 634; 23

Size: 24; 24

Text: ""


Perfil Usuario (PictureBox)

Location: 12; 12

Size: 70; 70


Boton Editar Perfil

BackColor: 29; 34; 39

Size: 213; 41


3. Código del Formulario

//METODO MAXIMIZAR AL INICIAR 
private void MaximizarFormulario()
{
	lx = Location.X;
	ly = Location.Y;
	sw = Size.Width;
	sh = Size.Height;

	Size = Screen.PrimaryScreen.WorkingArea.Size;
	Location = Screen.PrimaryScreen.WorkingArea.Location;

	BtnMaximizar.Visible = false;
	BtnRestaurar.Visible = true;
}

//VARIABLES Y METODOS PARA LA REDIMENSION DEL FORMULARIO
private const int tamañogrid = 10;
private const int areamouse = 132;
private const int botonizquierdo = 17;
private Rectangle rectangulogrid;

int lx, ly;
int sw, sh;

//MODIFICAMOS EL PANEL PRINCIPAL UNA PARTE DE SU TAMAÑO PARA DIBUJAR UNA REGION EL CUAL NOS AYUDARÁ A REDIMENSIONAR EL FORMULARIO
protected override void OnSizeChanged(EventArgs e)
{
	base.OnSizeChanged(e);
	var region = new Region(new Rectangle(0, 0, ClientRectangle.Width, ClientRectangle.Height));
	rectangulogrid = new Rectangle(ClientRectangle.Width - tamañogrid, ClientRectangle.Height - tamañogrid, tamañogrid, tamañogrid);
	region.Exclude(rectangulogrid);
	PnPrincipal.Region = region;
	Invalidate(); 
}

//AQUÍ DIBUJAMOS EN ESA PARTE EXCLUIDA DEL PANEL
protected override void WndProc(ref Message sms)
{
	switch (sms.Msg)
	{
		case areamouse:
			base.WndProc(ref sms);
			var RefPoint = PointToClient(new Point(sms.LParam.ToInt32() & 0xffff, sms.LParam.ToInt32() >> 16));
			if (!rectangulogrid.Contains(RefPoint))
			{
				break;
			}
			sms.Result = new IntPtr(botonizquierdo);
			break;
		default:
			base.WndProc(ref sms);
			break;
	}
}

//AQUÍ ESTABLECEMOS UN COLOR A LA REGION EXCLUIDA
protected override void OnPaint(PaintEventArgs e)
{
	SolidBrush solidBrush = new SolidBrush(Color.FromArgb(55, 61, 69)); //COLOR EN FORMATO ARGB
	e.Graphics.FillRectangle(solidBrush, rectangulogrid);
	base.OnPaint(e);
	ControlPaint.DrawSizeGrip(e.Graphics, Color.Transparent, rectangulogrid);
}

//METODO PARA ABRIR FORMULARIOS EN EL PANEL CONTENEDOR
private void AbrirFormularios() where FormularioAbrir:Form, new()
{
	Form Formularios;

	Formularios = PanelContenedor.Controls.OfType().FirstOrDefault();

	if (Formularios == null)
	{
		Formularios = new FormularioAbrir
		{
			TopLevel = false,
			Dock = DockStyle.Fill
		};

		PanelContenedor.Controls.Add(Formularios);

		PanelContenedor.Tag = Formularios;

		Formularios.Show();

		Formularios.BringToFront();
	}
	else
	{
		Formularios.BringToFront();
	}
}

private void FrmMenu_Load(object sender, EventArgs e)
{
	MaximizarFormulario(); //PARA QUE EL FORMULARIO INICIE MAXIMIZADO
}

private void BtnCerrar_Click(object sender, EventArgs e)
{
	if (MessageBox.Show("¿Estás Seguro de Cerrar el Programa?","¡Alerta!", MessageBoxButtons.YesNo)==DialogResult.Yes)
	{
		Application.Exit();
	}
}

private void BtnRestaurar_Click(object sender, EventArgs e)
{
	Size = new Size(sw, sh);
	Location = new Point(lx, ly);

	BtnRestaurar.Visible = false;
	BtnMaximizar.Visible = true;
}

private void BtnMaximizar_Click(object sender, EventArgs e)
{
	lx = Location.X;
	ly = Location.Y;
	sw = Size.Width;
	sh = Size.Height;

	Size = Screen.PrimaryScreen.WorkingArea.Size;
	Location = Screen.PrimaryScreen.WorkingArea.Location;

	BtnMaximizar.Visible = false;
	BtnRestaurar.Visible = true;
}

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

//EN EL EVENTO DEL TIMER HACEMOS INSTANCIA A LOS LABELS PARA MOSTRAR LA HORA Y LA FECHA (EL TIMER EN SU PROPIEDAD ENABLED=TRUE)
private void Tiempo_Tick(object sender, EventArgs e)
{
	LblHora.Text = DateTime.Now.ToShortTimeString();
	LblFecha.Text = DateTime.Now.ToShortDateString();
}

private void BtnClientes_Click(object sender, EventArgs e)
{
	AbrirFormularios(); //HACEMOS INSTANCIA AL MÉTODO ABRIR FORMULARIOS PARA MOSTRAR EN EL CONTENEDOR
}

private void BtnUsuarios_Click(object sender, EventArgs e)
{
	AbrirFormularios();
}

Para obtener más información, a continuación, puedes ver el video tutorial. ¡Feliz codificación!


Ver video tutorial


Comparte este artículo con tus amigos:

Post Relacionados


Comentarios

Me encantaría saber tu opinión sobre el contenido.