Datenbindung mit XAML in Windows 8

Microsoft Student Partners© 2012 Microsoft Corporation. Alle Rechte vorbehalten.

Wer kann das MVC-Pattern erklären?

Und jetzt etwas ganz anderes: Datenbindung

Bei der Datenbindung geht es darum, zwei Datenquellen bzw. -senken zu verbinden und synchron zu halten.

DEMO

Es gibt drei Arten der Datenbindung:One-Way (Wenn sich A ändert, ändert sich auch B)

A B

Es gibt drei Arten der Datenbindung:Two-Way (Wenn sich A ändert, ändert sich B und wenn sich B ändert, ändert sich A)

A B

Es gibt drei Arten der Datenbindung:One-Time (B erhält einmalig den Wert von A)

A B1x

DEMO

Datenbindung zwischen UI und Datenmodell

string Name;

string Category;

float Rating;

int RatingCount;

ImageSource Photo;

Address Address;

string OpeningHours;

string Description;

Comment[] Comments;

Restaurant

string Name;

string Category;

float Rating;

int RatingCount;

ImageSource Photo;

Address Address;

string OpeningHours;

string Description;

Comment[] Comments;

Restaurant

string Title;

float Rating;

User Author;

string Text;

Comment

Jedes XAML-Steuerelement hat eine Eigenschaft „DataContext“, die auf das Datenmodell verweist.

string Name;

string Category;

float Rating;

int RatingCount;

ImageSource Photo;

Address Address;

string OpeningHours;

string Description;

Comment[] Comments;

Restaurant

?

Was wir bisher gesehen haben:Die View ist direkt an das Model gebunden.

Model View

Das ViewModel ist eine Abstraktion der View. Es stellt Informationen aus dem Model so bereit, wie es die View benötigt. Gleichzeitig nimmt es Informationen aus der View entgegen und bringt diese in das Model ein.

Model ViewModel View

Problem-Domäne UI-Domäne

Model-View-ViewModel (MVVM)

string Name;

string Category;

float Rating;

int RatingCount;

ImageSource Photo;

Address Address;

string OpeningHours;

string Description;

Comment[] Comments;

Restaurant

Restaurant Restaurant;

float UserRating;

RestaurantViewModel

class RestaurantViewModel{ public Restaurant Restaurant { get; private set; }

public float UserRating { get { return _userRating; }

set { _userRating = value; Restaurant.Rate(_userRating); } }}

C#

class Restaurant{ private float aggregatedRating = 0;

public float Rating { get { return aggregatedRating / RatingCount; } } public int RatingCount { get; private set; }

public void Rate(float rating) { aggregatedRating += rating; RatingCount++; }}

C#

Restaurant Restaurant;

float UserRating;

RestaurantViewModel

Restaurant

string Name;

string Category;

float Rating;

int RatingCount;

ImageSource Photo;

Address Address;

string OpeningHours;

string Description;

Comment[] Comments;

interface INotifyPropertyChanged{ event PropertyChangedEventHandler PropertyChanged;}

C#

class Restaurant{ public void Rate(float rating) { aggregatedRating += rating; RatingCount++;

OnRatingChanged(); }

private void OnRatingChanged() { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs("Rating")); } }

public event PropertyChangedEventHandler PropertyChanged;}

C#

Commands erlauben es, UI-Ereignisse (z.B. Klicks) über Datenbindung an ein ViewModel weiterzuleiten.

ValueCoverter stehen zwischen Datenbindungsquelle und –ziel und konvertieren Werte.

DEMO