Использование DataBinding и DataTemplate при помощи Expression Blend в Silverlight - Использование Expression Blend вместе с Visual Studio
ОГЛАВЛЕНИЕ
Использование Expression Blend вместе с Visual Studio
В данной статье мы рассмотрим способ создания привязки - как к спискам, так и к индивидуальным элементам управления - при помощи Blend, что дает возможность получить более высокую скорость, а также хорошую среду разработки. Это позволяет сфокусироваться на том, что вы собираетесь построить, вместо того, чтобы уделять больше внимания синтаксису разработки. Статья продемонстрирует некоторые новые принципы пользовательского интерфейса, которые так легко разработать при помощи Blend.
Создание проекта
Для начала создайте новый проект в Blend, назвав его Silverlight Data, как это показано на рисунке 7-3
Рисунок 7-3. Создание нового проекта в Blend
Как только вы создадите проект, установите размеры внешнего элемента управления в 680 x 550 и создайте три строки, как это показано на рисунке 7-4
Рисунок 7-4. Создание трех строк в Blend
Если вы не привыкли создавать строки в Blend, тогда вам стоит прочитать статью про Expression Blend for Developers.
Обратите внимание на то, что верхняя строка имеет фиксированную высоту, 1. Если вы хотите установить точные размеры, то вам стоит открыть окошко Xaml и установить их вручную, хотя это не так обязательно:
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
Добавьте заголовок к верхней строке перетащив TextBlock и установив его свойства, как это показано на рисунке 7-5
Рисунок 7-5. Установка свойств заголовка
Перетаскивание элемента управления ListBox во вторую строку
Перетащите элемент ListBox из панели Assets во вторую строку и установите его свойства выравнивания (Alignments) в значение stretch и отступы в 25,50,25,50 ,как это показано на рисунке 7-6
Рисунок 7-6. Добавление и позиционирование элемента управления ListBox
Заполнение элемента ListBox жестко заданными строками
Одним из способов разделения настройки внешнего вида элементов ListBoxItems от привязки ListBoxItems будет жесткое задание некоторых значений при помощи ListBoxItem Collection Editor (Редактор набора). Это займет всего пару минут. Вот как это можно реализовать:
Начните с щелчка по ListBox в панели Interaction и затем нажмите на Item (Collection) в закладке Common Properties (Основные свойства), как это показано на рисунке 7-7
Рисунок 7-7. Добавление в набор элементов
Это откроет довольно пугающий редактор наборов (Collection Editor), но паниковать не стоит. Нажмите по кнопке, которая гласит "Add another item" (Добавление нового элемента). Также, вам не стоит паниковать при появлении пустого диалогового окна. Щелкните по кнопке с независимой фиксацией "Show System Assemblies".
На самом деле мы уже сделали многое. Теперь вам надо отыскать то, что вам нужно - введите ListBoxItem в поле поиска, как это показано на рисунке 7-8
Рисунок 7-8. Выбор класса, добавляемого к набору списка
Щелкните по ListBoxItem -- и откроется специальный редактор, который позволит вам отредактировать содержимое ListBoxItem, что дает вам немалый контроль над внешним видом элементов, добавляемых вручную,
Рисунок 7-9. Property Editor for ListBoxItem
Заполните свойства для вашего первого элемента List Box, установив текст так, как это показано на рисунке 7-9. Как только вы добавили три - четыре элемента, нажмите OK --и вы вернетесь на страницу, но список уже не будет пустым. Запустите программу, и вы увидите свои значения, жестко заданные в элементе ListBox, как это показано на рисунке 7-10
Рисунок 7-10. Жестко заданные элементы ListBox