Guía 08 - Cómo usar Winforms Modern UI Metro Framework en C

Vista previa del material en texto

UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 1 
 
 
 
 
 
 
 
 
 
 
Tema: 
 
 
 
 El entorno de desarrollo de Visual Studio .NET. 
 Manejo de variables y estructuras de datos. 
 Funciones, subrutinas y procedimientos y bucles. 
 Desarrollo de componentes de Visual C# 
 Acceso a datos 
 
 
 
 Desarrollar aplicaciones bajo el ambiente de Visual Studio.NET a través de la 
Interface de desarrollo para la creación de objetos y programas, utilizando 
herramientas selectivas y de control según este lenguaje de programación. 
 
 
 
a) Utilizar la interface de desarrollo de Visual Studio.NET con sus barras de 
herramientas, cinta de opciones y botones especiales para construir proyectos de 
software. 
b) Crear aplicaciones utilizando funciones, estructuras condicionales, estructuras de 
decisión múltiple y estructuras de bucles con operadores aritméticos y lógicos. 
c) Diferenciar los conceptos de métodos, funciones y propiedades además de 
excepciones como parte de los componentes de desarrollo de Visual Basic. 
d) Establecer conexiones de aplicaciones a bases de datos mediante la gestión de 
datos. 
 
 
 
Para la realización de la práctica se requiere lo siguiente: 
1. Computadora con procesador Core I5 
2. Visual Studio.NET 2019, 2022 0 2023 para su equipo. 
3. SQL Server Community o Express. 
4. Conectividad a Internet 
Contenido 
 
Objetivo General 
 
Objetivos Específicos 
 
Material y Equipo 
 
 
Asignatura: PROGRAMACIÓN I 
 
Docente: Ing. Prof. Guillermo Antonio Pérez Mancía 
 
Fecha: 
Ciclo: I-2024 Tiempo: 4 Horas 
 
COMO USAR WINDOWS MODERN UI METRO EN VISUAL C# 
GUÍA # 8 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 2 
 
 
 
 
 
MetroFramework 
Es una Interfaz de usuario moderna de Windows para aplicaciones .NET WinForms 
 
Modern UI es el nombre de la interfaz de usuario, desarrollado por Microsoft, principalmente 
para su uso en Windows Phone. En términos generales, es una interfaz plana, con colores 
básicos y diseños geométricos, con una movilidad horizontal o vertical. 
 
 
 
 
 
Cómo usar Winforms Modern UI Metro Framework en C# 
 
Objetivo: 
 Desarrollar una aplicación en Visual Studio con elementos fundamentales para el 
funcionamiento de aplicaciones Desktop. 
 
Modern UI Metro es una Interfaz de usuario moderna de Windows para aplicaciones .NET 
con plataforma WinForms. Para su desarrollo a continuación se presentan la serie de pasos: 
 
Paso 1: Haga clic en Nuevo proyecto, luego seleccione Visual C# a la izquierda, luego 
Windows y luego seleccione Aplicación de Windows Forms. Nombre su proyecto como 
"MetroUIDemo" y luego haga clic en Aceptar. 
 
Introducción Teórica 
 
Procedimiento 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 3 
 
 
 
Paso 2: Haga clic derecho en su proyecto, seleccione Administrar paquetes NuGet -> 
Buscar metro framework -> Instalar 
 
 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 4 
 
Una vez que haya instalado el software, agregue una referencia a MetroFramework.dll y 
MetroFramework.Design.dll. Este último es para soporte en tiempo de diseño y no necesita 
implementarse, es decir, debe establecer la propiedad "Copy Local" en falso. 
 
Debido al procedimiento de instalación no intrusivo, el soporte para crear su primer 
formulario no es óptimo. El procedimiento recomendado es agregar un nuevo "Windows 
Form" a su proyecto. Luego presione F7 para cambiar a la vista de código y cambie la clase 
base de "Form" a "MetroFramework.Forms.MetroForm". Vuelva a la vista de diseño y 
debería poder agregar más controles de MetroFramework desde la Caja de herramientas 
como de costumbre. 
 
