Blog

Moderne Bausteine für Windows-Apps

Controls für WinUI 3 - funktionell und ansprechend im Design

20 Apr 2022

Windows wird an allen Ecken und Enden renoviert. Die neue Version Windows 11, das Windows App SDK und WinUI 3 sind die relevanten Stichwörter. Auch bei der Gestaltung des User Interface muss man sich neu orientieren. Zum Einsatz kommen frische Controls, die ein grafisch ansprechendes Design und eine hohe User Experience bieten.

Sehr lange Zeit hat sich im Bereich der Desktopanwendungen recht wenig getan. Zur Gestaltung der Benutzeroberflächen gab es die Systeme Windows Forms (WinForms) und Windows Presentation Foundation (WPF). Ein gewisse Sonderrolle haben stets die Apps für die Universal Windows Platform (UWP) eingenommen, die auf der Grafikschnittstelle WinUI 2 basieren. Sonderrolle deshalb, weil diese Apps zwar auch auf Desktoprechnern unter Windows ausgeführt werden können, jedoch in vielerlei Hinsicht eingeschränkt sind. Beispielsweise ist nur ein begrenzter Systemzugriff auf die Hardware des Rechners möglich. Ihre Nutzung hat sich daher im Bereich der Desktopanwendungen nur sehr zögerlich durchgesetzt. Andererseits sind alle Innovationen in Bezug auf Design und User Experience fast ausschließlich für UWP/WinUI 2 umgesetzt worden. Hier gab es gegenüber den Technologien WinForms und WPF echte Innovationen. Ansprechende Controls, Farbverläufe, Schatten, Animationen usw. konnten für Apps der UWP ohne größere Hürden angewendet werden. Mit WinUI 3 und dem App SDK wird nun bekanntermaßen ein Systemwechsel eingeleitet. Die neue Grafikbibliothek WinUI 3 wird vom Applikations- und Programmiermodell der Anwendung entkoppelt und kann nun mit unterschiedlichen App-Typen, d. h. mit Apps für die UWP und klassischen Desktopapplikationen, genutzt werden. Auch andere Technologien zur Erstellung von Windows-Applikationen, die durch diverse Werkzeughersteller angeboten werden, sollen künftig WinUI 3 als Grafikschnittstelle nutzen können.

Leser des Windows Developer sind hier sehr gut informiert. Sowohl über die Features der genannten grafischen Benutzerschnittstellen als auch über die laufende Entwicklung des App SDK und über das WinUI 3 wurde hier schon aus unterschiedlicher Perspektive berichtet (WD 10.20, 7.21und 12.21). In diesem Artikel werfen wir einen konzentrierten Blick auf die Arbeit mit den Controls von WinUI 3. Die Basis für die Gestaltung moderner grafischer Oberflächen ist auch bei WinUI 3 der Einsatz von fertigen Komponenten. Eine Basisauswahl, die sukzessive durch Microsoft erweitert wird, ist bereits verfügbar und erlaubt schon heute das Erstellen von ansprechenden Benutzeroberflächen. Je mehr dieses System in den Fokus der Entwickler rückt, desto umfassender wird auch die Unterstützung mit Controls von Drittanbietern ausfallen.

 

ZUM NEWSLETTER

Keine News mehr verpassen

 

Entwickler, die nun zunehmend von WinForms und WPF zur Grafikschnittstelle WinUI 3 wechseln und vielleicht mit dem technischen Vorgänger WinUI 2 (UWP) nicht viel gearbeitet haben, werden über die Funktionsweise und das Design einiger Controls vielleicht überrascht sein. Natürlich gibt es immer noch Basis-Controls wie einen Button, ein statisches Textfeld (Label) oder ein Texteingabefeld. Aber es gibt auch deutlich umfassendere visuelle Controls, die einen ganz anderen Ansatz zur Gestaltung des User Interface bzw. die Umsetzung einer vollständig veränderten User Experience ermöglichen. Wer bereits Apps für die mobilen Plattformen entwickelt hat, der wird hier viele Ähnlichkeiten vorfinden. Die Grafikschnittstelle WinUI 3 erfordert zum einem eine Konzentration auf das Layout und zum anderen eine Fokussierung auf den Inhalt. Content First ist auch hier ein wichtiges Prinzip, d. h., dass die Navigation zwischen den Seiten und der Aufbau einer Seite mehr dem Vorgehen auf mobilen Geräten gleichen als der Entwicklung klassischer Desktopanwendungen. Mit anderen Worten: Moderne Desktopanwendungen sind heute auch das Ergebnis eines umfassenden Designprozesses. Mit langweiligen Formularen, vielleicht noch in einem mausgrauen Farbton gestaltet, haben diese heute nichts mehr gemeinsam.

