Desktop-Anwendungen mit UI-Controls: Klassische Technologie neu aufgestellt
Trotz der unbestrittenen Vorteile einer Web-Applikation gibt es weiterhin Szenarien, in denen eine Desktop-Anwendung sinnvoll ist. Die neuste Grafikschnittstelle WinUI 3 ist jedoch gerade fertig und oft existieren bereits Anwendungen, welche zu modernisieren sind. Wie man zeitgemäße Applikationen für den Desktop auf der Basis der Windows Presentation Foundation erstellt, zeigt dieser Beitrag.
Desktop-Applikationen sind immer dann angezeigt, wenn man einen Zugriff auf die Hardware des Systems benötigt, direkt auf die Schnittstellen für einen Datenaustausch zugreifen muss, die Anwendung offline genutzt oder mit lokalen Datenbanken gearbeitet wird. Auch die Ausführungsgeschwindigkeit einer Desktop-Anwendung ist höher als eine im Browser ausgeführte Web-Applikation. Das kann beispielsweise bei grafisch aufwändigen Benutzeroberflächen wichtig sein. Auch existiert eine große Anzahl von Anwendungen schon seit vielen Jahren und eine Migration zur einer Web-Applikation ist oft mit einem sehr hohen Aufwand verbunden. Sowohl für Neuentwicklungen als auch für Migrationsvorhaben besteht daher die Notwendigkeit einer modernen und zeitgemäßen Benutzeroberfläche. Microsoft hat die aktuellen Versionen von Windows 11 und Windows 10 aktualisiert und mit einem frischen Design ausgestattet [1]. Kennzeichnend sind große Flächen, Farbverläufe, der Einsatz von Materialien und die konsequente Ausnutzung großer Bildschirmflächen mit höheren Auflösungen (s. Abb. 1). Gibt es einen berührungsempfindlichen Monitor, dann sollte auch dieses Feature von einer Anwendung unterstützt werden.
Es gibt unterschiedliche Technologien zum Erstellen von Desktop-Anwendungen. Um alle Features einer modernen Desktop-Anwendung zu nutzen, empfiehlt Microsoft den Einsatz des neuen Grafikframeworks WinUI 3. Dieses wurde im Zusammenhang mit den neuen APPSDK eingeführt und bietet zahlreiche Erweiterungen und Features, um grafisch ansprechende Desktop-Applikationen zu erstellen. Es liegt jedoch noch in einer frühen Version (Version 1.*) vor, erfährt noch einige umfassende Änderungen und wie ein Blick in die Roadmap zeigt, sind auch noch nicht alle Features implementiert. Gleichwohl lassen sich auch bestehende Applikationen nur bedingt und mit unterschiedlich hohem Aufwand zu einer App für die WinUI 3 migrieren. Dennoch sollten auch diese Anwendungen mit zeitgemäßen Features ausgestattet werden.
Windows-Desktop-Anwendungen können weiterhin mit den unterschiedlichsten Technologien entwickelt werden. Zu nennen sind beispielsweise die plattformübergreifende Programmierung mit Java und dem Einsatz unterschiedlicher Grafikbibliotheken (AWT, Swing, JavaFX, webbasiert); native Windows 32-Anwendungen, zum Beispiel mit der Microsoft Foundation Class (MFC, C#++); mit Hilfe von Werkzeugen von Drittanbietern unter Anwendung der Windows API und mehrere so genannte "verwaltete Technologien" unter Einsatz des .NET-Frameworks, wie Windows Forms (WinForms), Windows Presentation Foundation (WPF) und der Universellen Windows Plattform (UWP).
Entwickler, welche Desktop-Anwendungen mit Hilfe des .NET-Frameworks erstellt haben, haben in den letzten Jahren wahrscheinlich zu einem Großteil das Grafikframework Windows Presentation Foundation (WPF) verwendet. Dieses ist ausgereift und basiert auf einem zeitgemäßen Architekturstil zum Aufbau der Applikationen mit einer konsequenten Trennung der Anwendungsschichten. Microsoft hat die WPF vom ursprünglichen .NET-Framework (bis Version 4.8) auf die moderne .NET-Plattform .NET 6 (ursprünglich .NET Core) transformiert und auch die Toolunterstützung – inklusive eines leistungsfähigen grafischen Designers – migriert. Damit ist die WPF auch heute noch eine gute technologische Basis, um Desktop-Anwendungen zu erstellen. Blickt man in die Palette der Standard User Interface-Controls, dann ist zu erkennen, dass die Technologie schon einige Jahre alt ist. Durch den Einsatz von leistungsfähigen Controls können jedoch fehlende Features in Funktion und Design sehr leicht nachgerüstet werden. Die WPF erlaubt durch den Einsatz von Stilen, Ressourcen und Themen eine umfassende Anpassung in allen visuellen Bereichen.
Controls von Drittanbietern
Anbieter von User-Interface-Komponenten unterstützen umfassend das Grafikframework WPF mit einer großen Anzahl von leistungsfähigen und designtechnisch ansprechenden Controls. Auf diese Weise kann man zwei Ziele simultan erreichen:
- Integration neuer Funktionen, welche durch die Basis-Controls nicht abgedeckt werden.
- Anpassung des Designs an das Look-and-feel von Windows 11 bzw. der aktuellen Versionen von Windows 10.
Umfassende Sammlungen von Controls für WPF werden beispielsweise von den folgenden Anbietern bereitgestellt:
- Syncfusion: Es werden über 100 Controls für WPF aus allen Bereichen angeboten. Dabei sind Basis-Controls wie Eingabeelemente (Integer TextBox, Numeric Updown), aber auch umfassende Steuerelemente wie ein Report Designer oder einen Diagramm-Designer darunter.
- DevExpress: Die Sammlung umfasst mehr als 130 Controls. Auch hier haben wir Controls aus allen Anwendungsbereichen, beispielsweise ein Property Grid oder moderne Kalender- und Zeitplanungs-Controls.
- Telerik: Sehr umfassende Library mit mehr als 150 einzelnen Controls. Neben vielen visuellen Controls aus allen Bereichen der Anwendungsentwicklung, zum Beispiel ein DataGrid, eine RichTextBox usw., gibt es auch nicht visuelle Steuerelemente, welche Funktionalität kapseln und dem Entwickler bereitstellen, beispielsweise eine zip-Library.
- Actipro: Über 100 Controls umfasst die Sammlung des Anbieters. Es werden auch hier die typischen Anforderungen einer Business-Applikation adressiert, zum Beispiel mit Chart-Controls oder mit Hilfen zur Gestaltung eines Wizards (schrittweiser Assistent).
Neben den umfassenden Sammlungen an Steuerelementen – wie die hier erwähnten – gibt es auch einzelne Controls, welche durch kommerzielle Anbieter oder auch durch die Community bereitgestellt werden. Benötigt man nur für eine spezielle Aufgabe ein angepasstes Feature, dann kann man ein solches Control verwenden. Möchte man das User Interface einer kompletten Anwendung gestalten bzw. modernisieren, dann ist man i. d. R. mit der Nutzung einer umfassenden Komponenten-Suite gut beraten. Design und Handling sind hier aufeinander abgestimmt und man kann die Anforderungen meist einfacher erreichen.
Die Einbindung der User-Interface-Controls in WPF-Applikationen ist ein einfacher und standardisierter Vorgang. Die meisten Controls werden als Package über die Plattform NuGet zur Verfügung gestellt. Über den integrierten Paketmanager von Visual Studio wird das gewünschte Paket ausgewählt und als Referenz der Anwendung hinzugefügt. Bei der Gestaltung der Oberfläche kann das visuelle Control wie jedes andere Standard-Control verwendet werden. Je nach Art der Lizenzierung müssen dem Compiler Informationen – wie ein Lizenzschlüssel – im Quellcode der App verfügbar gemacht werden. Die grundsätzliche Vorgehensweise wird im kommenden Abschnitt anhand eines häufig genutzten DataGrid-Controls gezeigt.
Ein DataGrid als Herz einer Business-Applikation
Desktop-Anwendungen in Unternehmen (Business-Applikationen) sind in vielen Fällen Anwendungen, welche auf Daten aus den unterschiedlichsten Datenbanken zugreifen. Für die Präsentation und Bearbeitung der Daten hat sich der Einsatz von tabellarischen Darstellungen etabliert. Man verwendet so genannte DataGrid-Komponenten, welche man umfassend konfigurieren kann. Dabei geht es nicht nur um eine Darstellung der Daten, sondern auch um vielfältige integrierte Funktionen, wie Filtern, Gruppieren, individuelle Formatierung der Zellen, ein direktes Editieren der Daten in der Tabelle (Inline-Editing) und das Unterstützen der sogenannten CRUD-Operationen (Create, Read, Update, Delete) usw. Im Folgenden soll die Arbeit mit einem solchen DataGrid anhand eines Beispiels gezeigt werden. Dazu werden folgende Technologien verwendet:
- Applikation: Eine Desktop-Applikation mit WPF, wahlweise mit .NET 4.*/ .NET 6.
- Entwicklungsumgebung: Visual Studio 2022.
- DataGrid-Komponente: RadGridView von Telerik [2].
Das DataGrid zeichnet sich durch die folgenden zentralen Eigenschaften aus:
- Möglichkeiten der Datenbindung, d. h. alle Daten im DataGrid können über Datenbindung bereitgestellt werden. WPF-Applikationen nutzen dazu i. d. R. das MVVM-Architektur-Pattern,
- Funktionen wie Gruppieren, Sortieren und Filtern der Daten,
- Aggregationsfunktionen (Summe, Durchschnitt) von Datenspalten,
- statische Zeilen und Spalten,
- umfassende Anpassung des Designs mit Templates und Themen,
- Selektion und Auswahlmöglichkeiten für Zellen, Zeilen und Spalten und
- Eignung für eine sehr große Anzahl von Datensätzen (>1 Mio. Zellen), dank Virtualisierung.
Das DataGrid wird direkt im XAML-Quellcode des Fensters eingebunden:
<Window x:Class="TelerikWpfApp3.MainWindow"
…
Title="MainWindow">
<Grid>
<telerik:RadGridView />
</Grid>
</Window>und auch unmittelbar im Designer von Visual Studio angezeigt und kann dort über die Eigenschaften konfiguriert werden (Abb. 2).
Mittels Datenbindung erfolgt die Kopplung des DataGrid an die darzustellenden Daten der Anwendung.
<Grid>
...
<telerik:RadGridView x:Name="RadGridView1"
ItemsSource="{Binding Employees}"
AutoGenerateColumns="False"
CanUserFreezeColumns="False"
CanUserResizeColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewToggleRowDetailsColumn />
<telerik:GridViewDataColumn Header="First Name"
DataMemberBinding="{Binding FirstName}" />
<telerik:GridViewDataColumn Header="Last Name"
DataMemberBinding="{Binding LastName}" />
…
</telerik:RadGridView.Columns>
</telerik:RadGridView>Die Bindung an die Datenquelle erfolgt über die Eigenschaft ItemsSource.
ItemsSource="{Binding Employees}"
Die einzelnen Spalten werden nach dem folgenden Muster definiert:
<telerik:GridViewDataColumn Header="First Name"
DataMemberBinding="{Binding FirstName}" />
Dabei kommt die übliche Zwei-Wege-Datenbindung zur Anwendung, d. h. Änderungen im DataGrid werden an die Datenquelle – in diesem Fall eine Liste des benutzerdefinierten Datentyps Employees – weitergegeben und ebenso führen Änderungen in den Daten zu einer Aktualisierung der Darstellung. Das DataGrid zeigt dabei nicht nur primitive Datentypen an, sondern ist auch in der Lage, komplexere Datentypen, wie Bilder, darzustellen.
Bereits dieser Screenshot zeigt, dass ein modernes User-Interface-Control das Design einer Anwendung positiv verändern kann. Über Themen kann das Erscheinungsbild weiter nach den Wünschen angepasst werden, zum Beispiel, indem man ein dunkles Design (Dark Mode) verwendet (Abb. 4).
Das DataGrid kann über Eigenschaften auch funktionell konfiguriert werden. Auch dazu ein Beispiel, wie es in der Praxis sehr häufig bei großen Tabellen verwendet wird. Um den Überblick über eine große Anzahl von Daten zu behalten, können Zeilen oder Spalten der Tabelle fixiert werden. Eine solche fixierte Datenspalte oder -zelle ist vom Scrolling ausgenommen und wird statisch angezeigt.
Bei der Arbeit mit Datentabellen ist es eine Frage, wie man mit sehr umfangreichen Datensätzen umgeht. Datentabellen können mehrere 100.000 oder sogar Millionen von Datensätzen aufweisen. Würde man diese alle simultan in das DataGrid laden, dann würde die Datenanzeige nicht mehr performant ausgeführt. Um dieses Problem zu lösen, wird das Prinzip der User-Interface-Virtualisierung angewendet. Das API von RadGridView unterstützt dieses Feature, was dazu führt, dass nur diejenigen Elemente geladen werden, welche in den sichtbaren Bereich fallen. Dadurch wird der Speicherbedarf reduziert und die Ladezeit verkürzt. Insgesamt wird die Performance stark verbessert. Die ColumnVirtualization (Spalten-Virtualisierung) und die RowVirtualization (Zeilen-Virtualisierung) sind standardmäßig aktiviert. Im Ergebnis können im DataGrid auch sehr umfassende Datenbestände verarbeitet werden, d. h. das Scrolling stockt auch durch sehr große Datenbestände nicht.
Die Grid-Steuerung nutzt horizontale und vertikale Virtualisierung und führt Container-Recycling ein, um die Geschwindigkeit zu verbessern und die Speichernutzung zu reduzieren. Dies ist von großer Bedeutung, wenn das Steuerelement an große Datensätze gebunden ist. Das Container-Recycling treibt die Geschwindigkeit des horizontalen und vertikalen Scrollens weiter voran, sodass RadGridView die vorhandenen Container für die verschiedenen Datenelemente aus der Quellsammlung wiederverwenden kann, anstatt neue zu erstellen.
Fazit und Ausblick
Desktop-Applikationen, gleichgültig ob es sich um eine Neuentwicklung oder um die Migration einer bestehenden Anwendung handelt, können heute ansprechend im Design und sehr gut im funktionalen Handling (User Experience) gestaltet werden. Mit modernen Controls für das User Interface können auch Apps für die WPF an das Design von Windows 11 angepasst werden. Ein DataGrid ist dabei ein sehr häufig genutztes Control für betriebliche Applikationen.
