Details Mode

93

В рассмотренных ранее примерах привязки данных было показано, каким образом элементы данных увязываются с новыми элементами управления типа ListBox на панели Data. Но справа от кнопки выбора режима отображения списком (List Mode) находится кнопка Details Mode, после щелчка на которой источник данных переводится в режим отображения подробностей:

Различные режимы работы на панели Data

Если после выбора режима Details перетащить отдельные свойства из панели Data на монтажный стол, то соответствующие значения данных фиксируются в элементе управления типа TextBlock, а не ListBox. А если перетащить родительский узел на монтажный стол, то в среде Expression Blend IDE будет автоматически сформирована разметка, в которой описывается циклическое обращение к подробностям выбранного элемента (в рассматриваемом здесь примере будет показано, как это делается).

Итак, для изучения на практике данного режима работы панели Data создайте новый проект приложения WPF (или Silverlight), присвоив ему имя ListDetailsDataBinding. Введите в новый проект файл исходного кода C#, содержащий классы PurchaseOrder и PurchaseOrders, создайте этот проект и воспользуйтесь панелью Data, чтобы определить новый источник данных объекта, привязываемый к специальному классу PurchaseOrders.

Убедитесь в том, что вы по-прежнему находитесь в режиме отображения списком на панели Data, и перетащите узел Description на монтажный стол, чтобы сформировать элемент управления типа ListBox, в котором отображается текстовое описание каждого элемента списка. А для описания содержимого этого элемента управления добавьте также элемент управления типа Label. Щелкните на кнопке Details Mode в левом верхнем углу панели Data и выберите все три свойства (Amount, Description и TotalCost), нажав клавишу <Shift> и щелкнув сначала на первом свойстве, а затем на последнем:

Выбор нескольких элементов на панели Data

Выбрав указанные выше элементы, перетащите их на монтажный стол, на данном этапе монтажный стол должен выглядеть так, как показано на рисунке:

Перечисление подробностей

Из панели Data было перенесено несколько элементов, и поэтому в среде Expression Blend IDE был сформирован объект типа Grid, содержащий ряд связанных друг с другом элементов управления типа TextBlock. Если вы проанализируете теперь содержимое панели Objects and Timeline, то обнаружите на ней иерархическое представление элементов пользовательского интерфейса:

Структура получившегося документа

А теперь запустите свое приложение на выполнение. Если вы щелкнете на любом элементе списка, то в области отображения подробностей (сетке из элементов управления типа TextBlock) появится описание выбранного элемента. Не так уж и плохо, не так ли? Конечно, вы вольны изменить компоновку элементов на подчиненной сетке, видоизменить соответствующие шаблоны данных и внести другие коррективы во внешний вид пользовательского интерфейса, но не будем на этом больше останавливаться и перейдем непосредственно к анализу разметки, описывающей привязку данных.

В результате перетаскивания исходного узла Description из панели Data на монтажный стол в среде Expression Blend IDE автоматически формируется основная разметка, в которой определяется контекст данных для корневого объекта типа Grid, увязываемого со специальной коллекцией. Кроме того, к элементу управления типа ListBox применяется простой шаблон данных для отображения значений свойств Description.

После добавления оставшихся элементов представления подробностей в подчиненной сетке будет определен собственный контекст данных, привязанный к свойству SelectedItem элемента управления типа ListBox. В каждом элементе управления типа TextBlock, находящемся на этой сетке, используется вполне предполагаемое расширение разметки {Binding} для связывания с соответствующим свойством объекта из специальной коллекции.

Следует иметь в виду, что каждому элементу в Expression Blend автоматически присваивается имя, поскольку оно не было задано явным образом в свойстве Name. Ниже приведен фрагмент разметки, сформированной после добавления оставшихся элементов представления подробностей:

<Grid DataContext="{Binding SelectedItem, ElementName=listBox}" 
            Margin="311,108,67,0" d:DataContext="{Binding [0]}" ...>
			<TextBlock HorizontalAlignment="Left" 
               VerticalAlignment="Top" Width="100" Text="Amount"/>
			<TextBlock Text="{Binding Amount}" HorizontalAlignment="Left" 
               VerticalAlignment="Top" Width="150" Margin="104,0,0,0"/>
			...

Второе свойство DataContext, обозначенное префиксом дескриптора d, используется на поверхности визуального конструктора Expression Blend и не требуется для нормального выполнения операции привязки данных.

Пройди тесты
Лучший чат для C# программистов