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 Summit Munich 2020

Market Segmentation in the Era of Big Data

mit Özge Sahin (SkyScry)

Deep Learning mit TensorFlow

Mit Jakob Karalus (Deloitte Consulting)

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

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -