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

Мы начнем с замены нашего элемента управления 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), который позволит пользователям проникнуть глубже в детали статьи при ее выборе в списке.

Источник