Para instalar los paquetes usando el shell de NuGet, simplemente escriba lo siguiente: 
Install-Package MetroFramework 
 
Paso 3: Diseñe su formulario como se muestra a continuación 
 
frmMain 
 
 
Para buscar iconos, hacemos lo siguiente: 
 
 
Text: Metro Framework 
Name: mPanel 
Control MetroLink 
Icono de Back 
Name: mlBack 
Image buscamos el icono 
buscado 
ImageSize: 32 
Tex: Nada 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 5 
 
 
 
Crear control de usuario de metro. 
 
ucCategory 
Agregamos un nuevo elemento: 
 
 
 
Presionamos F7 para configurar la naturaleza del control. 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 6 
 
 
 
 
 
ucProduct 
Agregamos un nuevo elemento: 
 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 7 
 
 
 
Agregamos un User Control: 
 
 
 
Presionamos F7 para configurar la naturaleza del UI: 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 8 
 
 
 
 
 
 
 
Agregamos un nuevo elemento: 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 9 
 
 
 
 
Modificamos la naturaleza del User Control: 
 
 
 
Agregamos una serie de controles: MetroTile 
 
ucDashboard 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 10 
 
 
 
Haga clic con el botón derecho en su proyecto, seleccione Agregar -> Nuevo elemento -> 
Modelo de datos de entidad ADO.NET -> Seleccione la base de datos Northwind -> 
Category, Tabla de Product. 
 
 
 
Creamos el procedimiento correcto para establecer la conexión de la base de datos. 
 
Name: mtCategory 
Text: Category 
Name: mtProduct 
Text: Product 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 11 
 
 
 
 
 
 
 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 12 
 
Resultado: 
 
Compilamos todo. 
 
Paso 4: Agregue el código para manejar su formulario winform como se muestra a 
continuación. 
 
Singleton es un patrón de diseño creacional que nos permite asegurarnos de que una clase 
tenga una única instancia, a la vez que proporciona un punto de acceso global a dicha 
instancia. 
 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 13 
 
Puede ser que los clientes ni siquiera se den cuenta de que trabajan con el mismo objeto 
todo el tiempo. 
 
frmMain 
 
using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Data; 
using System.Drawing; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows.Forms; 
 
 namespace MetroUIDemo 
 { 
 public partial class frmMain : MetroFramework.Forms.MetroForm 
 { 
 static frmMain _instance; 
 publicstatic frmMain Instance 
 { 
 get 
 { 
 if (_instance == null) 
 _instance = new frmMain(); 
 return _instance; 
 } 
 } 
 public MetroFramework.Controls.MetroPanel MetroContainer 
 { 
 get { return mPanel; } 
 set { mPanel = value; } 
 } 
 public MetroFramework.Controls.MetroLink MetroBack 
 { 
 get { return mlBack; } 
 set { mlBack = value; } 
 } 
 public frmMain() 
 { 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 14 
 
 InitializeComponent(); 
 } 
 private void frmMain_Load(object sender, EventArgs e) 
 { 
 //Load dashboard to metro panel 
 mlBack.Visible = false; 
 _instance = this; 
 ucDashboard uc = new ucDashboard(); 
 uc.Dock = DockStyle.Fill; 
 mPanel.Controls.Add(uc); 
 } 
 
 //Control Metrolink con el icono de imagen Back 
 private void mlBack_Click(object sender, EventArgs e) 
 { 
 mPanel.Controls["ucDashboard"].BringToFront(); 
 mlBack.Visible = false; 
 } 
 } 
} 
 
 
ucCategory 
 
using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Drawing; 
using System.Data; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows.Forms; 
 