Hinweis: Es gilt ganz besonders das Prinzip „Probieren geht über Studieren“. Deshalb finden Sie im Kasten „Apps für WinUI 3 erstellen“ einige Hinweise, um das Gerüst für eine Desktopanwendung mit WinUI 3 zu generieren.

 

Apps für WinUI 3 erstellen

Installieren Sie die aktuelle Version von Visual Studio 2022. Spielen Sie alle Updates zur Entwicklungsumgebung ein. Installieren Sie die folgenden Workloads: .NET-Desktopentwicklung, Desktop development with C++ und Entwicklung für die universelle Windows-Plattform. Ebenso ist es notwendig, dass Sie das Windows-App-SDK installieren. Die aktuelle Version finden Sie unter [1], wenn Sie im Store für die Extensions von Visual Studio nicht fündig werden. Mit der Windows-App-SDK-Extension wandern neue Projektvorlagen für Visual Studio auf Ihren Rechner.

Als Projektvorlage wählen Sie dann Leere App, verpackt (WinUI 3 in Desktop). Ausgangspunkt für unsere Experimente ist die Datei MainWindow.xaml. Hier erfolgt die Deklaration der Benutzerschnittstelle. Starten Sie die App ein erstes Mal, danach sind Sie bereit für Ihre Erkundungstour. Einen Designer gibt es (noch) nicht, vielmehr wird Hot Reload als interaktive Hilfe für das Erstellen des User Interface verwendet.

Controls für WinUI 3

Starten wir mit einem ersten Überblick über die verfügbaren Controls, die es bereits heute für WinUI 3 gibt. Sie finden die Auflistung in Abbildung 1.


Abb. 1: Übersicht über die Controls von WinUI 3 [1]

Es empfiehlt sich, hier die englische Seite der Dokumentation aufzurufen und zu verwenden. Die Namen der Controls sind dann mit den Klassennamen identisch, dagegen wirken die Übersetzungen teilweise etwas sperrig. Viele Basis-Controls findet man in nahezu allen Bibliotheken zum Erstellen von modernen Benutzeroberflächen, d. h., was ein Button oder ein Textfeld ist, muss man dem erfahrenen Entwickler nicht mehr erläutern. Dennoch werden Sie ggf. überrascht sein, welche Variantenvielfalt es beispielsweise bei den Buttons gibt [2]:

  • Button: Die klassische Schaltfläche, die eine sofortige Aktion bei einem Mausklick auslöst; man kann das Click-Ereignis oder eine Command-Bindung verwenden

  • RepeatButton: Eine Schaltfläche, die im gedrückten Zustand fortlaufend ein Click-Ereignis auslöst

  • HyperlinkButton: Eine Schaltfläche, die wie ein Link formatiert ist und für die Navigation verwendet wird

  • DropDownButton: Eine Schaltfläche mit der Möglichkeit zum Auswählen weiterer Optionen.

  • SplitButton: Eine Schaltfläche mit zwei Seiten; eine Seite initiiert eine Aktion, während die andere Seite ein Menü öffnet

  • ToggleSplitButton: Eine Schaltfläche für zwei Zustände und mit zwei Seiten; über eine Seite wird zwischen aktivierten und deaktivierten Zuständen umgeschaltet; über die andere Seite wird ein Menü geöffnet

  • ToggleButton: Eine Schaltfläche für zwei Zustände, d. h. einen Wechsel zwischen aktiviert und deaktiviert

