Blend 3 как генератор данных

Если Вы только начинаете разрабатывать Ваше приложение и необходимо где-то взять данные для временного наполнения и тестирования приложения, то Вам пригодится одно из последних нововведений в Blend 3 (что доступно уже сейчас в Preview версии) - возможность генерировать примеры данных прямо в Blend.

Доступна данная возможность через панель Data (для ее отображения можно выбрать в меню Window). Ранее в Blend 2 закладка Data была привязана к панели Project и имела более ограниченный набор возможностей как для Silverlight-приложений так и для WPF.

Теперь в Blend 3 эта закладка вынесена в отдельную панель. Возможности по работе с реальными “живыми” данными вынесены в правую иконку (отмечено зеленым), а работе с примерами данных соответствует новая иконка “Add sample data source”. Что мы сейчас и рассмотрим.

Добавление примеров данных

После нажатия на иконку, и выбора пункта “Define New Sample Data” у Вас появится окно с выбором названия для коллекции данных, предложением выбора области видимости данных – только в текущем документе или в пределах всего приложения. Кроме этого можно сразу поставить галочку для активирования данных в момент запуска приложения (по умолчанию она снята).

После этого в панели Data у Вас появится коллекция с добавленным по умолчанию одним свойством.

Кроме визуального отображения произошли еще некоторые изменения. В файл App.xaml в <Application.Resources> автоматически добавилась строка <SampleData:MyData x:Key="MyData" d:IsDataSource="True"/>

В самом проекте тоже произошли изменения.

Добавлена папка SampleData с подпапкой, соответствующей названию, которое Вы задали для набора данных. В ней содержится автоматически генерируемые xsd-файл, xaml-файл и cs code-behind. Их редактировать вручную не рекомендуется, что указано в заголовках обоих файлов. Но посмотреть что они собой представляют Вы всегда можете :)

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

Напротив каждого свойства доступна иконка ABC для изменения его типа. Что для нас и представляет интерес.

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

• String
• Number
• Boolean
• Image

Для каждого из этих типов есть некоторые настройки, например для строкового значения доступны следующие форматы:

• Lorem Ipsum (для тех кто не знает что это, можно ознакомится на сайте http://uk.lipsum.com/) – можно задать даже кол-во слов и мах длину слова
• Name
• Phone number
• E-mail Address
• Web-site url
• Address
• Company name
• Date
• Time
• Price

После того как Вы определились какие свойства Вам нужны и каких типов (я для примера остановилась на свойствах Image, Price, ProductName, ShortDescription, Store, Supplier, SupplierDate), пришло время добавить данные в приложение.

Для этого Вам необходимо оставить включенной по умолчанию иконку ListMode и поставить свой выбор на Collection.

После чего, перетаскивая мышкой Collection на рабочий холст, автоматически создается ListBox, наполненный Вашими данными.

Обратите внимание на то, в каком виде отображаются данные. Для изображения по умолчанию берется набор картинок, поставляемых с Expression Blend – это стулья-кресла. Для свойства, тип которого выбран Price – автоматически сгенерировано числовое значение, и добавлен знак валюты перед ним. Для ProductName и ShortDescription был выбран тип Lorem Ipsum, но для  ProductName  - кол-во слов 2, а для ShortDescription – 10. Для Store был выбран тип Boolean, и отображение в этом случае ckeckbox-a полностью оправдано.

Вы можете протестировать приложение с этим Listbox-ом, чтобы убедиться что он полностью рабочий.

Настройка данных

В любом случае, Вы можете полностью в дальнейшем настраивать свойства коллекции данных и изменять их типы. Например, с большой вероятностью Вам не подойдут изображения стульев для данного приложения. Вы можете поменять их, выбрав папку со своими собственными картинками, вместо тех, которые предлагает Blend.

Выбранная Вами папка с изображениями автоматически добавится в подпапку SampleData для Вашего проекта и произойдет обновление Listbox.

Если все же и данный вид не устраивает, можно сделать более тонкую настройку для генерируемых данных.

Для этого нажимаем на иконку “Edit sample values” напротив Collection

и попадаем в окно с расширенными настройками,

в котором Вы можете быстро посмотреть какие свойства у Вас есть, поменять их тип. Кроме того, дважды кликнув на определенной ячейке, можно вручную подправить некоторые текстовые, числовые значения есть они не устраивают, либо поменять изображение, если подряд идут два одинаковых. Также можно выбрать кол-во записей для отображения.

Изменение шаблона элемента в Listbox

Как для обычного Listbox-a, так и для этого, Вы можете всегда настроить шаблон элемента (ItemTemplate).

В режиме редактирования ItemTemplate, выделяя отдельный пункт-свойство, и перемещая его положение относительно других прямо на рабочем холсте, можно поменять порядок расположения свойств.

Учитывая то, что все эти свойства для отдельного элемента Listbox расположены в StackPanel, изменив ориентацию с вертикальной на горизонтальную можно поменять расположение свойств отдельного элемента.

Ну и так далее, по направлению фантазии можно добиться нужного наполнения и отображения наших данных.

Еще один, пожалуйста

Если Вам необходимо несколько видов представлений одних и тех же данных, не обязательно перетаскивать всю коллекцию и создавать Listbox со всеми элементами и их свойствами, которые Вы определили. Можно выбрать часть из них, зажав Ctrl, и перетащить на рабочий холст нужное кол-во. В этом случае тоже создастся Listbox, только свойств у отдельного элемента будет меньше.

В общем, как мы убедились, доступна очень хорошая новая возможность. Теперь не нужно ломать голову где взять образцы данных для приложения, а можно быстро сгенерировать их прямо в Blend.

Оригинал: Blend 3 как генератор данных