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
Los comentarios están cerrados.