Andere Controls muss man sich dagegen etwas genauer ansehen, damit man die Funktionsweise erkennt und sich ihre Verwendung vorstellen kann. Die folgenden Controls lohnen aus dieser Perspektive einen zweiten Blick. Wir haben ein paar Basisinformationen zusammengestellt:

  • AnimatedIcon: Dieses Steuerelement gibt animierte Bilder als Reaktion auf Benutzerinteraktion und Änderungen des visuellen Zustands wieder. Animierte Symbole ziehen die Aufmerksamkeit auf eine Komponente, zum Beispiel die höchstwahrscheinlich als nächstes zu betätigende Schaltfläche.

  • AnimatedVisualPlayer: Eine Bibliothek zum nativen Rendern von Adobe-AfterEffects-Animationen in den Anwendungen. Über das Control können flüssig ablaufende 60-fps-Animationen und auflösungsunabhängige Vektorgrafiken dargestellt werden. Informationen zur Bibliothek findet man unter [3] mit dem Stichwort „Lotti“ und auf der Projektwebseite unter [4]. Letztendlich haben wir über das Control die Möglichkeit, auf sehr einfache Art und Weise, professionell erstellte Animationen in unsere App aufzunehmen und sie an passender Stelle zum Leben zu erwecken.

  • BreadcrumbBar: Das Control stellt den direkten Pfad von Seiten oder Ordnern zum aktuellen Speicherort bereit. Man kann auf diese Weise den Navigationspfad bis zum aktuellen Element jederzeit nachverfolgen. Ebenso können die Nutzerinnen und Nutzer direkt zu einem bestimmten Ort der App navigieren. Das Control bietet sich an, wenn man eine sehr tiefe Navigationsstruktur in der App hat und dem Anwender eine Orientierung geben möchte.

  • ContactCard: Ein Control, das zur Darstellung von Kontaktinformationen wie Name, Telefonnummer und Adresse genutzt werden kann. Eine solche Darstellung kann man auch aus Einzelelementen zusammensetzen. Dieses Control kann man verwenden, wenn man zusätzliche Informationen zu einem Kontakt, zum Beispiel einen angemeldeten Benutzer, anzeigen möchte. Da immer mehr Apps eine Anmeldung zum Beispiel für die Datenspeicherung voraussetzen, ergibt es Sinn, auf ein solches fertiges Element zurückzugreifen.

  • FlipView: Man verwendet dieses Control zum „Durchblättern“ von Bildern oder anderen Elementen. Bei Geräten mit Touchscreen erfolgt die Navigation durch die Sammlung mit einer Wischbewegung über ein Element. Bei Verwendung mit einer Maus werden beim Zeigen mit der Maus Navigationsschaltflächen angezeigt. Bei Verwendung einer Tastatur erfolgt die Navigation durch die Elemente mit Hilfe der Pfeiltasten.

  • Flyouts Das ist ein ausblendbarer Container, der beliebige andere visuelle Controls als Inhalt anzeigen kann. Wann sollte ein Flyout verwendet werden? Es ist zum Beispiel vorgesehen für: das Erfassen von zusätzlichen Informationen, bevor eine Aktion abgeschlossen werden kann; das Anzeigen von Informationen, die nur vorübergehend relevant sind, oder für das Anzeigen weiterer Informationen, beispielsweise von Details oder ausführlicheren Beschreibungen eines Elements auf der Seite. Ein Flyout sollte nicht als Ersatz für ein QuickInfo (kurze Information zu einem Control) oder Kontextmenü verwendet werden.

  • ParallaxView: Hierbei handelt es sich um einen visuellen Effekt zum Darstellen von Vorder- und Hintergrund in 2D-Abbildungen. Auf diese Weise soll ein Gefühl von Tiefe, Perspektive und Bewegung erzeugt werden. Die ParallaxView ist mit der Einführung des Fluent Design als Element der Gestaltung von Benutzeroberflächen in Windows hinzugekommen. Beispielsweise verwendet man diesen visuellen Effekt, um eine Liste von Einzelelementen vertikal vor einem Hintergrundbild zu verschieben. Dabei scrollt die Liste deutlich schneller als das Hintergrundbild. Es entsteht der Eindruck von Tiefe. Sie können es vergleichen mit einem Blick aus dem Fenster eines fahrenden Zuges. Die naheliegende Landschaft rauscht in hoher Geschwindigkeit am Auge des Betrachters vorbei, während die Häuser und Bäume in der Ferne sich nur langsam in die gleiche Richtung bewegen. Microsoft gibt in seinen Guidelines den Hinweis, den Effekt bewusst, gezielt und sparsam anzuwenden, d. h., „… eine übermäßige Nutzung kann die Auswirkungen verringern“ [5].

  • PersonPicture: Ähnlich wie das Control ContactCard handelt es sich beim Steuerelement PersonPicture um ein Element zur Anzeige von Nutzerdaten. Konkret: Es wird ein Avatar für die betreffende Person angezeigt, wenn dieses verfügbar ist. Andernfalls werden die Initialen der Person oder eine allgemeine Glyphe (Platzhalter) eingeblendet. Beispielsweise kann man dieses Control für folgende Einsatzzwecke gebrauchen: Zur Anzeige des aktuellen Benutzers, zur Anzeige von Kontakten in einem Adressbuch, zur Anzeige des Absenders einer Nachricht oder zur Anzeige eines Social-Media-Kontakts. Ein solches Element könnte man auch aus Basis-Controls selbst zusammenbauen. Die Arbeit wird dadurch jedoch erheblich beschleunigt. die Anzeige von Personendaten ist in allen Apps identisch und hat damit für den Nutzer einen hohen Wiedererkennungseffekt.

  • PipsPager: Zunächst, was sind Pips? Pips stellen eine Einheit numerischer Werte dar, die meist als Punkte angezeigt werden. Eine alternative Anzeige (Bindestriche, Quadrate, …) ist jedoch möglich. Jeder Punkt stellt dabei eine Seite dar. Der Benutzer kann einen Punkt auswählen und damit direkt zur betreffenden Seite gehen. PipsPager ist damit eine Form der Navigation. Ein PipsPager kann horizontal oder vertikal angewendet werden. In der Praxis findet man meistens die horizontale Verwendung. Das Control kann man gut mit einem FlipView-Control kombinieren (Abb. 2), um neben der Wischbewegung (Touchscreen), der Weiterschaltung mit der Maus bzw. der Nutzung von Pfeilen am linken und rechten Bildrand eine weitere Option der Navigation zu bieten. Mittels PipsPager kann man schneller zu Inhalten springen, was gerade bei einer großen Anzahl von Einzelelementen eine sinnvolle Option ist.

  • Swipe: Es handelt sich um Wischbefehle für das schnelle Auslösen von Aktionen. Sie wirken wie ein Kontextmenü. Man bietet sie üblicherweise für eine größere Gruppe von Elementen an, wenn der gleiche Vorgang wiederholt werden soll. Wischgestenbasierte Befehle sollten für ein bis drei Aktionen angewendet werden. Typische Aktionen sind: Löschen, Markieren, Archivieren, Speichern oder Antworten.

  • TeachingTip: Über dieses Control werden Kontextinformationen bereitgestellt. Beispielsweise kann man auf diese Weise auf neue Funktionen in der App hinweisen. Standardmäßig wird das Control einem anderen Control zugeordnet. Die Content-Eigenschaft nimmt die Inhalte auf. Mehrere Inhalte können dabei in einem Stack-Layout untereinander angeordnet werden. Auch eine Bildlaufleiste ist möglich. Grundsätzlich sind die Inhalte in einem solchen Tippfenster jedoch zu begrenzen. Weitergehende Informationen können zum Beispiel über einen Link adressiert werden.

  • TwoPaneView: Mit Hilfe dieses Controls kann man die darzustellenden Inhalte auf zwei unterschiedliche Bereiche aufteilen, beispielsweise eine Listen- und eine Detailansicht. Die Ansicht funktioniert grundsätzlich auf allen Geräten, sie ist aber auf die Nutzung der Vorteile von Dual-Screen-Geräten optimiert. Dual-Screen-Geräte trennen die Benutzeroberfläche sauber in zwei Teile. Es wird in der Dokumentation explizit drauf hingewiesen, dass ein Dual-Screen-Gerät nicht mit einem Desktopgerät mit zwei Monitoren identisch ist. Es handelt sich um unterschiedliche Anwendungsszenarien. Dual-Screen-Geräte gibt es von unterschiedlichen Herstellern. Typisch ist die Möglichkeit, die Bildschirme unterschiedlich zueinander anzuordnen und mit anderen Inhalten zu belegen (Abb. 3).

 

Abb. 2: PipsPager erlaubt eine zügige Navigation zwischen den Elementen [6]


Abb. 3: Anordnung der Bildschirme bei Dual-Screen-Geräten [7]

 

Eine Vielzahl der Controls existiert bereits für die aktuelle Version der WinUI 2. Auch für diese Version des Grafikframeworks gibt es noch Aktualisierungen. Anders formuliert: WinUI 2 und WinUI 3 entwickeln sich hier parallel, d. h., WinUI 3 adaptiert hier nach und nach Controls aus der Vorgängerversion.

Die Beschreibung der Controls und die Dokumentation sind der eine Aspekt. Einen besseren visuellen Überblick – im Sinne „Was gibt es denn überhaupt?“ – bekommt man, wenn man sich die App WinUI 3 Controls Gallery installiert. Diese gibt es über den Microsoft Store. Hier können wir leichtgewichtig die Controls in Aktion ausprobieren, beispielsweise Varianten der Animation (Abb. 4). Sehr gut: Direkt in der App sind die relevanten Quellcodeausschnitte in Form von XAML-Code notiert. Diesen können wir dann mittels Copy and Paste in das eigene Projekt übernehmen und anpassen.


Abb. 4: Die App WinUI 3 Controls Gallery zeigt die Controls in Aktion – hier eine Animation

 

SIE LIEBEN UI?

Entdecken Sie die BASTA! Tracks

Fragen des Designs

