Сценарий Master/Detail в Blend 3

Недавно, в процессе очередного поиска идей по оптимизации интерфейса, на глаза попался один занимательный пост “12 Standard Screen Patterns” (автор Theresa Neil). Указанные шаблоны по отдельности многим из Вас знакомы и каждый из нас ежедневно сталкивается с их воплощением в различных приложениях. Но в этом документе (также доступном в формате pdf) они собраны и описаны вместе, наведена их структура и классические примеры, а также дельные советы по реализации. Рекомендую для ознакомления разработчикам,  дизайнерам, архитекторам, менеджерам проектов и всем-всем-всем…

После прочтения мне вспомнилось одно из нововведений, которое уже есть в Blend 3 Preview. Это так называемый сценарий Master/Detail, реализация которого доступна визуальными средствами с помощью режимов List Mode и Detail Mode панели Data. С некоторыми нововведениями, коснувшимися данной панели мы уже познакомились ранее на примере генерации образцов данных. 

Master/Detail

Прежде чем мы рассмотрим этот сценарий в Blend, дадим ему общее вводное описание.  Данный сценарий позволяет пользователю перемещаться по списку элементов и просматривать при необходимости детальную информацию об отдельном элементе, оставаясь при этом в пределах одного экрана. Бывает вертикальная и горизонтальная  компоновка панелей Master/Detail.

Если брать вертикальную компоновку (1 рис.) то панель Master обычно представлена в левой части списком, деревом, панелью-аккордеоном или таблицей.

Панель Detail может включать в себя текстовое описание, иконки-миниатюры, таблицы, списки, графы или диаграммы, формы и т.п. -  любое другое детальное описание-расшифровку элемента из панели Master.

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

Панель Data в Blend: List Mode

После того, как Вы добавили коллекцию данных в проект, включите режим List Mode на панели Data. Выделив нужное кол-во полей, перетащите их на рабочий холст.

Blend автоматически создаст ListBox, а также DataTemplate, включающий выбранные свойства коллекции.

Панель Data в Blend: Detail Mode

Следующий шаг – переключение в Detail Mode на той же панели Data.  Аналогичным образом выберите нужное кол-во свойств в коллекции и перетащите их снова на рабочий холст в свободное место. Blend сгенерирует Grid, содержащий заголовки выбранных свойств и соответствующие им значения.  Заголовки при желании можно переименовать или совсем удалить, так как, например, название свойства Image возле картинки будет смотреться не столько объясняющим, сколько неуместным.

DataContext

Для того чтобы по нажатию на элемент в ListBox-e – у нас в режиме Detail отображались нужные данные, необходимо сделать еще некоторые действия. По крайней мере для версии Blend 3 Preview. В панели Objects & Timeline выделяем сгенерированный Grid, который отображает детальную информацию. В панели свойств Properties для нашего Grid-а находим свойство DataContext, и выбираем в меню Data Binding… 

Далее на закладке Element Property выбираем свойство Selected Item вышеуказанного ListBox-а. 

Таким образом, запустив наше приложение мы получим работающий сценарий Master/Detail. Выделяя нужный элемент списка, справа мы получаем детальную информацию о нем.

Как мы убедились, фактически не написав ни строчки кода, только визуальными средствами в Blend теперь можно реализовать такой полезный сценарий.

Оригинал: Сценарий Master/Detail в Blend 3