Der Klebstoff

Ein Bindeglied zwischen der View und dem Model wird nun benötigt. Das View Model ist nicht nur die sprachliche Komposition der zwei erwähnten Bestandteile des MVVM, sondern auch die technische Lösung. Das View Model stellt die Daten des Models für die View zur Verfügung. Dies geschieht über das Data Binding. Wie der Begriff vermuten lässt, wird hierdurch ein Prozess beschrieben, wie Daten von einer bestimmten Quelle an die Oberfläche gebunden werden können. Die Quelle stellt das View Model dar. Es stellt eine für das User Interface abrufbare Eigenschaft zur Verfügung. Die Eigenschaft wird vom View Model mit Hilfe des Models verwaltet.

[sourcecode language=”csharp”]
namespace T_SimpleDataBinding
{
public class StatusMessageViewModel
{
public string StatusMessage { get; set; }

public StatusMessageViewModel()
{
StatusMessageModel model = new StatusMessageModel();
model.StatusRequestCompleted += ModelStatusRequestCompleted;

model.BeginStatusRequest();
}

public void ModelStatusRequestCompleted
(object sender, StatusEventArgs e)
{
StatusMessage = e.Result;
}
}
}
[/sourcecode]
View Model für Beispielanwendung “Einfaches Data Binding”

Nun sehen wir in Zeile 5 die Eigenschaft, an die sich die View zukünftig binden wird. Im Konstruktor des StatusMessageViewModel wird das Model instanziert. Das View Model schließt in Zeile 10 das erwähnte Abonnement ab. Wir erinnern uns: Sobald das Model die Daten geladen hat soll das ViewModel dies Daten empfangen und dann über die Property der View zur Verfügung stellen. Sobald das Event durch das Model „gefeuert“ wurde wird in der Methode ModelStatusRequestCompleted in Zeile 15, die die Statusnachricht in der Eigenschaft setzt.

Die View und das ViewModel werden mit einander verheiratet. Dazu muss das ViewModel der View bekannt gemacht werden. Dies kann auf unterschiedlichen Wegen erfolgen. Zum einen direkt im XAML- Code:

[sourcecode language=”html”]
<UserControl.Resources>
<Lokal:StatusMessageViewModel x:Key="BindingViewModel"/>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource BindingViewModel}"/>
</UserControl.DataContext>
[/sourcecode]
Einbetten des View Models in die View

In der StatusMessageView werden diese Tags hinzugefügt. Innerhalb von UserControl.Resources wird das View Model (grau unterlegt) bekannt gemacht. Dazu wird ein Namesraum benötigt, damit die Klasse in dem XAML- File serialisiert werden kann:

[sourcecode language=”html”]
xmlns:Lokal="clr-namespace:T_SimpleDataBinding"
[/sourcecode]
Deklaration eines View Models in der View.

Außerdem wird das View Model dem DataContext des UserControls hinzugefügt. Dies stellt einen Pfad dar. Die View kann nun alle öffentlichen Properties auslesen, später sogar noch mehr.

Eine weitere Möglichkeit ist die Instanzierung in der Code Behind Datei der StatusMessageView.xaml:

[sourcecode language=”csharp”]
using System.Windows.Controls;

namespace T_SimpleDataBinding
{
public partial class StatusMessageView : UserControl
{
private StatusMessageViewModel viewModel;

public StatusMessageView()
{
InitializeComponent();

viewModel = new StatusMessageViewModel();

this.DataContext = viewModel;
}
}
}
[/sourcecode]
Instanzierung eines View Models in der Code Behind Datei der View

Was jetzt noch bleibt ist lediglich unserem Textelement in der Benutzeroberfläche die zu bindende Ressource bekannt zu machen. Dazu leitet man das Data Binding mit geschweiften Klammern und dem darauf folgenden Schlüsselwort Binding ein. Das Attribut Path erhält den Wert der gebunden Property, deren Wert dann in dem TextBlock erscheint.

[sourcecode language=”html”]
<UserControl x:Class="T_SimpleDataBinding.StatusMessageView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:Lokal="clr-namespace:T_SimpleDataBinding">
<UserControl.Resources>
<Lokal:StatusMessageViewModel x:Key="BindingViewModel"/>
</UserControl.Resources>
<UserControl.DataContext>
<Binding Source="{StaticResource BindingViewModel}"/>
</UserControl.DataContext>
<Grid>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center"
Text="{Binding Path=StatusMessage}"/>
</Grid>
</UserControl>
[/sourcecode]
vollständige View mit Data Binding

Sobald die Anwendung kompiliert und gestartet wurde erhalten wir ein so genanntes „Hallo Welt“- Beispiel für MVVM.

clip_image002
“Hallo MVVM”

Gregor

Gregor Woiwode ist Angestellter der heco GmbH, wo er als Sofwareentwickler und Trainer tätig ist. Sein Fokus liegt in der Erstellung von Webportalen mit dem .NET- und Angular-Framework. Von 2007 bis 2010 studierte er Telekommunikationsinformatik an der Hochschule für Telekommunikation in Leipzig und schloss den Studiengang als Bachelor of Engineering ab. Derzeit studiert er im Studiengang Wirtschaftsinformatik um die Auszeichnung Master of Science zu erhalten.

What do you think? Please leave a Comment below!