Bei der Vorstellung der o. g. Controls haben Sie es schon gemerkt: Sie unterscheiden sich in Fragen des Designs, des Layouts und der gesamten User Experience erheblich davon, was man bisher mit klassischen Desktopanwendungen verwendet hat. Mobile und Desktop verschmelzen an dieser Stelle. Wie sollten nun Desktopanwendungen gestaltet werden? Man könnte es nach dem gleichen Muster machen, wie man es bisher auch mit WinForms oder WPF umgesetzt hat. Das wäre jedoch altbacken und man würde das Potenzial der Möglichkeiten nicht nutzen. Mit Blick auf die Designhinweise und die Optionen der Controls ist das Spektrum in Fragen des Designs deutlich breiter. Bereits bei der Erstellung von visuellen Prototypen, d. h. vor der technischen Umsetzung, sind diese erweiterten Möglichkeiten zu berücksichtigen. Mit anderen Worten: Mit dem Wechsel von WinForms bzw. WPF zu WinUI 3 muss ein Umdenken in Bezug auf die gesamte Gestaltung des User Interface einhergehen. Das betrifft die folgenden Aspekte:

  • Layout: Wie ist der Aufbau der Seiten zu gestalten? Im Mittelpunkt steht der Content und die Bedienung der App rückt in den Hintergrund. Das gewünschte Layout wird dann mittels der Layoutcontainer (Grid, StackLayout, …) umgesetzt.
  • Navigation: Viele Jahre gab es keine Alternative zu einem klassischen Anwendungsmenü mit den typischen Einträgen Datei, Bearbeiten, Ansicht usw. Auch in der WinUI 3 haben wir ein solches Control (MenuBar). Handelt es sich bei der App um eine dokumentenbasierte Applikation, dann kann dieses Navigationskonzept immer noch richtig sein. Für einen Großteil von anderen Situationen in der Praxis wird man sich jedoch für eine andere Art der Navigation entscheiden. Das sind zum Beispiel Registerkarten (Tabnavigation), Hamburgermenü oder die Listen-/Detailnavigation. Viele Szenarien lassen sich mit unterschiedlichen Konzepten realisieren. Bei der Auswahl gilt es, den konkreten Bedienvorgang im Auge zu behalten. Welche Navigation schafft die meiste Übersicht? Wie viele Unterelemente muss ich ansteuern? Ist die Hierarchie der Navigation flach, d. h., befinden sich alle Elemente auf einer Ebene oder sind mehrere Ebenen zu überbrücken? Ebenso ist die Anzahl der Klicks, Touch-Gesten usw. zu berücksichtigen, bis man zum gewünschten Element gekommen ist. Hier gilt es, die Anzahl der notwendigen Aktionen aus Sicht der Nutzerin bzw. des Nutzers zu minimieren.
  • Auswahl der Controls: Wählen Sie die passenden Controls aus. Das ist gar nicht so einfach. Viele Szenarien (Use Cases) lassen sich mit mehreren Controls realisieren. Hier ist es hilfreich, in der Dokumentation nachzusehen. Es geht nicht um die technische Umsetzung, sondern um die Wahl des passenden Elements im Sinne der Designrichtlinien. In der Dokumentation findet sich zu jedem Control ein Abschnitt, der genau diese Frage beantworten soll: „Ist dies das richtige Steuerelement?“ (Abb. 5).
  • Gestaltung: Die Anpassung der Controls in Bezug auf Farben, Schriftarten, Größen usw. folgt als letzter Schritt bei dieser Vorgehensweise.

Sind die genannten Punkte geklärt, geht es um die technische Umsetzung des User Interface. Dieses wird deklarativ mittels XAML-Code erstellt.


Abb. 5: Der Abschnitt „Ist dies das richtige Steuerelement?“ gibt wichtige Hinweise

 

Fragen der (XAML-)Codierung

WinForms-Anwender müssen sich am meisten umstellen. In WinForms wurde der gesamte Aufbau mittels Drag and Drop und der Zuweisung von Eigenschaftswerten erledigt. WPF und UWP verwendeten beide bereits XAML-Code. Beide Systeme hatten jedoch auch einen grafischen Designer. Der XAML-Dialekt von WPF unterscheidet sich gegenüber dem von WinUI. WinUI 3 ist eine direkte Weiterentwicklung von WinUI 2, daher brauchen sich Entwickler von Apps der UWP nicht umgewöhnen. Nur dass es jetzt keinen Designer mehr gibt, mag etwas „schmerzen“. Mit dem Wegfall des grafischen Designers kann auch das Designtool Blend nicht für WinUI 3 genutzt werden. Wer mit diesem Tool, dessen Bedienung sich eher an Designer als an Entwickler richtet, zum Beispiel Animationen erstellt hat und den daraus resultierenden Quellcode in XAML direkt übernommen hat, wird sich ggf. etwas ärgern. XAML-Vorschau und Designer soll nun eine leistungsfähigere Version von Hot Reload ersetzen.

In der Praxis heißt das, den XAML-Editor (Visual Studio) links auf dem Bildschirm (oder Bildschirm 1) und die gestartete App rechts auf dem Bildschirm (oder Bildschirm 2) anzuordnen. Änderungen am Quellcode werden dann unmittelbar in die gestartete App übernommen, ohne diese neu kompilieren zu müssen. Die Praxis zeigt, dass es hier Fortschritte gibt, dennoch erfordern einige größere Änderungen – zum Beispiel am Layout in einem Grid – weiterhin einen Neustart der Anwendung.

Das PersonPicture Control

