Daniel Prokhorov
Heutige Desktop-Anwendungen werden häufig mithilfe des von Microsoft entwickelten GUI-Frameworks Windows Presentation Foundation (WPF) entwickelt - insbesondere dann, wenn die Anwendung auf dem Windows Betriebssystem laufen soll. WPF beinhaltet ein komplettes Designkonzept mit dem Ziel eine ideale User Experience zu erzeugen. Passend dazu gibt es eine umfangreiche Sammlung an Steuerelementen wie z.B. Buttons, DropDown Listen, Expander, ToolBar, etc.
Die Beschreibung von Verhaltensweisen, Animationen sowie der gesamte „Look and Feel“ der Oberflächen erfolgt mittels XAML, eine speziell für WPF von Microsoft entwickelte Beschreibungssprache, die sehr an der XML-Syntax angelehnt ist. Die hierarchische Strukturierung, ein deklaratives Konzept sowie die Verwendung XML kodierter Objekte erlaubt es den Programmierern oder UI-/UX-Designern beliebig komplexe Oberflächen mit vergleichsweise geringem Zeitaufwand zu implementieren. Eingebettete Tools, wie z.B. der XAML-Designer in Visual Studio ermöglichen zudem eine Preview der aktuell in XAML zusammengesetzten Oberfläche.
Die Beschreibung von Verhaltensweisen, Animationen sowie der gesamte „Look and Feel“ der Oberflächen erfolgt mittels XAML, eine speziell für WPF von Microsoft entwickelte Beschreibungssprache, die sehr an der XML-Syntax angelehnt ist. Die hierarchische Strukturierung, ein deklaratives Konzept sowie die Verwendung XML kodierter Objekte erlaubt es den Programmierern oder UI-/UX-Designern beliebig komplexe Oberflächen mit vergleichsweise geringem Zeitaufwand zu implementieren. Eingebettete Tools, wie z.B. der XAML-Designer in Visual Studio ermöglichen zudem eine Preview der aktuell in XAML zusammengesetzten Oberfläche.
XAML-Designer in Visual Studio 2019 [Quelle: https://devblogs.microsoft.com/visualstudio/whats-new-in-xaml-developer-tools-in-visual-studio-2019-for-wpf-uwp/]
Das wohl wichtigste Konzept von WPF ist die Verwendung von Bindings, womit das Binden von Daten an Steuerelemente ermöglicht wird. So kann eine Verbindung zwischen einer Datenquelle (z.B. einer Objektliste) und der Benutzeroberfläche hergestellt werden. Dieses Konzept ist ein zentraler Bestandteil des MVVM (Model-View-ViewModel) Entwurfsmusters, welches eine deutliche Trennung zwischen der Business Logic einer Anwendung sowie dessen Design zum Ziel hat. Bei konsequenter Umsetzung des Entwurfsmusters hat man im Verlaufe eines agilen Softwareprojektes damit die Möglichkeit, die Oberflächendarstellung mit überschaubarem Zeitaufwand an die neuen Design Requirements (bei z.B. Änderung des Corporate Designs) anzupassen.
Die Einführung von WPF erfolgte bereits im Jahre 2006. Seitdem hat sich das Aussehen von Oberflächen sowie von UI-Steuerelementen im Allgemeinen sehr stark verändert. Diese Entwicklung ist heutzutage insbesondere im Web oder auch auf dem Smartphone zu beobachten. In dieser Zeitspanne wurde das standardmäßige Design in der Klassenbibliothek von WPF jedoch kaum an die heutigen allseits bekannten Design Languages wie z.B. Googles Material Design angepasst bzw. angelehnt. Aufgrund der Tatsache, dass das Material Design sehr populär und auf sehr vielen Webseiten sowie Android Smartphones der De-Facto-Standard-Design zu finden ist, ist es naheliegend, eine Desktop-Anwendung zu entwickeln, die dem Benutzer eine ihm bekannte Designphilosophie und -sprache bietet.
Die Einführung von WPF erfolgte bereits im Jahre 2006. Seitdem hat sich das Aussehen von Oberflächen sowie von UI-Steuerelementen im Allgemeinen sehr stark verändert. Diese Entwicklung ist heutzutage insbesondere im Web oder auch auf dem Smartphone zu beobachten. In dieser Zeitspanne wurde das standardmäßige Design in der Klassenbibliothek von WPF jedoch kaum an die heutigen allseits bekannten Design Languages wie z.B. Googles Material Design angepasst bzw. angelehnt. Aufgrund der Tatsache, dass das Material Design sehr populär und auf sehr vielen Webseiten sowie Android Smartphones der De-Facto-Standard-Design zu finden ist, ist es naheliegend, eine Desktop-Anwendung zu entwickeln, die dem Benutzer eine ihm bekannte Designphilosophie und -sprache bietet.
Aus den genannten Gründen wurde auch die Eigenentwicklung „SPARKS Commander“ der SPARKS Solutions GmbH mit der bestmöglichen Übereinstimmung von Google Material Design Guidelines entwickelt. Hierzu wurde das unter der MIT Lizenz veröffentlichte Toolkit MaterialDesignInXAML von James Willock genutzt. Dieses Toolkit bietet die Möglichkeit das moderne Design von Google ebenfalls für WPF-Anwendungen nutzen zu können.
Installiert wird das UI Paket über NuGet und ist unter dem Namen MaterialDesignThemes gelistet. Die Bereitstellung des Pakets erfolgt über mehrere Ressource Dictionaries. Um eine anwendungsweite Instanz zu gewährleisten, werden diese in der App.xaml des gesamten WPF Projekts deklariert. Einmal deklariert, werden alle Standardsteuerelemente automatisch in das Material Design überführt. Möchte man nun spezifische Farbeffekte, Schriftarten, Animationen etc. anpassen, so bieten die dependency properties beim Window Element den Zugang dafür.
Das Toolkit hat ausdrücklich das Ziel, lediglich den Material Design Guidelines zu folgen, ohne die logische Funktionalität der Standardsteuerelemente zu ändern, weshalb es kaum neue Steuerelemente gibt. Ausnahmen stellen die sogenannte ColorZone sowie der TimePicker dar. Erweitern kann man das Toolkit mit dem ebenfalls unter der MIT Lizenz veröffentlichtem Toolkit MaterialDesignExtensions, welches auf das MaterialDesignInXaml aufbaut. Dieses bietet dann neue Steuerelemente wie z.B. SideNavigation, NumberSpinner oder eine Autocompletion Liste.
Installiert wird das UI Paket über NuGet und ist unter dem Namen MaterialDesignThemes gelistet. Die Bereitstellung des Pakets erfolgt über mehrere Ressource Dictionaries. Um eine anwendungsweite Instanz zu gewährleisten, werden diese in der App.xaml des gesamten WPF Projekts deklariert. Einmal deklariert, werden alle Standardsteuerelemente automatisch in das Material Design überführt. Möchte man nun spezifische Farbeffekte, Schriftarten, Animationen etc. anpassen, so bieten die dependency properties beim Window Element den Zugang dafür.
Das Toolkit hat ausdrücklich das Ziel, lediglich den Material Design Guidelines zu folgen, ohne die logische Funktionalität der Standardsteuerelemente zu ändern, weshalb es kaum neue Steuerelemente gibt. Ausnahmen stellen die sogenannte ColorZone sowie der TimePicker dar. Erweitern kann man das Toolkit mit dem ebenfalls unter der MIT Lizenz veröffentlichtem Toolkit MaterialDesignExtensions, welches auf das MaterialDesignInXaml aufbaut. Dieses bietet dann neue Steuerelemente wie z.B. SideNavigation, NumberSpinner oder eine Autocompletion Liste.
Beispielhafte Darstellung von Material Design Elementen mit dem MaterialDesignExtension Toolkit [Quelle: https://github.com/spiegelp/MaterialDesignExtensions]
Die Flexibilität sowie das Konzept von WPF und die dazugehörigen Material Design UI Pakete machen die Bedienung einer Desktop-Anwendung aus Benutzersicht intuitiver, moderner sowie im Allgemeinen aufgeräumter, was sich auch der SPARKS Commander zu eigen macht.
Dadurch, dass sich die Designsprache sehr nah am Web sowie am Smartphone orientiert, kann SPARKS den Commander auch auf touchbasierten Windows Laptops laufen lassen, wodurch das „App-Feeling“ sich direkt beim User einstellt.
Dadurch, dass sich die Designsprache sehr nah am Web sowie am Smartphone orientiert, kann SPARKS den Commander auch auf touchbasierten Windows Laptops laufen lassen, wodurch das „App-Feeling“ sich direkt beim User einstellt.