namespace MetroUIDemo 
{ 
 public partial class ucCategory 
 : MetroFramework.Controls.MetroUserControl 
 { 
 public ucCategory() 
 { 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 15 
 
 InitializeComponent(); 
 } 
 private void ucCategory_Load(object sender, EventArgs e) 
 { 
 //Bind data to metro gridview 
 using (NorthwindEntities db = new NorthwindEntities()) 
 { 
 //categoryBindingSource.DataSource = db.Categories.ToList(); 
 mGrid.DataSource = db.Categories.ToList(); 
 } 
 } 
 } 
} 
 
 
ucProduct 
 
using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Drawing; 
using System.Data; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows.Forms; 
 
namespace MetroUIDemo 
{ 
 public partial class ucProduct 
 : MetroFramework.Controls.MetroUserControl 
 { 
 public ucProduct() 
 { 
 InitializeComponent(); 
 } 
 private void ucProduct_Load(object sender, EventArgs e) 
 { 
 //Bind data to metrocombobox, metrogrid 
 using(NorthwindEntities db = new NorthwindEntities()) 
 { 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 16 
 
 categoryBindingSource.DataSource = db.Categories.ToList(); 
 Category obj = categoryBindingSource.Current as Category; 
 if (obj != null) 
 productBindingSource.DataSource = db.Products.Where(p => 
 p.CategoryID == obj.CategoryID).ToList(); 
 } 
 } 
 
 //Seleccionamos el evento en las propiedades 
 private void mcboCategory_SelectionChangeCommitted(object sender, EventArgs e) 
 { 
 //Using lamda to query data 
 Category obj = mcboCategory.SelectedItem as Category; 
 if (obj != null) { 
 using (NorthwindEntities db = new NorthwindEntities()) 
 { 
 productBindingSource.DataSource = db.Products.Where(p 
 => p.CategoryID == obj.CategoryID).ToList(); 
 } 
 } 
 } 
 } 
} 
 
ucDashboard 
 
using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Drawing; 
using System.Data; 
using System.Linq; 
using System.Text; 
using System.Threading.Tasks; 
using System.Windows.Forms; 
 
namespace MetroUIDemo 
{ 
 public partial class ucDashboard : MetroFramework.Controls.MetroUserControl 
 { 
 public ucDashboard() 
 { 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 17 
 
 InitializeComponent(); 
 } 
 
 //Activamos con Doble Click este control tipo Metro Tile 
 private void mtCategory_Click(object sender, EventArgs e) 
 { 
 //Check metro usercontrol 
 if (!frmMain.Instance.MetroContainer.Controls.ContainsKey("ucCategory")) 
 { 
 ucCategory uc = new ucCategory(); 
 uc.Dock = DockStyle.Fill; 
 //Add usercontrol to metro panel 
 frmMain.Instance.MetroContainer.Controls.Add(uc); 
 } 
 frmMain.Instance.MetroContainer.Controls["ucCategory"].BringToFront(); 
 frmMain.Instance.MetroBack.Visible = true; 
 } 
 
 //Activamos con Doble Click sobre el control Metro Tile llamado Product 
 private void mtProduct_Click(object sender, EventArgs e) 
 { 
 //Open metro user control 
 if (!frmMain.Instance.MetroContainer.Controls.ContainsKey("ucProduct")) 
 { 
 ucProduct uc = new ucProduct(); 
 uc.Dock = DockStyle.Fill; 
 frmMain.Instance.MetroContainer.Controls.Add(uc); 
 } 
 frmMain.Instance.MetroContainer.Controls["ucProduct"].BringToFront(); 
 frmMain.Instance.MetroBack.Visible = true; 
 } 
 } 
} 
 
Ahora configuramos los siguientes elementos: 
 
Par el formulario ucCategory, agregamos un control llamado MetroGrid. 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 18 
 
 
 
Seleccionamos el nuevo Data Source: 
 
 
 
El tipo será objeto: 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 19 
 
 
 
Seleccionamos la clase generada por el Entity Data Model 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 20 
 
 
 
El resultado es: 
 
 
 
 
Name: mGrid 
Dock: Fill 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 21 
 
