Использование Expression Blend с Silverlight 2

Панель свойств

Панель свойств используется для управления всеми визуальными аспектами отдельного элемента. Поскольку элементы XAML имеют множество настраиваемых свойств, эта панель предлагает два очень полезных ярлыка.

Под первым ярлыком представлены свойства редактируемого элемента, сгруппированные по категориям. Обычно здесь предоставляется доступ к следующим визуальным аспектам элементов:

• Brushes ( Кисти ) Позволяет задавать для элемента заливку и обводку, а также использовать маску прозрачности. Намного более подробно использование кистей рассматривается в "Основы XAML" , "Основы XAML".
• Appearance ( Вид ) Позволяет задавать для объекта расширенные свойства отображения. Обратите внимание, что доступные свойства отображения будут меняться в зависимости от того, какой объект редактируется в настоящий момент. Например, если редактируется элемент Rectangle, раздел Appearance панели свойств предложит задать такой параметр, как радиус скругления углов, но при редактировании элемента Button, который не имеет радиуса скругления, эта опция будет недоступна.
• Layout ( Компоновка ) Позволяет редактировать различные опции компоновки для объекта, такие как Width (Ширина), Height (Высота) и опции Alignment (Выравнивание). Также опции компоновки можно использовать для изменения положения объекта внутри сетки, если компоновка выполняется на сетке.
• Common Properties ( Общие свойства ) Включает свойства, общие для данного типа объектов. Например, здесь обычно редактируются общие свойства элементов управления, не являющихся фигурами. Доступность этих опций зависит от типа редактируемого объекта. Например, если редактируется элемент управления, общим свойством будет его индекс перехода по клавише Tab, но в случае редактирования фигуры индекс перехода по клавише Tab будет недоступен.
• Transform ( Трансформация ) Обеспечивает возможность редактировать свойство RenderTransform (Трансформация визуального представления) объекта. Это свойство определяет, как система формирования визуального отображения может изменять объект. Более подробно трансформации рассматриваются в "Трансформация и анимация в XAML" , "Трансформация и анимация в XAML".
• Miscellaneous ( Разное ) Место размещения всех свойств, которые не подходят ни под одну категорию.

Обратите внимание, что эти категории могут иметь подкатегории. У многих из них есть стрелка внизу, с помощью которой можно разворачивать и сворачивать панель свойств. Это позволяет скрывать свойства, которые используются реже.

Второй ярлык панели свойств - это Search (Поиск), который позволяет выполнять поиск определенного свойства. Например, если требуется редактировать некоторые свойства шрифта, но вы не знаете имя самого свойства, можно ввести font в строку поиска. Категории и доступные свойства будут отфильтрованы, и на панель будут выведены только те из них, которые имеют отношение к шрифтам. Это происходит непосредственно в процессе ввода слова поиска, поэтому если вы ищете свойство шрифта - т.е. для нашего примера, как только введены буквы fo - вы увидите доступные свойства, такие как fo reground и rendertrans fo rm, а также доступные свойства шрифта, как показано в нижней части рис. 2.10.

Рис. 2.10. Использование панели свойств.

Теперь рассмотрим то, как можно использовать все эти представленные выше инструменты для построения приложений Silverlight.

Использование Blend для создания приложений Silverlight

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

• Организация компоновки
• Размещение и настройка визуальных элементов
• Размещение и настройка визуальных элементов управления
• Создание анимаций

Все эти функции рассматриваются далее в данной лекции.

Компоновка

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

Использование сетки

Элемент компоновки Grid (Сетка) позволяет раскладывать элементы в структуру, похожую на таблицу. (Не путайте элемент компоновки Grid с элементом управления Grid, который обеспечивает функциональность, аналогичную электронной таблице.) При использовании инструмента компоновки Grid расположение своих элементов можно задавать, указывая их координаты как виртуальные строки и столбцы компоновочного элемента Grid. Например, рассмотрим следующий XAML:

<Grid x:Name="LayoutRoot" Background="White" >
<Button Height="38" Margin="104,72,0,0" Width="58" Content="KHonKa"/>
<Button Height="24" Margin="210,72,0,0" Width="54" Content="KHonKa"/>
<Button Height="49" Margin="0,96,158,0" Width="80" Content="KHonKa"/>
<Button Height="54" Margin="297,185,270,0" Width="67" Content="KHonKa"/>
<Button Height="33" Margin="104,217,0,213" Width="87" Content="KHonKa"/> </Grid>

При формировании визуального представления это будет выглядеть, как показано на рис. 2.11.

Рис. 2.11. Кнопки, расположенные случайным образом.

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

В качестве альтернативного варианта можно использовать компоновочный элемент Grid. Здесь местоположение кнопки на сетке задается с помощью компоновочных свойств. При создании нового Silverlight проекта, вы увидите, что файл Page.xaml уже имеет компоновочный элемент Grid под именем LayoutRoot. Выберите этот элемент на панели Interaction (Взаимодействие) и посмотрите, какие компоновочные свойства с ним связаны. Разворачивайте обозреватель свойств до тех пор, пока не увидите настройки для ColumnDefinitions (Описания столбцов) и RowDefinitions (Описания строк), как показано на рис. 2.12.

Рис. 2.12. Редактор компоновки для сетки.

ColumnDefinitions и RowDefinitions - коллекции, поэтому справа от каждого из них располагается кнопка с многоточием (...). Это указывает на то, что если щелкнуть этот параметр, откроется другое диалоговое окно. Выберите кнопку рядом с параметром ColumnDefinitions, и на экране появится редактор коллекции ColumnDefinition, как показано на рис. 2.13.

Рис. 2.13. Редактор коллекции ColumnDefinition.

Используйте это диалоговое окно для добавления, удаления и управления столбцами. Щелкните кнопку Add Another Item (Добавить еще один элемент) трижды и добавьте три столбца. Повторите аналогичные действия для параметра свойства RowDefinitions, чтобы получить сетку, состоящую из трех строк и трех столбцов. После внесения этих изменений в ColumnDefinitions и RowDefinitions, вы увидите на рабочей поверхности компоновочную сетку 3x3 (рис. 2.14).

Рис. 2.14. Компоновочная сетка 3x3.

Теперь при размещении любого элемента на экране вы будете видеть розовые направляющие линии, указывающие на то, как можно выполнить его привязку к определенному элементу сетки. Это показано на рис. 2.15. (На рисунке розовые линии выглядят как боле толстые серые.) Такая привязка кнопки к сетке и столбцу гарантирует, что кнопка всегда будет сохранять данные положение и размер относительно сетки.

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

Рис. 2.15. Использование компоновки Grid.

Использование Canvas

Компоновочный элемент Canvas является поверхностью для рисования с совершенно свободным форматом. Определить местоположение элемента управления в данном случае можно, задавая его свойства Canvas.Top и Canvas.Left или с помощью свойства Margin (Поля).

Например, рассмотрим следующий XAML:

<Canvas Height="261" Width = "439">
  <Button Height="101" Width = "110" 
          Canvas.Left="101" Canvas.Top = "82.5" 
          Content="KHonKa"/>
</Canvas>

Как видите, свойства Canvas.Top и Canvas.Left заданы. Они показывают, что кнопка всегда будет сохранять это местоположение относительно верхнего левого угла родительского элемента Canvas. Так что, если Canvas будет перемещаться, кнопка тоже будет двигаться. Более подробно компоновочный элемент Canvas рассматривается в "Основы XAML" .