Mit der Windows Präsentation Foundation (kurz WPF) ermöglicht Microsoft erstmals eine Technologie, das die Oberfläche (GUI als XAML-Code) vom Sourcecode (z.B. C#, VB.Net) 100% getrennt wird. Folglich wird der Architektur der Anwendung automatisch an Flexibilität wiedergegeben. Dass anschließend die verarbeiteten Daten vom Sourcecode auch auf der GUI angezeigt werden können, wird eine Datenbindung (Data-Binding) Technologie angeboten. Das Data-Binding wird in der Code-Behind-Datei der GUI zugewiesen.

Doch zählt die Code-Behind-Datei gleichermaßen zur GUI (View), was sofort eine große Gefahr für die Trennung mit sich bringt. Es verführt zu viel Logik mittels C# um das Data-Binding herum zu schreiben. Die View sollte dagegen keinen anderen Sourcecode als nur die Zuweisungen über Data-Binding verfügen. Aber das ist größtenteils nicht so einfach, weil unsere BusinessLogik (Model) unabhängig der Data-Binding-Technologien stehen muss. Das Model soll jederzeit durch andere Klassen erweiterbar sein. Zum Beispiel durch die Verwendung des Decorator-Pattern.

Nun muss das Problem noch einmal Analysiert werden. Die View (Code-Behind-Datei) sollte nur Zuweisungen mittels Data-Binding übernehmen, und das Model sollte unabhängig der verwendeten View seine Aufgaben zur Verfügung stellen. Es wird also ein unabhängiger Vermittler benötigt. Dieser Vermittler sollte dann auch auf das Model zugreifen können und daraus eine Data-Binding Unterstützung anbieten. Allerdings sollte sich der Vermittler auch um die Aufgaben der Validierungen der View kümmern, das infolgedessen die richtige Bindung statt finden kann.

Das Model-View-ViewModel (MVVM)

Auch hier gilt, dass es für ein immer wieder aufkehrendes Problem ein Entwurfsmuster (Design-Pattern) gibt. Das Model-View-ViewModel kurz MVVM! Das Pattern bietet zu dem oben genannten Problem die ideale Lösung an. Der so erwünschte Vermittler wäre hier das ViewModel. Eine Kombination von View (GUI) und Model (BusinessLogik). Noch einmal eine kurze Zusammenfassung der Grundsätze der einzelnen Schichten:

Abb. 1 – Das Model-View-ViewModel

Model

Das Model entspricht der BusinessLogik. Die BusinessLogik kümmert sich um Validierungen oder Verarbeitungen bestimmter Daten oder anderen Systemverarbeitungen.

View

Die View ist gleichstehend für die Oberfläche (GUI) der Anwendung. Bei WPF ist es der XAML-Code und der dazugehörigen Code-Behind-Datei.

ViewModel

Das ViewModel steht als Wrapper für die Kommunikation von Model und View. Im ViewModel kommt zudem die gesamte Logik der einzelnen GUI-Komponenten (z.B. Button-Event). Außerdem wird noch die Abnahme der Daten vom Model entgegen genommen, die Daten werden dann für das Data-Binding Konvertiert und der Code-Behind-Datei (View) mittels Data-Binding gebunden.

Oberflächen-Design mit Expression Blend

Microsoft stellt für den Entwurf von WPF-Oberflächen die Anwendung Microsoft Expression Blend zur Verfügung. Die Entwicklung der Software kann somit auf den Entwickler und den Grafik-Designer aufgeteilt werden. Die Oberfläche von Expression Blend besteht selbst aus WPF. Interessanterweise wurde auch vom Microsoft Expression Blend Entwicklungs-Team das MVVM ins Leben gerufen.

Derzeit ist Expression Blend mit der aktuellen Version 2 erhältlich. Microsoft veröffentlichte bereits eine Beta von Expression Blend 2.5, die allerdings aus bestimmten Gründen eingestampft wurde. Doch enthielt die Beta 2.5 jegliche Verbesserungen und Erweiterungen, zum Beispiel eine Entwicklung von Silverlight 2. Nun wurde mit dem einstampfen der Beta diese Funktionalitäten als Service Pack 1 für Blend 2.0 bekannt gegeben. [ Download SP1 ]

MVVM mit Expression Blend binden (Beispielanwendung)

Für diese Beispielanwendung sollten auf jeden Fall gewisse Bedienungsgrundkenntnisse von Expression Blend 2 bestehen. Die Beispielanwendung ist sehr einfach aufgebaut und zeigt im ersten Teil dieses Artikels nur das Anzeigen von Daten.

Um das MVVM mittels Expression Blend zu binden, muss erst einmal ein Model und ein ViewModel mittels Visual Studio erzeugt werden. Dazu wird ein neues „WPF Application“-Projekt in Visual Studio mit dem Namen WpfApplication.MVVMExample erzeugt.

Abb. 2 – Ein neues WPF Projekt in Visual Studio anlegen

Als erstes muss eine einfache Entität für das Beispiel dienen. Dafür erzeugen wir ein eigenes Verzeichnis mit Entity. In das neue Verzeichnis legen wir eine neue Klasse mit dem Namen Persons an.

Abb.3 – Ein Entity-Verzeichnis im Projekt anlegen

Persons soll nur mit einer Eigenschaft (Property) Name als Typ String für ein überschaubareres Beispiel dienen. Der Klasse muss sich nur mit einem anderen String wert nach außen bekannt geben, das spielt für die Spätere Datenbindung eine wichtige Rolle. Dies kann mittels override string ToString() umgesetzt werden.

Abb. 4 – Eine neue Klasse Persons als Entität

Damit die Entität auch mit Daten gefüllt zur Verfügung gestellt werden kann, muss eine künstliche Datenbank (Mock) her. Diese MockDatenbank kann für dieses Beispiel ruhig in das Model ausgelagert werden, da eine BusinessLogic in spätere Geschäftsanwendungen ebenfalls nur verarbeitete Daten zum Frontend weitergibt. Doch im Normalfall werden externe Daten Kommunikationen (z.B. Datenbank) über eine eigene Schicht (DataAccessLayer) übernommen.

Abb.5 – Ein Model-Verzeichnis im Projekt anlegen

Im Projekt wird ein neues Verzeichnis mit Model und einer neuen Klasse MockDataBase erzeugt. Die MockDataBase-Klasse soll Statisch dem Projekt zur Verfügung stehen. Eine Statische Methode mit GetPeople liefert eine Liste als IList (Interface für List) mit 2 Personen zurück. Der Sourcecode sollte selbsterklärend sein, siehe Abb. 6.

Abb. 6 – Eine Mock Datenbank mit zwei Personen in einer Liste als Datenquelle

Als letztes To-Do in Visual Studio soll nun das ViewModel erzeugt werden. Zudem wird ein neues Verzeichnis mit dem Namen ViewModel erzeugt. Die Klasse bekommt den Namen PersonsViewModel.

Abb. 7 – Das ViewModel-Verzeichnis im Projekt anlegen

Jetzt kommt eines der Interessantesten Teile, die Daten der Datenbank (die 2 Personen) sollen nun für die View für das Data-Binding kompatibel gemacht werden. Dazu Hilft uns die CollectionView, die mit dem Namen Persons als Eigenschaft (Property) angelegt wird. Bein Konstruktor des ViewModels, soll automatisch die Liste der MockDatenbank geladen und als CollectionView erzeugt werden.

Abb. 8 – Die Liste als CollectionView Data-Binding kompatibel machen

Wieso muss das in eine CollectionView? Es muss nicht dringend zur CollectionView konvertiert werden, eine direkte Bindung zu IList (ListCollectionView) ist sogar die schnellere Datenverarbeitungsvariante. Der einigste Vorteil mittels CollectionView ist das es freundlicher zur WPF-Datenbindung ist. Es stellt eine Ansicht zum Gruppieren, Sortieren, Filtern und Navigieren in einer Datenauflistung dar. Wenn eine spätere Komponente im XAML-Code die Eigenschaft (Property) IsSynchronizedWithCurrentItem auf True gesetzt wird, wird zwischen dem ViewModel und der View eine richtige Synchronisierung der Daten vorgenommen. Deswegen ist es auch die etwas langsamere aber effektivere Variante.

Weitere und ausführlichere Informationen über Data-Binding unter: http://msdn.microsoft.com/de-de/library/ms752347.aspx

Damit nun das ViewModel für die gesamte WPF-Oberfläche zur Verfügung steht, muss es mittels Datenbindung über die View (Code-Behind-Datei) zugewiesen werden. Für die komplette Anwendung wird die Eigenschaft (Property) DataContext auf das ViewModel gesetzt. Der DataContext erkennt nun automatisch die enthaltene CollectionView und baut ein Binding auf.

Abb. 9 – DataContext auf ViewModel setzen

Nun erfolgt der nächste Teil in Expression Blend. Die folgende Arbeit, sollte Hauptsächlich vom Grafik-Designer übernommen werden und das Beispiel zeigt, wie einfach eine Datenbindung zum ViewModel gemacht wird.

Beim Starten von Expression Blend kann das Visual Studio Projekt unter „Open Site…“ geöffnet werden.

Abb. 10 – Mit Expression Blend das Projekt öffnen

Jetzt sieht man eine Leere Oberfläche mit weißem Hintergrund. Die Personen sollen allerdings in einer ComboBox erscheinen. Die ComboBox wird aus der Tool-Box auf die Oberfläche mit dem Mauszeiger über Drag & Drop gezogen.

Abb. 11 – Die Tool-Box von Expression Blend

Der Grafik-Designer sollte zudem jeder Komponente einen richtigen Namen vergeben. Dabei sollten die .NET Framework Design Guidelines eingehalten werden.

Abb. 12 – ComboBox auf der Oberfläche

Zum verändern des Namens, muss auf das ComboBox oder der jeweiligen Komponente geklickt werden, so das es Markiert angezeigt wird. Auf der rechten Seite des Bildschirms sind die Eigenschaften (Properties), wo anschließend ganz oben das Namensfeld zum ändern steht.

Abb. 13 – Eigenschaften für Komponenten

Die ComboBox wird nun auf der Oberfläche in ein Tabellenartiges Layout gelegt, indem man mit dem Mauszeiger am Rand der Oberfläche, die Organgenen Linien dementsprechend setzt. Nachkommend zieht man die ComboBox an die passende Stelle. Dieser Vorgang kann oder sollte dementsprechend vor der Belegung von Controls geschehen.

Abb. 14 – Das Layout mittels Grid-Linien Tabellenartig Designen

Als nächstes folgt der letzte Schritt, das anbinden auf die ViewModel enthaltene Eigenschaft (Propertie) Persons das über das DataContext bereits gebunden wurde. Es wird noch einmal die ComboBox ausgewählt und in die Eigenschaften (Properties) gewechselt. Dort muss neben dem Element ItemsSource auf den kleinen weißen Punkt geklickt werden. Der Punkt steht für das Data-Binding Menü des jeweiligen Elements. Im Menü wird „Data Binding..“ ausgewählt.

Abb. 15 – Das Data-Binding Menü jener Elemente

Beim folgendem Fenster wird der dritte Punkt oben im Tab „Explicit Data Context“ aufgerufen. Jetzt muss nur noch der Hacken bei „Use a custom path expression“ gewählt sein und geben im Feld daneben den Namen der CollectionView vom ViewModel dementsprechend Persons ein.

Abb. 16 – Data-Binding in Expression Blend erzeugen

Die Anwendung mit WPF und MVVM ist nun fertig. Genau wie unter Visual Studio, kann im Blend mittels [F5]-Taste das Projekt gestartet werden. Es stehen nun die beiden Personennamen zur Auswahl.

Im zweiten Teil des Artikels folgt dann ein Beispiel, wie ein Klicken vom Button ohne erzeugten Events unabhängig vom ViewModel behandelt wird.

Download Source Code

WpfApplication.MVVMExample.zip (44,85 kb)

Wenn ihnen der Artikel gefallen hat oder er für sie hilfreich war, bitten "kicken" sie ihn.