XAML-Kolumne: WPF und Windows-Apps

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

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: 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).

ML & Python Summit 2021

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
Abb. 1: Windows-10-Style mit Dark Theme für WPF-Anwendungen

Abb. 1: Windows-10-Style mit Dark Theme für WPF-Anwendungen

Abb. 2: Windows-10-Style mit hellem Theme für WPF-Anwendungen

Abb. 2: Windows-10-Style mit hellem Theme für WPF-Anwendungen

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -