15 December 2008

WPF Binding: Master-detail сценарий.

.NET
Translation
Original author: Beatriz Costa
В простейшем master-detail сценарии, нажатие на определенный элемент в ItemsControl'е вызывает отображение детальной информации об этом элементе на другом control'е. К примеру, программа может отображать список имен покупателей, и клик по определенному покупателю приведет к тому, что в TextBlock'ах отобразится адрес, телефонный номер и дата рождения этого покупателя.

В этом посте я буду использовать солнечную систему с планетами как источник данных: клик по названию планеты в ListBox'е приведет к тому, что на ContentControl'е отобразится изображение планеты и информация о ней. ListBox играет роль мастера, а ContentControl представляет детальную информацию.

В секции ресурсов у класса Window имеется XmlDataProvider с данными планеты и CollectionViewSource, у которого свойство Source связано с provider'ом. Этот код связывает ListBox с CollectionViewSource'ом:
  1. <!– master –>
  2. <ListBox ItemsSource=”{Binding Source={StaticResource cvs}}” DisplayMemberPath=”@NamePadding=”5Margin=”0,0,5,0/>
* This source code was highlighted with Source Code Highlighter.

Мне так же нужен ContentControl, который будет использоваться для отображения детальной информации о выбранном элементе. Код ниже может сначала показаться немного странным: мы связываем ContentControl (который отображает один элемент) с коллекцией элементов? (Заметьте, что это связывание такое же, как у ListBox'а выше.) Этот код отлично работает, потому что data binding engine достаточно умен, чтобы найти различие между этими двумя целями. Когда происходит связывание ItemsControl'а с коллекцией, мы получаем коллекцию; когда происходит связывание ContentControl'а с коллекцией, мы получаем текущий (current) элемент коллекции. Все это делает применение master-detail сценария в WPF очень простым.
  1. <!– detail –>
  2. <ContentControl ContentTemplate=”{StaticResource detailTemplate}” Content=”{Binding Source={StaticResource cvs}}”/>
* This source code was highlighted with Source Code Highlighter.

Чтобы определить, как в ContentControl'е должна отображаться детальная информация, мы используем DataTemplate. Следующий код описывает наиболее интересные части этого шаблона. Заметьте, что связывание происходит с XML, поэтому я использую XPath вместо Path:
  1. <DataTemplate x:Key=”detailTemplate>
  2. (…)
  3. <Image Source=”{Binding XPath=Image, Converter={StaticResource stringToImageSource}}” />
  4. (…)
  5. <StackPanel Orientation=”HorizontalMargin=”5,5,5,0?>
  6. <TextBlock Text=”Orbit:FontWeight=”Bold/>
  7. <TextBlock Text=”{Binding XPath=Orbit}” />
  8. </StackPanel>
  9. <StackPanel Orientation=”HorizontalMargin=”5,0,5,0?>
  10. <TextBlock Text=”Diameter:FontWeight=”Bold/>
  11. <TextBlock Text=”{Binding XPath=Diameter}” />
  12. </StackPanel>
  13. <StackPanel Orientation=”HorizontalMargin=”5,0,5,5?>
  14. <TextBlock Text=”Mass:FontWeight=”Bold/>
  15. <TextBlock Text=”{Binding XPath=Mass}” />
  16. </StackPanel>
  17. (…)
  18. </DataTemplate>
* This source code was highlighted with Source Code Highlighter.

Вот скриншот завершенного примера:


Здесь вы можете найти проект для Visual Studio с кодом, который был использован в статье.
Tags:.netwpfbindingxaml
Hubs: .NET
+12
7.1k 12
Comments 3
Popular right now
Рефакторинг кода .NET
December 7, 202030,200 ₽Luxoft Training
SEO-специалист
December 7, 202064,900 ₽Нетология
iOS-разработчик с нуля
December 7, 202070,740 ₽Нетология
Python для работы с данными
December 7, 202031,500 ₽Нетология