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