Procedemos a efectuar los mismos procesos para ucProduct. 
 
 
 
Al control MetroGrid, le efectuamos la siguiente configuración: 
 
 
 
 
Anchor: Top, Lef 
Text: Category: 
Name: mcboCategory 
DataSource: 
DisplayMember: CategoryName 
ValueMember: CategoryID 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 22 
 
 
 
 
 
 
Y seleccionamos la clase necesaria: 
 
Agregamosun nuevo Data Source: 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 23 
 
 
 
 
Modificamos ciertos atributos: 
 
 
Ahora removemos product de ucCategory 
 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 24 
 
 
 
 
Ahora en ucProduct: 
 
 
 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 25 
 
 
 
 
 
 
De acuerdo a lo aprendido en esta sesión, considerar el desarrollo de la siguiente interfaz: 
 
 
 
Queda a su criterio el cambio de colores y el tipo de acciones a tomar. Control de notas, 
control de proyectos o eventos de cualquier naturaleza, esta actividad no se entregará. 
 
 
Evaluación Previa 
 
 UNIVERSIDAD SALVADOREÑA ALBERTO MASFERRER 
FACULTAD DE CIENCIAS EMPRESARIALES 
COORDINACIÓN DE COMPUTACIÓN 
 
Universidad Salvadoreña Alberto Masferrer Página 26 
 
Recurso de interés: 
https://github.com/dennismagno/metroframework-modern-ui 
https://www.youtube.com/watch?v=2aR0OPzn1p0 
 
 
 
 Hugon, J. (2018). C# 7: Desarrolle aplicaciones Windows con Visual Studio 2017. 
Ediciones Eni. 
https://books.google.es/books?hl=es&lr=&id=1e9dfieV4UEC&oi=fnd&pg=PA12&dq=vi
sual+c%23&ots=QGFhZpPFUP&sig=9peCtqq7T86tjSQDrn2icDO-
b5E#v=onepage&q=visual%20c%23&f=false 
 
 Comenzando con el lenguaje C#. (s/f). Manual-informatica.com. Recuperado el 27 de 
noviembre de 2023, de https://manual-informatica.com/programacion/2-comenzando-
el-lenguaje-csharp.html 
 
 Comenzando con el lenguaje C#. (s/f). Manual-informatica.com. Recuperado el 27 de 
noviembre de 2023, de https://manual-informatica.com/programacion/2-comenzando-
el-lenguaje-csharp.html 
 
 Bell, D., & Parr, M. (2011). C# para Estudiantes. Pearson Educación, México, 2010. 
Bibliografía 
https://github.com/dennismagno/metroframework-modern-ui
https://www.youtube.com/watch?v=2aR0OPzn1p0
https://books.google.es/books?hl=es&lr=&id=1e9dfieV4UEC&oi=fnd&pg=PA12&dq=visual+c%23&ots=QGFhZpPFUP&sig=9peCtqq7T86tjSQDrn2icDO-b5E#v=onepage&q=visual%20c%23&f=false
https://books.google.es/books?hl=es&lr=&id=1e9dfieV4UEC&oi=fnd&pg=PA12&dq=visual+c%23&ots=QGFhZpPFUP&sig=9peCtqq7T86tjSQDrn2icDO-b5E#v=onepage&q=visual%20c%23&f=false
https://books.google.es/books?hl=es&lr=&id=1e9dfieV4UEC&oi=fnd&pg=PA12&dq=visual+c%23&ots=QGFhZpPFUP&sig=9peCtqq7T86tjSQDrn2icDO-b5E#v=onepage&q=visual%20c%23&f=false
https://manual-informatica.com/programacion/2-comenzando-el-lenguaje-csharp.html
https://manual-informatica.com/programacion/2-comenzando-el-lenguaje-csharp.html
https://manual-informatica.com/programacion/2-comenzando-el-lenguaje-csharp.html
https://manual-informatica.com/programacion/2-comenzando-el-lenguaje-csharp.html