MVVM ViewModel Klasser

Præsentationer af emnet: "MVVM ViewModel Klasser"— Præsentationens transcript:

1 MVVM ViewModel Klasser

2 View View Model Model

3 View XAML Bruger-interaktion Bindings Kontakt til ViewModel
Ingen kontakt til Model View

4 View Model C# Rummer properties som Views kan binde til
Transformationer fra domæne- objekter til ViewModel-objekter Kontakt til Model Indhold drives af krav til Views Skal ”servicere” Views View Model

5 Model C# Collections af domæne-objekter Ingen kontakt til Views
Udelukkende forretningslogik Model

6 ViewModel klasser

7 View Location Berlin AX In EU now Yes

8 Master/Details View Master View Details View Item View

9 MasterDetails ViewModel Master ViewModel Details ViewModel Item ViewModel

10 <Grid> [Item View] Hvem kan give mig properties at binde til, så jeg kan præsentere ét domæne-objekt som et item i et ListView? Item View <Image> <TextBlock> <ListView.ItemTemplate> <DataTemplate DataType="???"> <StackPanel Orientation="Horizontal"> <Image Source="{Binding ???}" Width="{Binding ???}" Height="{Binding ???}" /> <TextBlock Text="{Binding ???}" FontSize="{Binding ???} /> </StackPanel> </DataTemplate> </ListView.ItemTemplate>

11 <Grid> [Item View] Hvem kan give mig properties at binde til, så jeg kan præsentere ét domæne-objekt som et item i et ListView? Item View <Image> <TextBlock> <ListView.ItemTemplate> <DataTemplate DataType="ItemViewModel"> <StackPanel Orientation="Horizontal"> <Image Source="{Binding ImageSource}" Width="{Binding ImageSize}" Height="{Binding ImageSize}" /> <TextBlock Text="{Binding Description}" FontSize="{Binding FontSize} /> </StackPanel> </DataTemplate> </ListView.ItemTemplate> Item ViewModel ImageSource ImageSize Description FontSize _domainObject

12 Item ViewModel ImageSource ImageSize Description FontSize
public class ItemViewModel { private _domainObject Car; public int FontSize get { return 18; } } public int ImageSize get { return 80; } public string ImageSource get { return _domainObject.ImageSource; } // …etc public ItemViewModel(Car obj) _domainObject = obj; Item ViewModel ImageSource ImageSize Description FontSize _domainObject

13 [Master View] Hvem kan give mig en collection af ItemViewModel-objekter, så jeg kan vise dem i et ListView? Master View <ListView ItemsSource="{Binding ???}"> <ListView.ItemTemplate ...> </ListView> ItemViewModelCollection

14 [Master View] Hvem kan give mig en collection af ItemViewModel-objekter, så jeg kan vise dem i et ListView? Master View <ListView ItemsSource="{Binding ItemViewModelCollection}"> <ListView.ItemTemplate ...> </ListView> MasterDetails ViewModel ItemViewModelCollection

15 MasterDetails ViewModel [MasterDetailsViewModel] Hvem kan transformere en collection af domæne-objekter til en collection af ItemViewModel-objekter? ItemViewModelCollection public List<ItemViewModel> ItemViewModelCollection { get return ???; }

16 MasterDetails ViewModel [MasterDetailsViewModel] Hvem kan transformere en collection af domæne-objekter til en collection af ItemViewModel-objekter? ItemViewModelCollection public List<ItemViewModel> ItemViewModelCollection { get return _masterViewModel. CreateItemViewModelCollection(_domainModel); } Master ViewModel CreateItemViewModelCollection(…)

17 MasterDetails ViewModel [MasterDetailsViewModel] Hvem kan transformere en collection af domæne-objekter til en collection af ItemViewModel-objekter? ItemViewModelCollection _masterViewModel _domainModel public List<ItemViewModel> ItemViewModelCollection { get return _masterViewModel. CreateItemViewModelCollection(_domainModel); } Master ViewModel CreateItemViewModelCollection(…)

18 Details View [Details View] Hvem kan give mig properties at binde til, så jeg kan præsentere detailer om ét domæne-objekt som et antal linier i et Details-view? <StackPanel> <TextBlock> <TextBox> <StackPanel Orientation="Horizontal"> <TextBlock Text="Price"; <TextBox Text="{Binding ???.Price, Mode=TwoWay}" /> </StackPanel> <TextBlock Text=”Brand" <TextBox Text="{Binding ???.Brand, Mode=OneWay}" />

19 Details View [Details View] Hvem kan give mig properties at binde til, så jeg kan præsentere detailer om ét domæne-objekt som et antal linier i et Details-view? <StackPanel> <TextBlock> <TextBox> <StackPanel Orientation="Horizontal"> <TextBlock Text="Price"; <TextBox Text="{Binding DetailsViewModel.Price, Mode=TwoWay}" /> </StackPanel> <TextBlock Text=”Brand" <TextBox Text="{Binding DetailsViewModel.Brand, Mode=OneWay}" /> MasterDetails ViewModel DetailsViewModel ItemViewModelCollection _domainModel _masterViewModel

20 [MasterDetailsViewModel] Det er da ikke så svært…
ItemViewModelCollection _domainModel _masterViewModel DetailsViewModel public CarDetailsViewModel DetailsViewModel { get return ???; }

21 [MasterDetailsViewModel] Det er da ikke så svært…
ItemViewModelCollection _domainModel _masterViewModel _detailsViewModel DetailsViewModel DetailsViewModel public CarDetailsViewModel DetailsViewModel { get return _detailsViewModel; }

22 [MasterDetailsViewModel]
[Master View & Details View] Hvem kan sørge for, at vi altid refererer til samme domæne-objekt? Master View Details View MasterDetails ViewModel [MasterDetailsViewModel] Master View, hvad mener du med ”refererer til”…? DetailsViewModel ItemViewModelCollection _domainModel _masterViewModel _detailsViewModel DetailsViewModel DetailsViewModel

23 [MasterDetailsViewModel]
Master View Details View <ListView SelectedItem="{Binding ???}"> </ListView> MasterDetails ViewModel [MasterDetailsViewModel] Master View, hvad mener du med ”refererer til”…? DetailsViewModel ItemViewModelCollection _domainModel _masterViewModel _detailsViewModel DetailsViewModel DetailsViewModel

24 Master View Details View MasterDetails ViewModel DetailsViewModel
<ListView SelectedItem="{Binding ItemViewModelSelected, Mode=TwoWay}"> </ListView> MasterDetails ViewModel DetailsViewModel ItemViewModelCollection ItemViewModelSelected _domainModel _masterViewModel _detailsViewModel _itemViewModelSelected DetailsViewModel DetailsViewModel

25 MasterDetails ViewModel DetailsViewModel DetailsViewModel
public CarDetailsViewModel DetailsViewModel { get return _detailsViewModel; } public List<CarItemViewModel> ItemViewModelCollection return _masterViewModel.CreateItemViewModelCollection(_domainModel); MasterDetails ViewModel DetailsViewModel ItemViewModelCollection ItemViewModelSelected _domainModel _masterViewModel _detailsViewModel _itemViewModelSelected DetailsViewModel DetailsViewModel

26 MasterDetails ViewModel ItemViewModelCollection DetailsViewModel
public CarItemViewModel ItemViewModelSelected { get { return _itemViewModelSelected; } set _itemViewModelSelected = value; OnPropertyChanged(); } MasterDetails ViewModel DetailsViewModel ItemViewModelCollection ItemViewModelSelected _domainModel _masterViewModel _detailsViewModel _itemViewModelSelected ItemViewModelCollection DetailsViewModel DetailsViewModel

27 ListView ItemViewModel ItemViewModel ItemViewModel ItemViewModel

28 ListView ItemViewModel ItemViewModel ItemViewModel ItemViewModel
SelectedItem="{Binding ItemViewModelSelected, Mode=TwoWay}"> </ListView> ItemViewModel ItemViewModel ItemViewModel public CarItemViewModel ItemViewModelSelected { get { return _itemViewModelSelected; } set _itemViewModelSelected = value; ... OnPropertyChanged(); }

29 MasterDetails ViewModel ItemViewModelCollection DetailsViewModel
public CarItemViewModel ItemViewModelSelected { get { return _itemViewModelSelected; } set _itemViewModelSelected = value; OnPropertyChanged(); } MasterDetails ViewModel DetailsViewModel ItemViewModelCollection ItemViewModelSelected _domainModel _masterViewModel _detailsViewModel _itemViewModelSelected ItemViewModelCollection DetailsViewModel DetailsViewModel

30 MasterDetails ViewModel ItemViewModelCollection DetailsViewModel
public CarItemViewModel ItemViewModelSelected { get { return _itemViewModelSelected; } set _itemViewModelSelected = value; if (_itemViewModelSelected != null) _detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected.DomainObject); } else _detailsViewModel = null; OnPropertyChanged(); OnPropertyChanged(nameof(DetailsViewModel)); MasterDetails ViewModel DetailsViewModel ItemViewModelCollection ItemViewModelSelected _domainModel _masterViewModel _detailsViewModel _itemViewModelSelected ItemViewModelCollection DetailsViewModel DetailsViewModel

31 _detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected
_detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected.DomainObject); _itemViewModelSelected

32 _detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected
_detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected.DomainObject); _itemViewModelSelected Car

33 _detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected
_detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected.DomainObject); _itemViewModelSelected new CarDetailsViewModel Car

34 _itemViewModelSelected new CarDetailsViewModel
_detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected.DomainObject); _itemViewModelSelected new CarDetailsViewModel Car public CarDetailsViewModel(Car obj) { _domainObject = obj; }

35 _detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected
_detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected.DomainObject); _itemViewModelSelected _detailsViewModel Car

36 MasterDetails ViewModel ItemViewModelCollection DetailsViewModel
public CarItemViewModel ItemViewModelSelected { get { return _itemViewModelSelected; } set _itemViewModelSelected = value; if (_itemViewModelSelected != null) _detailsViewModel = new CarDetailsViewModel(_itemViewModelSelected.DomainObject); } else _detailsViewModel = null; OnPropertyChanged(); OnPropertyChanged(nameof(DetailsViewModel)); MasterDetails ViewModel DetailsViewModel ItemViewModelCollection ItemViewModelSelected _domainModel _masterViewModel _detailsViewModel _itemViewModelSelected ItemViewModelCollection DetailsViewModel DetailsViewModel

37 MasterDetails ViewModel Master ViewModel Details ViewModel Item ViewModel Domain Model List<Car> Car

38 Item ViewModel Details ViewModel Car Car

39 Item ViewModel Details ViewModel Car

40 List<ItemViewModel>
Master ViewModel List<ItemViewModel> CreateItemViewModelCollection(List<Car> collection) Domain Model List<Car> Car

41 ItemViewModelCollection ItemViewModelSelected _domainModel
MasterDetails ViewModel Master ViewModel Item ViewModel Details ViewModel DetailsViewModel ItemViewModelCollection ItemViewModelSelected _domainModel _masterViewModel _detailsViewModel _itemViewModelSelected Domain Model

42 ItemViewModelCollection ItemViewModelSelected DetailsViewModel
<Page> DataContext = MasterDetailsViewModel <Grid> MasterDetails ViewModel <ListView> ItemViewModelCollection ItemViewModelSelected DetailsViewModel <StackPanel>