Configurar Mahapps Metro para WPF

Luis del Valle Hernández

hace 10 años

En este fragmento vamos a ver como debemos configurar Mahapps Metro para utilizarlo en nuestra aplicación WPF. Lo primero que debemos tener en cuenta es descargar la última versión del framework, para ello nos vamos al proyecto y pulsamos botón derecho para que nos muestre las opciones y seleccionamos Manage Nugets Packages…

Se nos abre la ventana de Nuget, el gestor de paquetes donde debemos buscar en el apartado on-line e instalar dos paquetes de Mahapps Metro.

Seleccionar online
Escribir en el campo de texto «mahapps metro»
Instalar estos dos paquetes. El primer paquete es el propio framework y el segundo paquete son las imágenes que se pueden utilizar en la aplicación. Se instala como un recurso.

Al final de la instalación nos tiene que aparecer de la siguiente manera.

Solo nos queda configurar nuestro proyecto para tener acceso a toda las mejoras de la interfaz gráfica que nos aporta Mahapps. Para ello debemos editar el archivo App.xaml y añadir el siguiente código.

<Application x:Class="WpfFragmentos.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.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/Green.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
                <ResourceDictionary Source="/Resources/Icons.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

<Application x:Class="WpfFragmentos.App"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

StartupUri="MainWindow.xaml">

<Application.Resources>

<ResourceDictionary.MergedDictionaries>

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application>

Por último vamos a cambiar la ventana que se crea por defecto cuando creamos una aplicación WPF. El código XAML que genera por defecto es el siguiente.

<Window x:Class="WpfFragmentos.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBox Text="Introduce el texto" Width="150"/>
            <Button Content="Pulsa" Margin="0,5,0,0"/>
            <ToggleButton Content="Toggle" Margin="0,5,0,0"/>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="WpfFragmentos.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</StackPanel>

</Grid>

</Window>

Lo sustituimos por el siguiente.

<Controls:MetroWindow x:Class="WpfFragmentos.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBox Text="Introduce el texto" Width="150"/>
            <Button Content="Pulsa" Margin="0,5,0,0"/>
            <ToggleButton Content="Toggle" Margin="0,5,0,0"/>
        </StackPanel>
    </Grid>
</Controls:MetroWindow>

<Controls:MetroWindow x:Class="WpfFragmentos.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"

Title="MainWindow" Height="350" Width="525">

<Grid>

</StackPanel>

</Grid>

</Controls:MetroWindow>

Además tenemos que cambiar la clase de la que deriva nuestra ventana por la clase MetroWindow en el CS. El código final que tendría que tener este archivo CS sería el siguiente.

using MahApps.Metro.Controls;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

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

using MahApps.Metro.Controls;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace WpfFragmentos

{

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : MetroWindow

{

public MainWindow()

{

InitializeComponent();

}

Aquí os dejamos las dos imágenes la primera es como quedaría nuestra aplicación sin usar Mahapps Metro y la segunda sería utilizando este framework.

Como podréis ver la diferencia es enorme y esto solo es una muestra. Las posibilidades que tenemos con WPF son inmesas, poco a poco las iremos viendo.