Tutoriales

MahApps.Metro UI toolkit para WPF

Mario Pérez Esteso

• 3 min read
MahApps.Metro UI toolkit para WPF
MahApps.Metro

Hola .Neteros!

¿Estáis trabajando en una Aplicación WPF? ¿Veis que se os queda feo con el estilo predefinido que tiene Windows? Vale si vais a hacer una Aplicación sólo para Windows 8 Escritorio, el Styling que tiene es bastante buena y no haría falta. Pero... y si es también para Windows 7/Windows Vista/ejem... ¿Windows XP? Cambia el estilo, entonces tienes que preocuparte en que se vean en todas las versiones igual. También sucede cuando necesitáis diferenciaros de todas las Aplicaciones y tener vuestro propio estilo. Uno de los proyectos OpenSource más famosos que ha aparecido en MahApps.Metro. La verdad es que ha avanzado bastante desde que eché un ojo allá a principios del verano pasado. Se podría considerar como una buena alternativa para empezar un nuevo proyecto revolucionario. ¿Te animas?

MahApps.Metro fue creado por Paul Jenkins, allá por 2011, y solo quería acercar el estilo ModerUI al WPF, Aplicaciones de Escritorio. Desde Entonces tuvieron más de 400 Contribuciones/forks de otros usuarios para seguir creciendo como Tookit MahApps.Metro. Ahora mismo se encargan principalmente 4 (Brendan, Dennis, Alex, Jan) de mantener un poco el orden donde Paul Jenkins ya se ha retirado.

Tenéis que tener en cuenta que MahApp.Metro, lo que proporciona es un Toolkit, no os hace el diseño completo de vuestra Aplicación. Sobrescribe el estilo de Windows por defecto, creando sus propios controles basados en los originales de Windows. También hay que tener en cuenta que la interfaz ModerUI no es apto para todas las aplicaciones. No sería muy efectivo intentar hacer un Visual Studio con un diseño ModernUI.

Es compatible con .Net 4.0 y .Net 4.5. Podemos ver Aplicaciones creadas con este Toolkit como los siguientes:

Sin más empezamos viendo cómo se crearía un proyecto MahApp.Metro.

  • Creamos un nuevo proyecto con nombre por ejemplo: Demo.MahAppsMetro
  • En References, añadimos desde NuGet estas dos paquetes:
References
  • Ahora vamos en nuestro MainWindow.xaml y añadimos el siguiente namespace

xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"

  • Luego cambiamos la etiqueta root <Window/>, por controls:MetroWindow:

<controls:MetroWindow x:Class="Demo.MahAppsMetro.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </controls:MetroWindow>

  • Luego inmediatamente vamos a su Code Behind,  MainWindow.xaml.cs y quitamos que MainWindow herede de Window.

namespace Demo.MahAppsMetro { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow { public MainWindow() { InitializeComponent(); } } }

  • Finalmente añadimos los estilos que hacen posible que se vea tan bonito todo esto en Window.Resources. También metemos unos controles de ejemplos para poder ver el cambio.

<controls:MetroWindow x:Class="Demo.MahAppsMetro.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" /> <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <Grid> <Button Content="Button" HorizontalAlignment="Left" Height="50" Margin="10,259,0,0" VerticalAlignment="Top" Width="178"/> <TextBox HorizontalAlignment="Left" Height="47" Margin="10,207,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="199"/> </Grid> </controls:MetroWindow>

  • Ahora solo falta pulsar en F5 y ver el resultado.

Sin duda es bastante llamativa. Yo seguiré jugueteando un poco. La recién llegada App de Telegram para Windows que esta aún en fase alpha parece también hecha con MahApp.Metro.

¡Hasta la próxima!