Worklog SeeingSharp 2: Neuer Anstrich mit WinUI

Die Beispielapplikation von Seeing# 2 für UWP Apps habe ich jetzt schon länger nicht mehr angerührt. Vorher habe ich die App sehr ähnlich der Beispielapplikation für WPF gestaltet. Hat an sich gut funktioniert, hat aber auch nicht viel mit UWP zu tun. Um die App etwas moderner wirken zu lassen, habe ich einige Controls aus dem WinUI 2 Projekt integriert und auch einige Elemente des FluentDesigns mit aufgenommen. Allem Voran das NavigationView Element, wie man es im Screenshot schon sieht. Insgesamt sind die neuen Funktionen recht leicht anzuwenden, einige blöde Fallen gibt es aber leider…

Elemente aus WinUI 2

Zunächst ein paar kurze Infos, was WinUI 2 eigentlich ist. Microsoft ist schon etwas länger dabei, die UI-Steuerelemente aus der UWP vom Betriebssystem zu lösen und in Form von Nuget Paketen zu veröffentlichen. In naher Zukunft soll das in die WinUI 3 münden, bei der eben diese modernen Steuerelemente auch für Win32 Desktop-Applikationen verfügbar sein werden. WinUI 2 ist eine Art Zwischenschritt, bei der die bestehenden UWP Steuerelemente des Betriebssystems um einige weitere Elemente per Nuget erweitert werden. Weitere Infos zu WinUI gibt es etwa unter [1].

Für die UWP Beispielapplikation in Seeing# 2 habe ich entsprechend ein Set an Komponenten aus dem WinUI 2 Packet verwendet. Das Nuget Paket dazu ist Microsoft.UI.Xaml [2]. Verwendet habe ich nachfolgende Elemente, ein Screenshot des aktuellen Stands befindet sich direkt unter der Liste.

NavigationView: Navigations-Leiste auf der linken Seite. Dieses Control bietet schon relativ viele Funktionen speziell bezogen auf Navigationsleisten und kann relativ einfach auf eine Liste an Objekten im ViewModel gebunden werden.
AcrylBrush: Ein Brush, der einen halbtransparenten, leicht verwischenden Hintergrund erzeugt. Hier lasse ich dadurch die 3D-Ansicht etwas durch die darüber platzierten UI-Steuerelemente durchscheinen.
ProgessRing: Eine moderne Ladeanzeige, wenn von Beispiel zu Beispiel gewechselt wird.

Daneben habe ich auch einige Transition-Effekte eingebaut, was im UWP Framework allgemein relativ einfach möglich ist.

Eine sehr gute Informationsquelle für mögliche Steuerelemente ist die App Xaml Controls Gallery aus dem Windows Store [3]. Hier werden entsprechend die neuesten Controls mit Beispielen aufgelistet und können i. d. R. per Copy-Paste direkt in die eigene App integriert werden. Das Coding der Xaml Controls Gallery befindet sich entsprechend auf Github und kann komplett eingesehen werden [4].

Gleiche Namen, anderer Namensraum

Soweit das Positive, komplett problemfrei lief die ganze Geschichte natürlich nicht. Eine Schwierigkeit ist etwa, dass einige Steuerelemente aus dem WinUI 2 Paket den gleichen Namen haben wie Elemente aus dem UWP Paket (lediglich anderer Namensraum). Beispielsweise ist das bei der NavigationView der Fall. So kann es leicht passieren, dass versehentlich Steuerelemente aus der falschen Bibliothek verwendet werden und sich somit anders verhalten, wie erwartet. Ein meinem Fall hab ich alt und neu sogar versehentlich vermischt.

Doch warum ist das so? Was wie oben beschrieben schnell für Verwirrung sorgen kann, kann auch ein Vorteil sein. Werden bestehende Apps von UWP auf WinUI umgestellt, so reicht einfach das Auswechseln der importierten Namensräume. Ob das in der Praxis auch schon so funktioniert, kann ich aktuell nicht bestätigen. Ich habe dazu nur einen kleineren Versuch mit WinUI 3 und ebenfalls Seeing# gemacht. Zwar hat das erst mal genau so funktioniert, wirklich repräsentativ sind die Beispiel-Apps im Seeing# 2 Projekt aber nicht.