In diesem Abschnitt zeigen wir die Arbeit mit interessanten Controls aus der WinUI 3. Wir haben dazu das PersonPicture Control ausgewählt. Die Verwendung des Control ist unter [8] und die zugehörige API-Dokumentation unter [9] zu finden. Ein simpler Einsatz erfolgt z. B. so:

<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
  <PersonPicture
    DisplayName="Maria Musterfrau"
    ProfilePicture="Assets\meinAvatar.png"
    Initials="MM" />
</StackPanel> 

Ist ein Bild vorhanden, wird dieses angezeigt. Gibt es keins, werden die Initialen eingeblendet (Abb. 6).


Abb. 6: Das PersonPicture Control

Man muss die Datenfelder des Control nicht manuell setzen. Für die Datenhaltung der Kontaktdaten bietet sich hier die spezialisierte Klasse Contact an. Ein Objekt dieser Klasse enthält bereits Properties für alle wesentlichen Merkmale eines Kontakts wie Adressen (mehrere), Vorname, Nachname, Telefonnummern (mehrere), E-Mail-Adressen (mehrere), Jobinfo, ID, Nickname, Notizen usw. Die Verwendung dieser Klasse scheint in diesem Fall angezeigt, da man auf eine vollständig definierte Datenstruktur zurückgreifen kann. Im XAML-Code binden wir in diesem Fall lediglich die Eigenschaft Contact des PersonPicture Control, also:

<PersonPicture
  Contact="{x:Bind CurrentContact, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />

Im C#-Quellcode benötigen wir eine Property und eine Implementierung des INotifyPropertyChanged Events, welches bei einer Änderung der Daten die View benachrichtig und die Anzeige daraufhin automatisch aktualisiert wird. Ein Objekt der Klasse Contact wird daher wie in Listing 1 definiert.

public Contact CurrentContact{…};
var contact = new Contact();
contact.FirstName = "Maria";
contact.LastName = "Musterfrau";
...
CurrentContact = contact;

 

Wir definieren ein Property mit der Bezeichnung CurrentContact des Typs Contact. Setter- und Getter sind hier nur angedeutet. Danach erstellen wir ein konkretes Objekt der Klasse Contact und weisen es dieser Property zu. Über die Datenbindung wird die Anzeige aktualisiert. Anhand des Control PersonPicture und der Klasse Contact zeigt sich die gute Abstimmung zwischen visuellen Controls für das User Interface und vorbereiteten Klassenstrukturen für die Datenhaltung. Die Features sind nun nicht mehr für Verwendung in der UWP begrenzt, sondern können auch über WinUI 3 in Anwendungen für den Desktop eingesetzt werden.

Lernen Sie die BASTA! Speaker zum Thema UI kennen

Patrick Jahr
Patrick Jahr

Thinktecture AG

Sam Basu
Sam Basu

Progress Software

Eine App für WinUI 3

An dieser Stelle wollen wir die Vorgehensweise in der Praxis anhand eines konkreten Beispiels demonstrieren. Dafür wählen wir die Gestaltung einer Seite zur Anzeige von Wetterinformationen auf einem Info-Display oder einem Smarthome-Bildschirm. Dabei können wir beispielsweise davon ausgehen, dass wir einen visuellen Entwurf zum späteren Aussehen der Oberfläche vorliegen haben. Ein solcher Prototyp wird idealerweise von einem Designer angefertigt und gibt uns folgende Hinweise: grundsätzliches Aussehen des betreffenden Screens, Navigationsstruktur, darzustellende Inhalte, Schriftgrößen, Farben, Schriftarten usw. Dieser visuelle Prototyp ist Ausgangspunkt für unsere Arbeiten. Wir empfehlen an dieser Stelle, noch nicht direkt mit der Umsetzung in XAML zu starten. Ein konzeptioneller Zwischenschritt kann die Arbeit erleichtern. Das Ziel ist es, sich über das Layout und die Verwendung der Control genauer im Klaren zu werden. Dazu können wir eine Skizze zum geplanten Layout anfertigen. Es genügt eine Handskizze mit Papier und Bleistift. Hieran können wir den Einsatz der Layoutcontainer planen und damit die Aufteilung des Screens vornehmen. Ebenso können wir die Controls den Layoutcontainern zuordnen. Den Entwurf zu unserem Beispiel sehen Sie in Abbildung 7.

 


Abb. 7: Layoutskizze (Entwurf) der Wetterdarstellung

