WPF, Silverlight, Windows Phone 8 und Windows Store Apps

Windows Store Apps: MVVM und Events
Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und Fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „Windows Store Apps: MVVM und Events’“. Viel Spaß mit XAML Expertise.

Die Implementierung des Entwurfsmusters MVVM (Model View ViewModel) bringt einen großen Vorteil mit sich: die vollständige Trennung von Design- und Businesslogik mittels Data Binding. Im ViewModel wird die Oberfläche anhand von Properties abgebildet. Dabei gelten für Aktionen wie dem Auslösen eines einfachen Buttons, dass das Handling mittels Commands umgesetzt wird. Und hier stoßen wir auch schon auf eine große Schwachstelle: Commands beschränken sich nur auf die gängigen Standardaktionen. So wird z. B. nur beim Betätigen eines Buttons das Command ausgelöst. Bei einer ListView entspräche dies der Auswahl eines Items. Ein anderes Problem ist die Tatsache, dass man keine weiteren Informationen von klassischen Events über die EventArgs erhält. Zusätzlich gibt es unter WinRT auch keine Trigger-Funktionalität.

In manchen Situationen können die Informationen zwar über CommandParameter übertragen werden, trotzdem stößt man immer wieder auf das fehlende Informationsproblem. Zudem möchte man Commands eventuell gar nicht auf die Standardaktionen binden. Viel eleganter wäre es, wenn man auf jedem beliebigen Event eines Controls ein Command auslösen könnte. Um dies zu erreichen, müsste man vom ViewModel aus auf den EventManager zugreifen. Das ist allerdings nicht so einfach. Erstens benötigt man deutlich mehr Zeilen Code und zweitens besteht eine gewisse Abhängigkeit zu den jeweiligen Controls. Ein weiteres Problem wäre ein Memory Leak des Command Bindings, das bereits seit der ersten WPF- und Silverlight-Version besteht.

Windows Store Apps: MVVM und Events

Um diese Probleme aus dem Weg zu gehen, gibt es ab Blend for Visual Studio 2013 eine Lösung in Form der Behaviors. Dabei handelt es sich um fertige UI-Funktionalitäten, die gewissermaßen als Snippet auf das gewünschte Control gezogen werden. Blend for Visual Studio 2013 bietet Behaviors, wie sie schon seit Expression Blend 4 für WPF und Silverlight bekannt sind (Tabelle 1).

Tabelle 1: Auswahl an Behaviors

Name Funktion
CallMethodAction Löst bei einem bestimmten Event eine beliebige Methode eines Zielobjekts (z. B. ViewModel) aus. Dabei werden die jeweiligen EventArgs mit übertragen.
ChangePropertyAction Bei einem Event wird der Property eines beliebigen Zielobjekts (z. B. ViewModel) nach einer beliebigen Iteration ein Wert zugewiesen.
InvokeCommandBehavior Erweitert ein Control durch ein Command, das auch auf jedem beliebigen Event ausgelöst werden kann. Dabei werden keine EventArgs übertragen, nur CommandParameter.

Ein einfaches Beispiel ist das Abfangen des SelectionChanged-Events innerhalb der Liste. Dazu wird zuerst ein Windows-Store-Projekt angelegt und mit einer ListView bestückt. Als Nächstes wird das ViewModel angelegt. Dazu wird eine einfache Klasse mit dem Namen ExampleViewModel erzeugt. Hier werden eine Methode und die dazugehörige SelectionChangedEventArgs-Signatur hinzugefügt:

public class BehaviorExampleViewModel
{
  public void SelectionChangedMethod(object sender, SelectionChangedEventArgs e)
  {

  }
}

Das ViewModel muss anschließend im Ressourcenbereich der dazugehörigen View instanziiert werden (Listing 1).

...
  xmlns:viewModels="using:BehaviorExample.ViewModels"
  x:Class="BehaviorExample.MainPage"
  mc:Ignorable="d">
  
    
  

  
    
      
    
    
      
      
      
      
    
  

Jetzt wird das benötigte Behavior hinzugefügt, indem wir das aktuelle Projekt in Blend öffnen – das funktioniert über einen Rechtsklick im Windows-Store-Projekt und die Auswahl des Kontexmenüs „Open in Blend“. Unter dem Punkt „Behaviors“ im Asset-Fenster wird das CallMethodAction Behavior mittels Drag and Drop auf die ListView gezogen.

Für die Konfiguration der Einstellungen eines Behaviors muss im Objektfenster das jeweilige Control aufgeklappt werden. Dort sind alle definierten Behavior zu finden. Nach der Auswahl des gewünschten Behaviors finden Sie sämtliche Einstellungen im Property-Fenster (Abb. 1).

Abb. 1: Properties zum Behavior anzeigen

Unter dem Punkt „Common“ der ListView Properties wird als EventName das SelectionChanged-Event ausgewählt. Ebenfalls unter „Common“, allerdings diesmal bei den CallMethodAction Behaviors, muss nun als TargetObject ein Binding zum ViewModel erfolgen (Abb. 2). Tragen Sie nun nur noch den Methodennamen ein und zwar ohne Klammern. Die XAML-Datei sollte sich daraufhin automatisch erweitert haben.

Abb. 2: „CallMethodAction Behavior“ konfigurieren

Als Letztes wird nun die Event-Methode des SelectionChanged-Events mit der gewünschten Logik erweitert:

public void SelectionChangedMethod(object sender, SelectionChangedEventArgs e)
{
  ListBoxItem selectedItem = (ListBoxItem)e.AddedItems[0];
  MessageDialog messageDialog = new MessageDialog("Hallo mein Name ist " + selectedItem.Content);
  messageDialog.ShowAsync();
} 

In diesem Beispiel wird nach dem Klick auf ein ListView-Item ein Message-Dialog mit dem entsprechenden Inhalt geöffnet (Abb. 3). In der Regel tätigt man einen Message-Dialog-Aufruf allerdings nicht direkt vom ViewModel aus.

Abb. 3: Die Auswahl eines Items wird in einem Message-Dialog dargestellt

Behavior sind eine hilfreiche Unterstützung bei der Entwicklung geworden. Sie sparen Zeit, da nicht so viel Code geschrieben werden muss, und man kann sie immer und immer wieder verwenden. Zudem bleibt der eigene Code übersichtlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -