Ласкаво просимо до dev.net.ua Увійти | Приєднатися | Допомога

Helen

designer for developers

Новини

Полезные ссылки

Сценарий 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       2

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

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

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

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

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

3 

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

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

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

6

DataContext

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

4

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

5

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

7

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

Posted: Tuesday, June 23, 2009 9:24 PM від Helen

Коментарі

Helen сказав:

В общем, побежали и полетели :) Ставим, делимся впечатлениями… Microsoft Silverlight 3 RTW (3.0.40624.0)

# July 9, 2009 2:55 PM

yarmolchuk сказав:

Сделал все как написанно, получил список своих элементок, когда стаю на элемент не получаю детальную информацию о нем :(

# December 8, 2009 6:42 AM
Анонімні коментарі деактивовані. Увійдіть або Зареєструйтесь щоб мати доступ до ресурсів Спільноти.