Das Dokument erläutert die Konzepte der Datenbindung und des MVVM-Patterns (Model-View-ViewModel) in der Softwareentwicklung, insbesondere in Bezug auf die Bindung zwischen UI und Datenmodellen. Es unterscheidet drei Arten der Datenbindung: One-Way, Two-Way und One-Time. Zusätzlich werden die Rolle von ViewModels und die Implementierung von Kommandos sowie Wertwandlern für die Synchronisation von UI-Events beschrieben.

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

2. Wer kann das MVC-Pattern
erklären?

3. Und jetzt etwas ganz anderes:
Datenbindung

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

5. DEMO

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

7. 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

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

9. DEMO

10. Datenbindung zwischen UI und Datenmodell

11. Restaurant
string Name;
string Category;
float Rating;
int RatingCount;
ImageSource Photo;
Address Address;
string OpeningHours;
string Description;
Comment[] Comments;

12. Restaurant Comment
string Name; string Title;
string Category; float Rating;
float Rating; User Author;
int RatingCount; string Text;
ImageSource Photo;
Address Address;
string OpeningHours;
string Description;
Comment[] Comments;

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

14. Restaurant
string Name;
string Category;
float Rating;
int RatingCount;
ImageSource Photo;
Address Address;
? string OpeningHours;
string Description;
Comment[] Comments;

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

16. Problem-Domäne UI-Domäne
Model ViewModel 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.

17. Model-View-ViewModel (MVVM)

18. Restaurant
string Name;
string Category;
float Rating;
RestaurantViewModel
int RatingCount;
Restaurant Restaurant;
ImageSource Photo;
float UserRating;
Address Address;
string OpeningHours;
string Description;
Comment[] Comments;

19. C# C#
class RestaurantViewModel class Restaurant
{ {
public Restaurant Restaurant { get; private set; } private float aggregatedRating = 0;
public float UserRating public float Rating
{ {
get get
{ {
return _userRating; return aggregatedRating / RatingCount;
} }
}
set
{ public int RatingCount { get; private set; }
_userRating = value;
Restaurant.Rate(_userRating); public void Rate(float rating)
} {
} aggregatedRating += rating;
} RatingCount++;
}
}

20. Restaurant
string Name;
string Category;
float Rating;
RestaurantViewModel
int RatingCount;
Restaurant Restaurant;
ImageSource Photo;
float UserRating;
Address Address;
string OpeningHours;
string Description;
Comment[] Comments;

21. C#
interface INotifyPropertyChanged
{
event PropertyChangedEventHandler PropertyChanged;
}

22. 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;
}

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

24. ValueCoverter stehen zwischen
Datenbindungsquelle und –ziel und
konvertieren Werte.

25. DEMO