XAML-Tipp: Windows-10-Design für WPF-Anwendungen

WPF: Windows-10-Design für WPF-Anwendungen

Seit Windows 10 und den neuen attraktiven XAML-Features, die es nicht unter WPF gibt, fällt bei meinen Kunden häufig die Frage: Auf welche Technologie sollen wir jetzt setzen? WPF oder Universal-Apps? Microsoft hat offiziell bekanntgegeben, dass an WPF weiterentwickelt wird. Es wurde sogar als die Toptechnologie für eine professionelle Desktopentwicklung angepriesen.

Dennoch fehlen aktuelle Topfeatures aus den Universal-Windows-Apps. Wer trotzdem nicht auf ein modernes Look and Feel verzichten möchte, dem hilft das kostenlose UI-Framework MahApps.Metro. Dieses stellt zahlreiche Steuerelemente zur Verfügung, die auf der Microsoft Design Language aufbauen und auch unter Universal-Windows-Apps bekannt sind.

Das UI-Framework wird über NuGet bereitgestellt, und der Sourcecode liegt auf GitHub bereit. Nachdem das Toolkit installiert wurde, muss in der Code-Behind vom gewünschten Fenster die Basisklasse Windows zu MetroWindow geändert werden (Listing 1). In XAML wird ein neuer XML-Namespace auf den CLR-Namespace MahApps.Metro.Controls deklariert. Von diesem wird auch das MetroWindow-Control bereitgestellt. Anschließend wird hier ebenfalls die Windows-Deklaration durch das MetroWindow ersetzt (Listing 2). Das war es auch schon. Beim Ausführen der Anwendung wird das erste Ergebnis im Dark Theme präsentiert (Abb. 1).

Etwas angenehmer und ernster wirkt die Anwendung mit einem helleren Design (Abb. 2). Dazu stellt das Toolkit zahlreiche Styles via ResourceDictionaries bereit. Direkt im Window.Resources-Bereich können diese wie unter Listing 3 eingebunden werden. Wird die Anwendung wiederholt ausgeführt, sieht man das neue, zeitgemäße Ergebnis.

 
...
using MahApps.Metro.Controls;

namespace WpfMetroExample
{
  public partial class MainWindow : MetroWindow
  {
    public MainWindow()
    {
      InitializeComponent();
    }
  }
}

 

<Controls:MetroWindow x:Class="WpfMetroExample.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>
    ...

 

<Window.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.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>
z