Использование ListBox и DataBinding для отображения списков в Silverlight 2

Раньше мы использовали элемент управления DataGrid для отображения информации с сайта Digg.com. Это подходит нам в случае, если мы хотим отобразить содержимое в формате колонки. Для нашего приложения нам, скорее всего, понадобится немного изменить  отображение таким образом, чтобы оно меньше было похоже на простую  таблицу типа DataGrid, и больше на список (List). Хорошая новость заключается в том, что это несложно воплотить - и оно не требует изменений в коде приложения.

Мы начнем с замены нашего элемента управления DataGrid элементом <ListBox>. Мы сохраним название элемента ("StoriesList"):

 

При повторном запуске нашего приложения и поиске статей элемент ListBox отобразит следующее:

Вам наверняка интересно - почему каждый элемент является "DiggSample.DiggStory"? Причиной этого является то, что мы привязываем обекты DiggStory к ListBox (и стандартным поведением является вызов ToString() для каждого). Если мы хотим отобразить свойство "Title" объекта DiggStory, то мы можем установить свойство "DisplayMemberPath" в ListBox:

Совершив данное изменение, мы получим следующий Title отображенный в ListBox:

Если мы хотим показать более одного  значения  за один  раз либо специализировать внешний вид каждого элемента, то мы можем перегрузить ItemTemplate элемента ListBox и предоставить специализированный DataTemplate. В пределах данного DataTemplate мы можем специализировать отображение каждого объекта DiggStory.

К примеру, мы можем отобразить оба значения Title и NumDiggs объекта DiggStory при помощи DataTemplate следующим образом.  

Мы можем привязать любые общедоступные (public) свойства из нашего объекта DiggStory в пределах DataTemplate. Обратите внимание на то, как мы используем синтаксис {Binding Path=PropertyName} для выполнения этого при помощи элементов управления TextBlock.

Создав указанный выше DataTemplate, наш ListBox теперь будет отображать элементы следующим образом:

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

Вышеуказанный DataTemplate заставляет ListBox отображать элементы на экране следующим образом:

 

Это выполняется тогда, когда мы определяем следующие правила Style в нашем файле App.xaml (обратите внимание как мы используем LinearGradientBrush для получения красивой желтой градиентной заливки фона в DiggPanel):

 

Стоит отметить одну важную особенность нашего ListBox - несмотря на то, что мы специализировали способ отображения элементов в нем, он все равно автоматически предоставляет поддержку семантики наведения и выделения элемента как при использовании клавиатуры, так и для мыши (клавиши наведения вверх/вниз, home/end и т.д.):

ListBox  тоже поддерживает полноценное изменение размера, а также автоматическую прокрутку нашего содержимого при необходимости (обратите внимание, как горизонтальная полоса прокрутки в окне уменьшается):

Следующие шаги

На данном этапе мы изменили способ визуализации содержимого в стиль списка (List).

Давайте теперь завершим пострение функциональности поведения нашего приложения и реализуем процесс мастер/деталь (master/details), который позволит пользователям проникнуть глубже в детали статьи при ее выборе в списке.

Источник