XAML-Kolumne: WPF, Silverlight, Windows Phone 8 und Windows-Store-App

XAML-Tipp: Modernes Design mit Googles Material Design Language
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: Modernes Design mit Googles Material Design“.

Die meisten Entwickler aus der Microsoft-Welt kennen die Microsoft Design Language. Früher war sie auch als Metro-Design bekannt. Sie beinhaltet ein komplettes Designkonzept, womit eine ideale User Experience erzielt werden soll. Passend dazu gibt es eine Vielzahl an Steuerelementen. Auch von Google wird ein umfangreiches Design angeboten.

WPF: Modernes Design mit Googles Material Design

Es trägt den Namen: Material Design Language. Diese hat, durch zahlreiche Webanwendungen oder Android-Apps, eine große Reichweite. Innovativ sind dabei einige elegante Animationen. Wie bei der Microsoft Design Language setzt Material Design aber auf flaches Design und einfache Piktogramme als Icons. Das Open-Source-Projekt Material Design in XAML Toolkit ermöglicht es, das moderne Design von Google ebenfalls für WPF-Anwendungen nutzen zu können.

Das Toolkit wird über NuGet installiert, zu finden ist es unter MaterialDesignThemes. Das gesamte UI-Paket wird über mehrere Resource Dictionaries bereitgestellt. Es wird in der App.xaml deklariert und somit anwendungsweit instanziiert. Listing 1 zeigt die dazu benötigten Zeilen. Die Standardsteuerelemente bekommen jetzt automatisch das neue Design. Weitere Attached Properties beim Window-Element ermöglichen es zudem, die Originalschriftart und Farbeffekte einzubinden (Listing 2). Das Ergebnis wird in Abbildung 1 gezeigt. Zusätzlich werden neue Steuerelemente angeboten, wie zum Beispiel ein TimePicker oder ein ColorZone. In Abbildung 2 wird ein weiteres Steuerelement veranschaulicht, und auf der Projektseite bei GitHub gibt es weitere Informationen.


<Application x:Class="MaterialDesignColors.WpfExample.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:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />

<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />

<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />

<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />

 

</ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Application.Resources>

</Application> 

<Window x:Class="MaterialDesignSample.MainWindow"

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

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

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:local="clr-namespace:MaterialDesignSample"

mc:Ignorable="d"

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

TextElement.Foreground="{DynamicResource MaterialDesignBody}"

Background="{DynamicResource MaterialDesignPaper}"

FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto">

<Grid>

<Button Width="200" Height="42">Okay, Google!</Button>

</Grid>

</Window> 
Abb. 1: WPF: Ein Button mit Material Design

Abb. 1: WPF: Ein Button mit Material Design

 

Abb. 2: Eine WPF-Anwendung mit Material Design

Abb. 2: Eine WPF-Anwendung mit Material Design

Schnell und überall: Datenzugriff mit Entity Framework Core 2.0

Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

C# 7.0 – Neues im Detail

Christian Nagel (CN innovation)

Aufmacherbild: collection thin lines pictogram icon set von Shutterstock / Urheberrecht:  sir.Enity

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -