public class Person { public int Age { get; set; } public string Name { get; set; } public bool IsMale { get; set; } }
Następnie w ViewModelu definiujemy obserwowalną kolekcję, która zapewni nam synchronizację widoku z modelem danych.
public class PersonListViewModel : Screen { public ObservableCollection<Person> Items { get; set; } private Person _selectedItem; public Person SelectedItem { get { return _selectedItem; } set { _selectedItem = value; } } public PersonListViewModel() { Items = new ObservableCollection<Person> { new Person{ Age = 15, IsMale = true, Name= "Michael"}, new Person{ Age = 80, IsMale = true, Name= "Steven"}, new Person{ Age = 25, IsMale = false, Name= "Kate"}, new Person{ Age = 64, IsMale = true, Name= "Matthew"} }; } }
Dodatkowo, dzięki konwencjom, property SelectedItem będzie synchronizowane z wybranym elementem z kolekcji Items.
Ostatni krok to binding w ViewModelu. Kolekcje można wyświetlać w kilku elementach WPFa. Poniżej pokazano, jak to zrobić w ListBoxie.
<ListBox x:Name="Items" cal:Message.Attach="[Event SelectionChanged] = [Action NewSelectedItem($eventargs)]" SelectionMode="Single"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Width="200" Height="100" cal:Bind.Model="{Binding}" > <TextBlock x:Name="Name" VerticalAlignment="Top" /> <Label x:Name="Age" VerticalAlignment="Top" /> <CheckBox x:Name="IsMale" VerticalAlignment="Top" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
Podobnie jak w przypadku skalarnych propercji, zaczynamy od ustawienia atrybutu x:Name. Dzięki cal:Message.Attach możemy przypisywać do zdarzeń widoku funkcje z ViewModelu. Następnie dla całego ListBoxa definiuje się ItemTemplate, w którym na kontenerze zaznaczamy binding do propercji poprzez atrybut cal:Bind.Model. Poziom niżej w drzewie wizualnym możemy już bindować się do pojedynczych propercji poprzez standardowe x:Name.
Brak komentarzy:
Prześlij komentarz