Anhand dieser Skizze können wir in Bezug auf das Beispiel folgende Festlegungen treffen:

  • Root-Element: Wir wollen zwischen unterschiedlichen Orten durch eine Wischbewegung oder mittels Tastatur bzw. einem Klick auf einen Pfeil wechseln. Für jeden Ort wird die Darstellung der Wetterdaten vollständig aufgebaut. Wir verwenden zur Navigation auf oberster Ebene ein Control des Typs .
  • Basislayout: Die Seite wird mit Hilfe einer Gitterstruktur, d. h. einem -Element eingeteilt. Dabei definieren wir nur eine Zeilenstruktur mit vier Elementen. Eine Einteilung in mehrere Spalten nehmen wir nicht vor, denn wir erkennen, dass die Zeilen eine sehr unterschiedliche Anzahl von Spalten aufweisen. Hierbei ist es nicht immer sinnvoll, die größte Anzahl von Spalten als Einteilungsmaßstab zu verwenden. Daher haben wir uns für ein Grid mit vier Zeilen und null Spalten entschieden. Für die einzelnen Zeilen werden unterschiedliche Layouts definiert. Die Höhendefinition erfolgt relativ. Die erste und die letzte Zeile haben eine Höhe von 0,7* und die beiden mittleren Zeilen eine relative Höhe von *.
  • Sublayout: Für jede Zeile wird das untergeordnete Layout definiert. Es werden für die wöchentliche Vorschau (Zeile 2) fünf Spalten und eine Zeile für die Überschrift („Täglich“) benötigt. Hier platzieren wir ein -Element mit fünf Spalten und gleicher Breite und einer fixen Höhe für die Überschrift. Ähnlich verfahren wir in der nächsten Zeile. Die Wetterdaten werden im Dreistundenrhythmus für den gewählten Tag vorhergesagt. Daher verwenden wir für das Sublayout (Zeile 3) ein -Control mit acht Spalten und zwei Zeilen. Die Sublayouts für Zeile 1 und 4 sind noch nicht fertiggestellt.
  • User-Controls: Wiederkehrende Elemente werden in ein eigenes User-Control ausgelagert. Dieses ist im Beispiel der Fall für die Tagesvorhersage. Dieses User-Control enthält dann die Struktur für die Anzeige der Wetterdaten für den betreffenden Tag. Wir haben es als User-Control Day bezeichnet. Analog ist es für die Anzeige der täglichen Vorhersage. Hierzu definieren wir ein User-Control namens Hourly. Die Eigenschaften eines User-Control werden in Form einer Dependency Property ausgeführt und können damit von außen definiert werden.

Die relevanten Ausschnitte aus dem Quellcode zur Definition des User Interface sind in Listing 2 dargestellt.

<Window
  ...">
  <FlipView>
    <!--Ort -->
    <Grid>
      ...
      <Grid.RowDefinitions>
        <RowDefinition Height="0.7*"/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition Height="0.7*"/>
      </Grid.RowDefinitions>
      <!-- Kopfzeile-->
      <StackPanel HorizontalAlignment="Center">
        <TextBlock FontSize="50" FontWeight="Bold" FontFamily="Consolas" Text="Weimar"/>
        <TextBlock HorizontalAlignment="Center" FontSize="36" FontWeight="Bold" Text="21°"/>
      </StackPanel>
      <!-- Täglich-->
      <Grid Margin="20,0" Grid.Row="1">
        <Grid.RowDefinitions>
          <RowDefinition Height="30"/>
          <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock FontFamily="Consolas" Text="Täglich" FontSize="20"/>
        <local:Day DayName="Montag" Grid.Row="1"/>
        <local:Day DayName="Dienstag" Grid.Row="1" Grid.Column="1"/>
        <local:Day DayName="Mittwoch" Grid.Row="1" Grid.Column="2"/>
        <local:Day DayName="Donnerstag" Grid.Row="1" Grid.Column="3"/>
        <local:Day DayName="Freitag" Grid.Row="1" Grid.Column="4"/>
      <!-- Stündlich -->
      ...
      <!--Tagesinformationen-->
                ...
      </Grid>
    </Grid>
    <!--Ort 2-->
    <Grid>
      ...
    </Grid>
  </FlipView>
</Window>

Zu beachten ist auf oberster Ebene das <FlipView\>-Element, um zwischen kompletten Ansichten zu wechseln – in diesem Fall zwischen mehreren Orten bei der Wetteranzeige. Es folgt die Definition des <Grid\>-Elements zur Festlegung des Basislayouts (Zeilenstruktur). Dann kommen die Sublayouts für Kopfzeile, für die stündliche Vorhersage und die Tagesinformationen. Für sich wiederholende Anzeigen werden eigene User-Controls definiert.

<UserControl
  x:Class="Weather.Day"
  ...>
  <StackPanel HorizontalAlignment="Center">
    <TextBlock Margin="0,20" Text="{x:Bind DayName}"/>
    <Image HorizontalAlignment="Left" Margin="0,10" Width="50" Source="Assets/weather/day_clear.png"/>
    <StackPanel Orientation="Horizontal">
      <TextBlock FontSize="22" VerticalAlignment="Center" FontWeight="SemiBold" Text="23°"/>
      <TextBlock Margin="10,0" FontSize="16" VerticalAlignment="Center" Text="8°"/>
    </StackPanel>
    <TextBlock Text="Sonnig"/>
  </StackPanel>
