Wpf #3 MVVM

Az előző két bejegyzésben található példák segítségével egy alap Wpf adatkötés már felépíthető. A kód legszebb és végleges formájához még egy fontos lépés hiányzik.

Legyen adott egy osztály, amely csak adatokat tartalmaz, illetve a benne tárolt adatok kezelését felügyeli. Ez lesz a Model osztály. Az előzőekben bemutatott deklaráció ide kerül át. 

public class Model : INotifyPropertyChanged { private int _textValue; public int TextValue { get { return _textValue; } set { _textValue = value; OnPropertyChanged("TextValue"); } } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } public Model(int value) { TextValue = value; } }

A Model osztályra csak és kizárólag egy helyen történik hivatkozás, ez pedig a ViewModel osztály. Minden Model osztály egymástól független, zárt egységet alkot. A ViewModel osztály több Model osztályra is hivatkozhat.

A ViewModel osztály ennek ismeretében az alábbi:

public class ViewModel :INotifyPropertyChanged { private ObservableCollection<model> _myModelCollection; public ObservableCollection<model> MyModelCollection { get { return _myModelCollection; } set { _myModelCollection = value; OnPropertyChanged("MyModelCollection"); } } public event PropertyChangedEventHandler PropertyChanged; public void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } public ViewModel() { MyModelCollection= new ObservableCollection<model>(); for (int i = 0; i < 10; i++) { MyModelCollection.Add(new Model(i)); } } }

A fenti kód egy gyűjteményt hoz létre a Model osztályból. Továbbra is ez az osztály lesz a DataContext az XAML számára. Mivel az XAML - és annak mögöttes kódja - tartalmazza mindazt, amit látunk ezért a továbbiakban ezt View-nak nevezzük. Az XAML-hez tartozó kód nem változik az előzőekben leírtakhoz.

public partial class MainWindow : Window { private ViewModel _viewModel; public MainWindow() { InitializeComponent(); _viewModel = new ViewModel(); DataContext = _viewModel; } }

A View csak a ViewModel osztályra hivatkozik, a Model osztályról nem tartalmaz semmiféle referenciát.  Ezt az osztályhármat nevezk Model-View-ViewModel, röviden Mvvm mintának.
- A Model nem tartalmaz semmilyen referenciát egyik osztályra sem
- A ViewModel tartalmaz referenciát a Modelra, és tartalmazhat referenciát a View-ra
- A View tartalmaz referenciát a ViewModel-re

Az XAML kód az alábbi:
<grid> <Grid.Resources> <datatemplate x:Key="MyListTemplate" > <textblock Text="{Binding TextValue}" Height="15"/> </DataTemplate> </Grid.Resources> <listbox Height="150" ItemsSource="{Binding MyModelCollection}" ItemTemplate="{StaticResource MyListTemplate}"> </ListBox> </Grid>

A XAML DataContext-je jelen pillanatban a _viewModel;
A ViewModel tartalmaz egy gyűjteményt: MyModelCollection. A listbox ebből szedi az adatokat (ItemsSource="{Binding MyModelCollection}")
Mindez automatikusan megtörténik.

A Listboxban található ItemTemplate leírja, hogy egy ListBox Item hogy nézzen ki. 

Jelenleg mindössze egy TextBlock-ot tartalmaz.
A ListBox a MyModelCollection gyűjteményből szedi az adatait, ami Model típusú.
A Model-nek van egy property-je: TextValue
Ez látható a TextBlock Text attribútumához kapcsolva (<TextBlock Text="{Binding TextValue}" Height="15"/>)