Tutorial WPF Modern UI
En este tutorial haremos una aplicación WPF que utilizará estilo Modern UI Style, el sitio oficial
dónde puede encontrar más información del estilo es [Link]
Configuración:
Cree una solución con un proyecto WPF y luego siga los pasos:
1. Lo primero que se debe indicar, es que para utilizar este estilo se debe agregar una
referencia al paquete MahApps por medio del administrador de paquetes Nuget.
Se busca en el examinador “mahapps” y se instala [Link], también pueden instalarse otros
paquetes más, como [Link], [Link] (investigue los que
necesita, dependiendo de las funciones que quiera usar).
2. Para que WPF integre el estilo a la plantilla hay que agregar algunas configuraciones al
archivo [Link] (dejaré las líneas que se agregarán para fines prácticos, recuerde que
debe investigar, para qué sirven)
<ResourceDictionary>
<[Link]>
<ResourceDictionary Source="pack://application:,,,/[Link];component/Styles/[Link]" />
<ResourceDictionary Source=
"pack://application:,,,/[Link];component/Styles/[Link]" />
<ResourceDictionary Source="pack://application:,,,/[Link];component/Styles/[Link]" />
<ResourceDictionary Source="pack://application:,,,/[Link];component/Styles/[Link]" />
<ResourceDictionary Source="pack://application:,,,/[Link];component/Styles/Accents/[Link]" />
<ResourceDictionary Source="pack://application:,,,/[Link];component/Styles/Accents/[Link]" />
<ResourceDictionary Source = "pack://application:,,,/[Link];component/Styles/[Link]" />
<ResourceDictionary Source = "pack://application:,,,/[Link];component/Styles/[Link]" />
<ResourceDictionary Source="pack://application:,,,/[Link];component/Styles/[Link]" />
</[Link]>
</ResourceDictionary>
3. Se debe modificar el archivo [Link]
Y se agregan las siguientes líneas:
xmlns:i="[Link]
xmlns:behaviours="clr-namespace:[Link];assembly=[Link]"
xmlns:Controls="clr-namespace:[Link];assembly=[Link]"
4. Con el paso anterior, ya está agregado el estilo metro a la ventana, pero si lo ejecutamos,
daría un error. Por esto, también se debe agregar un using:
using [Link];
5. Finalmente se debe indicar que la ventana hereda de Metro:
Con los pasos recién descritos ya puedo visualizar la ventana con estilo Metro:
El color de la ventana está dado por la configuración del [Link], para ver otros colores pueden
revisar la página oficial:
Agregar estilo Metro a los Controles
1. Agregar un control TextBox a la ventana, posicionarse en el código XAML en la declaración
del TextBox y agregar propiedad Controls:[Link]="True" para
que en el control aparezca una “X” que sirve para borrar el TextBox.
2. Si quiero agregar un texto al control como una marca de agua, se coloca
Controls:[Link]="Ingrese su Nombre"
Al visualizar la ventana va quedando así:
3. Agregar un botón
Y para cambiar su apariencia, por ejemplo, marcar como comentario en [Link] la línea que se
muestra a continuación:
Programo el evento Click del botón
Pero lo modifico agregando “asyn” (asyn, investigar que significa)
Pista: Sin ‘asyn’, NO se puede agregar mensajes que vayan con estilo Metro.
4. Ejecuto la aplicación: await [Link](
Ingreso un nombre y pruebo
Para más información de cómo utilizar Mahapps en WPF y C#, te recomendamos
los siguientes video tutoriales:
Parte 1 – Login: [Link]
Parte 2 – Menú: [Link]
Parte 3 – Flyout: [Link]
Parte 4 – Flip View: [Link]
Parte 5 – Tab Control: [Link]