</UserControl>
 
public sealed partial class Day : UserControl
{
  public Day()
  {
   this.InitializeComponent();
  }
 
  public string DayName
  {
   get { return (string)GetValue(DayNameProperty); }
   set { SetValue(DayNameProperty, value); }
  }
 
  public static readonly DependencyProperty DayNameProperty = DependencyProperty.Register("DayName", typeof(string), typeof(Day), new PropertyMetadata(null));
 
}

 

In Listing 3 sieht man beispielhaft den Quellcode für das User Control Day. Die Oberfläche wird in XAML erstellt. Wie man eine Dependency Property deklariert, ist im unteren Abschnitt des Quellcodes zu sehen. Hier ist das beispielhaft für die Eigenschaft DayName ausgeführt. DayName kann dann im User-Control selbst in der Datenbindung verwendet werden, zum Beispiel um ein Textfeld an diese Eigenschaft zu binden:

<TextBlock Margin="0,20" Text="{x:Bind DayName}"/>

Ebenso können wir bei der Verwendung des User-Control die Eigenschaft von außen definieren:

<local:Day DayName="Montag"/>

Eine erste – noch unfertige – Version der App ist in Abbildung 8 zu sehen. Bitte beachten Sie: Es handelt sich um eine Desktopapplikation und nicht um eine App für die UWP. Wir haben hier alle Möglichkeiten des Systemzugriffs und gleichzeitig mit dem Einsatz von WinUI 3 auch ein deutlich erweitertes Spektrum an grafischen Gestaltungsmöglichkeiten. Controls für das User Interface spielen dabei eine entscheidende Rolle. Ausgangspunkt sind die Basis Controls, die über WinUI 3 von Haus aus zur Verfügung gestellt werden.


Abb. 8: Erste Version der App, Wetteranzeige (noch unvollständig)

ZUM NEWSLETTER

Keine News mehr verpassen

Fazit und Ausblick

Controls sind das A und O bei WinUI 3. Mit Blick auf den Umsetzungsstand lässt sich feststellen, dass die Lücken des Windows App SDK von Version 1 gegenüber Version 0.8 bereits umfassend geschlossen wurden. In der App WinUI 3 Controls Gallery haben die ausgegrauten Bereiche – für noch nicht migrierte Controls – merklich abgenommen, d. h., fast alle Controls aus WinUI 2 sind nun auch unter WinUI 3 verfügbar. Das ist ein wichtiges Argument für die Praxis, wenn man zum Beispiel eine App von der UWP (mäßiger (Aufwand), von der WPF (größerer Aufwand) oder von WinForms (sehr großer Aufwand) nach WinUI 3 migrieren möchte.

Doch fast alle Elemente heißt eben auch nur „fast alle“. Mit Blick auf die Roadmap sehen wir auch, dass die Controls für das Zeichnen mit Stift oder Finger und die Kartenanzeige, das InkCanvas Control und das Map Control, noch fehlen. Das InkCanvas Control wurde jedoch bereits in Aussicht gestellt. Wird man in der Controls Gallery von Microsoft nicht fündig, kann man schauen, was die Drittanbieter für WinUI 3 bereits vorhalten. Sie adaptieren ihre Controls nun auch sukzessive und es gibt bereits erste Versionen von Bibliotheken für das neue Grafikframework.

Links & Literatur

[1] https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/set-up-your-development-environment?tabs=vs-2022

[2] https://docs.microsoft.com/en-us/windows/apps/design/controls/buttons

[3] https://docs.microsoft.com/en-us/windows/apps/design/controls/

[4] https://docs.microsoft.com/de-de/windows/communitytoolkit/animations/lottie

[5] https://airbnb.io/lottie/#/

[6] https://docs.microsoft.com/de-de/windows/apps/design/motion/parallax

[7] https://docs.microsoft.com/en-us/windows/apps/design/controls/pipspager

[8] https://docs.microsoft.com/de-de/dual-screen/introduction

[9] https://docs.microsoft.com/de-de/windows/apps/design/controls/person-picture

Ihr aktueller Zugang zur .NET- und Microsoft-Welt.
Der BASTA! Newsletter:

Behind the Tracks

.NET Framework & C#
Visual Studio, TFS, C# & mehr

Agile & DevOps
Best Practices & mehr

Web Development
Alle Wege führen ins Web

Data Access & Storage
Alles rund um´s Thema Data

HTML5 & JavaScript
Leichtegewichtig entwickeln

User Interface
Alles rund um UI- und UX-Aspekte

Microservices & APIs
Services, die sich über APIs via REST und JavaScript nutzen lassen

Security
Tools und Methoden für sicherere Applikationen

Cloud & Azure
Cloud-basierte & Native Apps