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 Conference 2021

Efficient Transformers

Christoph Henkelmann, DIVISIO

Enhancing Page Visits by Topic Prediction

Dieter Jordens, Continuum Consulting NV

Machine Learning on Edge using TensorFlow

Håkan Silfvernagel, Miles AS

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 -