Expression Blend -это профессиональный дизайнерский инструмент, предназначенный для создания красивых интерфейсов для Windows и Веб-приложений. Благодаря ему, с помощью одного инструмента можно объединить все необходимые элементы дизайна для Веб, включая видео, векторную графику, текст, анимацию, изображения, а также элементы управления. Expression Blend разработан, чтобы помочь дизайнерам создавать как Windows, так и Веб-приложения. В данной лекции вы познакомитесь с этим инструментом, совершив краткий тур по предлагаемым им возможностям. Одной лекции совершенно не достаточно, чтобы охватить все многочисленные аспекты Expression Blend, но к концу этой лекции вы освоите базовые понятия и будете готовы к дальнейшему изучению возможностей этого замечательного инструмента самостоятельно!
Expression Blend доступен как часть пакета Microsoft Expression. Подробнее об этом можно узнать на сайте .
После загрузки и установки Expression Blend запустите его из меню Пуск (Start). Вы увидите Интегрированную среду разработки (integrated development environment, IDE) Blend (рис. 2.1).
(рис 2.1) Expression Blend IDE.Чтобы создать новое приложение , выберите в меню File (Файл) New Project (Новый проект), и откроется диалоговое окно New Project, как показано на рис. 2.2.
(рис 2.2) Диалоговое окно New Project в Expression Blend.Данное диалоговое окно предлагает следующие опции:
.exe ) Выбор этой опции обеспечивает создание клиентского приложения, построенного на Windows Presentation Foundation (WPF); данный тип проекта является приложением только для Windows.В лекц. 1 были представлены некоторые детальные сведения о шаблоне Silverlight 1 Site, поэтому вы можете вернуться к той лекции для получения более подробной информации по этой опции. Далее данная лекция будет посвящена шаблону Silverlight 2 Application.
Чтобы создать приложение Silverlight 2, откройте диалоговое окно New Project и задайте имя для своего нового проекта (в данном случае - TestApp ). Expression Blend создаст для вас новый проект со всем необходимым для Silverlight 2 .NET-приложения.
Структуру создаваемого проекта можно увидеть на рис. 2.3. Она идентична структуре продукта, создаваемой Visual Studio, которая будет обсуждаться подробно в лекц. 3, "Использование Visual Studio с Silverlight 2".
(рис 2.3) Структура проекта Silverlight 2.Рассматривая структуру проекта, важно отметить, что в этом приложении два XAML-файла, и ни один из них не является Silverlight XAML-страницей, как это было в Silverlight 1. Это одно из фундаментальных отличий проекта Silverlight 2 Application от проекта Silverlight 1 Site.
Страница по умолчанию
Silverlight 2 работает с вашим XAML как со страницей. Таким образом, шаблон создает стандартное XAML-содержимое приложения в виде файла Page.xaml. Корневым элементом данного файла, что не удивительно, является UserControl (Пользовательский элемент управления), а не Canvas, к которому вы, возможно, привыкли в Silverlight 1.
Далее представлен XAML для стандартного Page.xaml:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xa ml"
x:Class="TestApp.Page"
Width = "640" Height="480">
<Grid x:Name="LayoutRoot" Background="White"/>
</UserControl>
Обратите внимание, что для размещения содержимого используется < UserControl>.
Можно увидеть, что Page имеет сформированный для вас файл выделенного кода. Ему будет присвоено имя Page.xaml.cs или Page.xaml.vb в зависимости оттого, какой язык программирования выбран для проекта. Файл содержит базовый код, необходимый для создания UserControl. Он представлен в следующем фрагменте:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace TestApp {
public partial class Page : UserControl
{
public Page() {
// Необходимо для инициализации переменных
InitializeComponent();
}
}
}
Конечно, для реализации логики своего приложения вы не ограничены этим файлом и можете создавать другие файлы .cs (или .vb) для этого, но данный файл будет запускаться при каждом создании экземпляра элемента управления средой выполнения Silverlight.
Файлы App.xaml и App.xaml.cs определяют условия запуска создаваемого приложения. Silverlight будет загружать и выполнять их первыми при запуске и закрывать последними при завершении приложения.
Для реализации этого используются события OnStartup и OnStartup, где свойство приложения RootVisual задается как экземпляр Page:
public App() {
this.Startup += this.OnStartup;
this.Exit += this.OnExit;
InitializeComponent();
}
private void OnStartup(object sender, StartupEventArgs e) {
// Здесь загружается основной элемент управления
this.RootVisual = new Page();
}
private void OnExit(object sender, EventArgs e) {
}
App.xaml не поддерживает визуальные элементы напрямую, поэтому нельзя в него напрямую добавлять элементы управления или другие визуальные элементы. Не рассматривайте это как рабочую поверхность только потому, что это XAML В данном случае, XAML используется только для определений. Например, с его помощью можно описать ресурсы для создаваемого приложения.
App.xaml.cs полезен для инициализации данных, которые предполагается использовать в нескольких пользовательских элементах управления. Помните об этом при разработке своего приложения. Например, можно сохранить некоторый текст, который будет использоваться приложением, объявив его ресурсом в App.xaml:
<Application xmlns=" http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xam l"
x:Class="TestApp.App">
<Application.Resources>
<TextBlock x:Key="txtResource" Text="Hello">
</TextBlock>
</Application.Resources>
</Application>
Теперь это содержимое может быть без труда извлечено для любого элемента управления в приложении следующим образом:
TextBlock t = (TextBlock)Application.Current.Resources["txtResource"]; string strTest = t.Text;
Особо внимательные заметят, что здесь не хватает страницы для размещения элемента управления Silverlight. He волнуйтесь! Blend автоматически сформирует ее для вас. Вы увидите это, когда запустите приложение.
Прежде чем двигаться дальше, добавим в UserControl простой TextBlock (Текстовый блок) для отображения некоторого текста. Вот пример:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xa ml"
x:Class="TestApp.Page" Width = "640" Height="480">
<Grid x:Name="LayoutRoot" Background="White" >
<TextBlock Text="Hello"/>
</Grid>
</UserControl>
Теперь, если выполнить это приложения (Project > Test Solution), вы увидите на экране примерно то, что представлено на рис. 2.4.
(рис 2.4) Выполнение приложения Silverlight из Blend.Это простое приложение выполняется с использованием Веб-сервера Cassini (отсюда случайный номер порта, 4553, который можно видеть в адресной строке на рис. 2.4) путем формирования HTML-страницы для размещения Silverlight-содержимого.
Посмотрим на исходный код этой страницы с помощью команды браузера View Source (Просмотр исходного кода):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>TestApp</title>
<style type="text/css">
html, body {
height: 100%; overflow: auto;
} body {
padding: 0; margin: 0;
}
#silverlightControlHost { height: 100%; }
</style>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
var errMsg = "Unhandled Error in Silverlight 2 Application " +
appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError")
{
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n"; }
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n"; }
errMsg += "MethodName: " + args.methodName + " \n"; }
throw new Error(errMsg); }
</script>
</head>
<body>
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight,"
type="application/x-silverlight-2"
width = "100%" height="100%">
<param name="source" value="TestApp.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId = 108181"
alt="Get Microsoft Silverlight"
style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>
</div>
</body>
</html>
Обратите внимание на тег <object>. В нем делается попытка создания экземпляра Silverlight. В случае сбоя он формирует изображение с гипертекстовой ссылкой (HREF) на адрес, с которого можно загрузить Silverlight. Более подробно об этом и других способах создания экземпляра объекта Silverlight рассказывается в лекц. 6, "Элемент управления браузера Silverlight".
Expression Blend предлагает гибкую интегрированную среду разработки (IDE), которая позволяет максимально увеличить количество информации, выводимой на экран. При этом пользователь может без труда понимать, что происходит.
IDE имеет два варианта организации рабочей области приложения: рабочая область Design (Дизайн), используемая преимущественно для создания и настройки пользовательского интерфейса (UI), и рабочая область Animation (Анимация), которая используется, главным образом, для создания анимаций с использованием временной шкалы. Переключаться между рабочими областями можно с помощью клавиши F6, или выбирая необходимую рабочую область в опциях Active Workspace (Активная рабочая область) меню Window.
Экран в Expression Blend IDE разделен на панели.Каждая панель имеет собственное назначение, как вы увидите прямо сейчас во время их обзора.
Панель инструментов располагается на экране с левого края. Она содержит инструменты,такие как Selection (Выбор) или Direct Selection (Прямой выбор), которые могут использоваться для обработки любого объекта; визуальные элементы,такие как Rectangle (Прямоугольник) или Ellipse (Эллипс); компоновочные элементы,такие как StackPanel или Canvas; и элементы управления,такие как Button (Кнопка) или TextBox (Текстовое поле). Панель инструментов представлена на рис. 2.5.
(рис 2.5) Панель инструментов Expression Blend.В Blend схожие инструменты могут быть собраны под одним значком на панели инструментов. На рис. 2.5 видно, как можно просматривать набор подобных инструментов. Если в нижнем правом углу инструмента есть белый треугольник, вы можете навести курсор на этот инструмент и нажать кнопку мыши, чтобы увидеть всех членов "семейства" выбранного объекта. Так, например, если навести курсор на инструмент Rectangle и нажать кнопку мыши, появится выпадающее окно, в котором будут представлены все остальные доступные фигуры, как видно на рис. 2.6.
(рис 2.6) Группировка инструментов.Blend обладает замечательным свойством - он отображает на панели инструментов значок того инструмента семейства инструментов, который вы использовали. То есть, на панели инструментов будет отображаться инструмент, который использовался последним, так что вам не придется в следующий раз удерживать кнопку мыши, ожидать открытия меню и выбирать этот инструмент снова.
Так, например, на рис. 2.6 на панели инструментов отображается Rectangle, и по нажатию кнопки мыши вы увидите окно с остальными доступными инструментами визуальных элементов этого типа. Если выбрать Ellipse и нарисовать с его помощью что-то на рабочей поверхности, на панели инструментов будет отображаться значок Ellipse, а не Rectangle.
Панель взаимодействий представлена на рис. 2.7 и обычно располагается правее панели инструментов. Она создана с целью упрощения выполнения следующих задач:
Панель взаимодействий имеет два разных вида подсветки. Выбранный в настоящий момент элемент подсвечивается серым. На рис. 2.7 можно видеть, что элемент управления Border (Граница) выделен серым. Выделенный объект можно изменять, используя окно свойств или перетягивая его по рабочей поверхности.
Хотя на черно-белом рисунке он кажется серым, на экране компьютера элемент управления LayoutRoot (Корень компоновки) был бы обведен желтой рамкой. На рабочей поверхности также будет видна эта желтая рамка. Она указывает на то, что данный контейнер выбран в настоящий момент.
Кроме работы с объектами, панель взаимодействий используется для создания анимаций и раскадровок. Делается это путем нажатия кнопки со знаком плюс (+) вверху панели взаимодействий. Возможные пути создания анимаций будут рассмотрены в разделе "Использование Blend для создания анимаций" далее в данной лекции.
(рис 2.7) Панель взаимодействий.
Рабочая поверхность - основная панель экрана Expression Blend IDE. Здесь можно манипулировать всеми объектами визуально или путем непосредственного изменения, лежащего в основе XAML-кода.
В правой части рабочей поверхности имеется три вкладки:
Рабочая поверхность в совмещенном режиме представлена на рис. 2.8.
(рис 2.8) Рабочая поверхность в совмещенном режиме.Обратите внимание, что в режиме просмотра дизайна доступна возможность Zoom (Масштаб), поэтому при работе над сложными интерфейсами можно увеличивать масштаб для более детального просмотра и уменьшать масштаб изображения для получения общего вида. Для этого используется инструмент Zoom, располагающийся в нижнем левом углу рабочей поверхности. Его можно развернуть и выбрать стандартный масштаб, можно ввести определенное значение в предоставленном поле или установить заданный масштаб с помощью мыши.
Панель проекта (представленная на рис. 2.9) используется для управления файлами проекта. Что важно заметить об этой панели, это использование контекстных меню. В зависимости от того, в каком месте панели находится курсор в момент щелчка правой кнопкой мыши, появляются разные (но соответствующие) контекстные меню. Возможно, вам знакомы контекстные меню, предлагающие команды для определенной панели, но, в данном случае, разные меню выводятся по щелчку правой кнопкой мыши на решении, проекте, папке References (Ссылки) и других элементов панели проекта.
(рис 2.9) Панель проекта.Solution (Решение) -это коллекция из одного или более проектов. При редактировании решения им можно управлять как угодно: выполнять его сборку, отладку, очистку и управление отдельными проектами. На рис. 2.9 решение TestApp располагается вверху панели проекта, и панель показывает, что данное решение содержитодин проект.
Project (Проект) - это коллекция элементов, сочетание которых образует приложение, содержащее одну или более страниц Silverlight. Все ссылки на внешние компоненты, необходимые данному приложению, находятся в папке References описания проекта. По правому щелчку мыши проекта появляется контекстное меню, с помощью которого можно манипулировать содержимым проекта. В контекстном меню предлагаются такие опции, как добавление новых шаблонных элементов, добавление существующих элементов из других проектов или удаление элементов из проекта.
Папка References в проекте используется для управления ссылками на сборки, содержащие информацию, которая необходима в создаваемом проекте. Например, если необходим специальный элемент управления, он будет скомпилирован в сборку. Тогда если вы укажете эту сборку в ссылках, вы сможете использовать ее в своем приложении.
Папка Properties (Свойства) содержит файл манифеста приложения, описывающий все свойства проекта, включая список ссылок, чтобы приложение понимало, откуда они загружаются во время выполнения. Не следует путать папку Properties с панелью свойств, обозначенной вкладкой Properties вверху окна, которое показано на рис. 2.9, и описываемой более подробно в следующем разделе.
Панель свойств используется для управления всеми визуальными аспектами отдельного элемента. Поскольку элементы XAML имеют множество настраиваемых свойств, эта панель предлагает два очень полезных ярлыка.
Под первым ярлыком представлены свойства редактируемого элемента, сгруппированные по категориям. Обычно здесь предоставляется доступ к следующим визуальным аспектам элементов:
Brushes ( Кисти ) Позволяет задавать для элемента заливку и обводку, а также использовать маску прозрачности. Намного более подробно использование кистей рассматривается в лекц. 4, "Основы XAML".Appearance ( Вид ) Позволяет задавать для объекта расширенные свойства отображения. Обратите внимание, что доступные свойства отображения будут меняться в зависимости от того, какой объект редактируется в настоящий момент. Например, если редактируется элемент Rectangle, раздел Appearance панели свойств предложит задать такой параметр, как радиус скругления углов, но при редактировании элемента Button, который не имеет радиуса скругления, эта опция будет недоступна.Layout ( Компоновка ) Позволяет редактировать различные опции компоновки для объекта, такие как Width (Ширина), Height (Высота) и опции Alignment (Выравнивание). Также опции компоновки можно использовать для изменения положения объекта внутри сетки, если компоновка выполняется на сетке.Common Properties ( Общие свойства ) Включает свойства, общие для данного типа объектов. Например, здесь обычно редактируются общие свойства элементов управления, не являющихся фигурами. Доступность этих опций зависит от типа редактируемого объекта. Например, если редактируется элемент управления, общим свойством будет его индекс перехода по клавише Tab, но в случае редактирования фигуры индекс перехода по клавише Tab будет недоступен.Transform ( Трансформация ) Обеспечивает возможность редактировать свойство RenderTransform (Трансформация визуального представления) объекта. Это свойство определяет, как система формирования визуального отображения может изменять объект. Более подробно трансформации рассматриваются в лекц. 5, "Трансформация и анимация в XAML".Miscellaneous ( Разное ) Место размещения всех свойств, которые не подходят ни под одну категорию.Обратите внимание, что эти категории могут иметь подкатегории. У многих из них есть стрелка внизу, с помощью которой можно разворачивать и сворачивать панель свойств. Это позволяет скрывать свойства, которые используются реже.
Второй ярлык панели свойств - это Search (Поиск), который позволяет выполнять поиск определенного свойства. Например, если требуется редактировать некоторые свойства шрифта, но вы не знаете имя самого свойства, можно ввести font в строку поиска. Категории и доступные свойства будут отфильтрованы, и на панель будут выведены только те из них, которые имеют отношение к шрифтам. Это происходит непосредственно в процессе ввода слова поиска, поэтому если вы ищете свойство шрифта - т.е. для нашего примера, как только введены буквы fo - вы увидите доступные свойства, такие как fo reground и rendertrans fo rm, а также доступные свойства шрифта, как показано в нижней части рис. 2.10.
(рис 2.10) Использование панели свойств.Теперь рассмотрим то, как можно использовать все эти представленные выше инструменты для построения приложений 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.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 рассматривается в лекц. 4.
Компоновочный элемент StackPanel всегда будет выравнивать свои дочерние элементы управления в горизонтальном или вертикальном направлении, укладывая их, исходя из значения свойства Orientation (Ориентация). Обратите внимание, что панель переопределяет позиционирование элементов управления. Например, рассмотрим следующий XAML:
<StackPanel Height="337" Width="224" Orientation="Vertical"> <Button Canvas.Top="100" Height="64" Width = "98" Content="KHonKa"/> <Button Height="85" Width="92" Content="KHonKa"/> <Button Height="48" Width = "205" Content="KHonKa"/> </StackPanel>
Как видим, свойству Canvas.Top первой кнопки задано значение 100. Можно было бы ожидать, что данный элемент управления будет отрисовываться в этой позиции, но, как видно на рис. 2.16, это не так. Компоновочный элемент StackPanel расположил эту кнопку вверху StackPanel (потому что свойству Orientation элемента StackPanel задано значение Vertical (Вертикально)).
(рис 2.16) Кнопки в StackPanel.Когда в StackPanel располагается много элементов управления, они могут выходить за рамки самого элемента управления Panel. В этом случае элементы управления будут обрезаны границами StackPanel. Решить эту проблему поможет элемент управления ScrollViewer (Прокручиваемая область), который рассматривается в следующем разделе.
Элемент ScrollViewer обеспечивает полосы прокрутки, которые позволяют пользователю перемещаться по содержимому компоновки, выходящему за границы ScrollViewer. У этого элемента может быть только один дочерний элемент управления, поэтому обычно он используется только для размещения других контейнеров и для элементов управления с большой областью просмотра (такими как Image ).
Например, ниже представлен StackPanel, содержимое которого превышает доступный размер по вертикали:
<StackPanel Height="300" Width="199"> <Button Height="44" Width = "86" Content="KHonKa"/> <Button Height="57" Width = "75" Content="KHonKa"/> <Button Height="70" Width = "59" Content="KHonKa"/> <Button Height="109" Width="95" Content="KHonKa"/> <Button Height="104" Width="88" Content="KHonKa"/> </StackPanel>
В данном примере высота StackPanel составляет 300 пикселов, но общая высота всех кнопок - 384 пиксела. Таким образом, нижняя кнопка будет обрезана, что можно видеть на рис. 2.17.
(рис 2.17) Элементы, не поместившиеся в StackPanel.Но если поместить этот элемент в ScrollViewer, результат будет более приемлемым. Обратите внимание, что если не изменить высоту StackPanel, он по-прежнему будет обрезать кнопки. Поэтому если необходимо иметь область высотой 300 пикселов, можно задать эту высоту для ScrollViewer, а для StackPanel задать другое значение высоты. Вот пример XAML для этого:
<ScrollViewer Height="300" Width="300">
<StackPanel Height="400" Width="199">
<Button Height="44" Width="86" Content="KHonKa"/>
<Button Height="57" Width="75" Content="KHonKa"/>
<Button Height="70" Width="59" Content="KHonKa"/>
<Button Height="109" Width = "95"Content="KHonKa"/>
<Button Height="104" Width="88" Content="KHonKa"/>
</StackPanel>
</ScrollViewer>
To, как выглядит созданный в данном примере ScrollViewer, представлено на рис. 2.18.
(рис 2.18) Использование ScrollViewer.Теперь можно прокручивать список кнопок вверх и вниз, и все кнопки будут доступны; ни одна из них не будет обрезана, потому что применяется ScrollViewer. Обратите внимание, что нижнюю кнопку (рис. 2.18) можно увидеть, если перетянуть полосу прокрутки вниз.
Элемент управления Border используется только для отрисовки рамки, фона или того и другого вокруг элемента. Например, рассмотрим следующий XAML:
<Border Height="318" Width="405" Background="#FFFF0000">
<Button Height="234" HorizontalAlignment= "Center" VerticalAlignment="Center"
Width="239" RenderTransformOrigin="0.5,0.5" Content="KHonKa">
</Button>
</Border>
Это обеспечит создание красного фона за кнопкой.
Доступные визуальные элементы определены в спецификации XAML Более подробно каждый из них рассматривается в лекц. 4. А сейчас давайте перечислим основные фигуры и инструменты, предлагаемые панелью инструментов. Сюда относятся следующие фигуры:
Rectangle ( Прямоугольник ) Эта фигура используется для отрисовки прямостороннего прямоугольного четырехугольника. Создав Rectangle, высота и ширина которого равны, можно получить квадрат.Ellipse ( Эллипс ) Эта фигура используется для отрисовки эллиптической формы, овала. Ее можно превратить в круг, сделав равными ширину и высоту.Line ( Линия ) Эта фигура используется для отрисовки простой прямой линии между двумя точками.На панели инструментов также можно найти инструменты, используемые для создания фигур произвольной формы:
Pen ( Перо ) Используется для отрисовки ряда соединенных отрезков, представленных базовым элементом Path (Контур).Pencil ( Карандаш ) Используется для отрисовки ряда соединенных элементов, которые могут быть прямыми или кривыми линиями. Blend преобразует отрисованные пользователем контуры в базовый элемент Path.Все эти визуальные элементы, включая созданные с помощью инструментов Pen и Pencil, представляются одним элементом. И этот элемент может обрабатываться как любой другой объект; т.е. его можно изменять разными способами, включая задание его свойств или анимирование. Например, рассмотрим рис. 2.19, на котором с помощью инструмента Pencil отрисован ряд соединенных кривых с целью создания представления написанного от руки слова Hello (Привет). На панели Objects And Timeline (Объекты и временная шкала) можно увидеть объект, представленный как Path.
(рис 2.19) Редактирование объекта Path.Теперь слово Hello, написанное с помощью инструмента Pencil, рассматривается как один объект. Таким образом, вы можете редактировать его свойства, включая Fill, Brush и т.д. Просто выберите объект в представлении Objects And Timeline и внесите соответствующие изменения в окне свойств, как для любого другого объекта.
Blend интерпретирует элементы управления абсолютно точно так же, как и визуальные элементы. Вы просто выбираете их на панели инструментов и размещаете на рабочей поверхности. После того, как элемент управления создан на рабочей поверхности, можно редактировать его свойства. Подробно элементы управления обсуждаются в лекц. 7, "Элементы управления Silverlight: представления и компоновки".
Единственное, что следует заметить, - на панели инструментов Blend предоставлено два семейства элементов управления. Первое включает текстовые элементы управления: TextBlock (Текстовый блок) и TextBox. Во второе семейство входит ряд базовых элементов управления пользовательского интерфейса: Button, CheckBox (Флажок), ListBox (Список), RadioButton (Переключатель), ScrollBar (Полоса прокрутки), Slider (Ползунок) и GridSplitter (Разделительная полоса).
Наконец, панель инструментов предоставляет возможность добавления элементов управления, не входящих в этот набор. Для этого необходимо выбрать ссылку Asset Library (Библиотека ресурсов) в нижней части панели инструментов. При этом на экран будет выведен диалог Asset Library, как показано на рис. 2.20.
(рис 2.20) Диалоговое окно Asset Library.В диалоговом окне Asset Library можно выбирать элементы управления и добавлять их на панель инструментов. Также можно выполнять поиск определенных элементов управления, вводя название в строку поиска. Так, например, если требуется использовать элемент управления MediaElement (Элемент мультимедиа), начните вводить его название. Увидев искомый элемент управления ( MediaElement, в данном случае), достаточно выбрать его, и он станет доступен на панели инструментов.
После этого элемент управления можно помещать на рабочую поверхность и работать с его свойствами в редакторе свойств, как это делается для визуальных элементов и компоновочных элементов управления.
Подробно создание анимаций будет рассмотрено в лекц. 5, но если говорить кратко, анимация создается в Silverlight за счет изменения свойства объекта во времени. Анимации такого типа можно без труда создавать визуально, используя Blend и редактор временной шкалы.
Одна из форм анимации, поддерживаемых Silverlight, - DoubleAnimation (Анимация свойств типа Double ), которая используется для изменения числовых свойств, таких как, например, ширина визуального элемента Ellipse. Другой тип, ColorAnimation (Цветовая анимация), используется для изменения цвета свойства Brush.
Например, рассмотрим Ellipse, представленный на рис. 2.21 (который выглядит кругом, потому что его высота и ширина равны). Чтобы визуальными средствами анимировать изменение ширины элемента Ellipse, необходимо добавить новый элемент Storyboard, содержащий эту анимацию.
(рис 2.21) Рисование круга.В представлении Objects And Timeline выберите Ellipse и нажмите кнопку + рядом со списком Storyboard в верхней части панели. После принятия в диалоговом окне Create Storyboard (Создание раскадровки) настроек по умолчанию появится редактор временной шкалы. Также вверху окна Blend будет выведено сообщение Timeline Recording Is On (Ведется запись временной шкалы). Нажмите клавишу F6 для реорганизации рабочего пространства, что упростит работу над анимацией. Экран должен выглядеть примерно так, как показано на рис. 2.22.
Найдите на временной шкале желтую линию. Она обозначает текущее положение курсора воспроизведения на временной шкале. Перетащите его на отметку 2 секунды и щелкните инструмент Record Keyframe (Запись ключевых кадров), располагающийся в верхней части временной шкалы. Он выглядит как шарик с небольшим зеленым знаком плюс (+) снизу справа. На временной шкале на отметке 2 секунды появится маленький овал, как показано на рис. 2.23.
После того, как определен ключевой кадр, любые вносимые изменения в свойства объекта будут записываться в этот ключевой кадр. Продолжим и изменим ширину Ellipse, в то время как желтая линия остается на отметке 2 секунды, обозначая текущее положение на временной шкале. Например, зададим для ширины значение 200 и для свойства Fill значение Red (Красный).
Теперь подвигаем курсор воспроизведения (верхушка вертикально желтой линии на временной шкале) влево-вправо и увидим изменение ширины и цвета круга во времени.
(рис 2.22) Редактирование временной шкалы.
(рис 2.23) Добавление ключевого кадра.А вот XAML-код, сформированный в результате создания анимации визуальными средствами:
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Using="" KeyFrames="" Storyboard.TargetName="ellipse" Story=""
board.TargetProperty="(FrameworkElement.Width)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="200"/>
</DoubleAnimationUsingKey Frames>
<ColorAnimation Using="" Key="" Frames="" Story="" board.TargetName="ellipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:02" Value="#FFFF2200"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse Height="100" Width="100" Fill="#FFFFF500" Stroke="#FF000000"
x:Name="ellipse"/>
</Grid>
Намного более подробно структура этого XAML будет рассмотрена в лекц. 5, но важно обратить внимание на экземпляр элемента Storyboard.TargetName, обозначающий, для какого элемента определена анимация, и экземпляр элемента Storyboard.TargetProperty, обозначающий изменяемое свойство. Как видим, в данном XAML присутствует две анимации: изменяющая ширину целевого объекта и изменяющая его цвет. Во время формирования визуального представления анимации Silverlight использует это описание для вычисления значений свойств в каждом кадре.
В данной лекции были рассмотрены основы работы с Expression Blend и проведен краткий обзор возможностей, которые он предлагает дизайнеру или разработчику, создающему и реализующему собственные приложения Silverlight. Было показано, как можно использовать Blend для разработки решений и проектов Silverlight, и какие инструменты предлагает Blend IDE для создания и управления визуальными элементами, компоновкой, элементами управления и анимациями в приложении.
Данная лекция лишь поверхностно знакомит с тем, что можно делать с помощью Blend, но, возможно, полученные сведения вдохновят читателей на более глубокое его изучение.
Вторая часть набора инструментов взаимодействия дизайнера и разработчика находится в Visual Studio. В лекц. 3 будет рассмотрено, как можно использовать этот инструмент, что общего у него с Blend, и какие мощные возможности он обеспечивает разработчикам. Будет показано, как можно создать свое первое Silverlight-приложение - головоломку с перемещением фрагментов.
Expression Blend -это профессиональный дизайнерский инструмент, предназначенный для создания красивых интерфейсов для Windows и Веб-приложений. Благодаря ему, с помощью одного инструмента можно объединить все необходимые элементы дизайна для Веб, включая видео, векторную графику, текст, анимацию, изображения, а также элементы управления. Expression Blend разработан, чтобы помочь дизайнерам создавать как Windows, так и Веб-приложения. В данной лекции вы познакомитесь с этим инструментом, совершив краткий тур по предлагаемым им возможностям. Одной лекции совершенно не достаточно, чтобы охватить все многочисленные аспекты Expression Blend, но к концу этой лекции вы освоите базовые понятия и будете готовы к дальнейшему изучению возможностей этого замечательного инструмента самостоятельно!
Expression Blend доступен как часть пакета Microsoft Expression. Подробнее об этом можно узнать на сайте .
После загрузки и установки Expression Blend запустите его из меню Пуск (Start). Вы увидите Интегрированную среду разработки (integrated development environment, IDE) Blend (рис. 2.1).
(рис 2.1) Expression Blend IDE.Чтобы создать новое приложение , выберите в меню File (Файл) New Project (Новый проект), и откроется диалоговое окно New Project, как показано на рис. 2.2.
(рис 2.2) Диалоговое окно New Project в Expression Blend.Данное диалоговое окно предлагает следующие опции:
.exe ) Выбор этой опции обеспечивает создание клиентского приложения, построенного на Windows Presentation Foundation (WPF); данный тип проекта является приложением только для Windows.В лекц. 1 были представлены некоторые детальные сведения о шаблоне Silverlight 1 Site, поэтому вы можете вернуться к той лекции для получения более подробной информации по этой опции. Далее данная лекция будет посвящена шаблону Silverlight 2 Application.
Чтобы создать приложение Silverlight 2, откройте диалоговое окно New Project и задайте имя для своего нового проекта (в данном случае - TestApp ). Expression Blend создаст для вас новый проект со всем необходимым для Silverlight 2 .NET-приложения.
Структуру создаваемого проекта можно увидеть на рис. 2.3. Она идентична структуре продукта, создаваемой Visual Studio, которая будет обсуждаться подробно в лекц. 3, "Использование Visual Studio с Silverlight 2".
(рис 2.3) Структура проекта Silverlight 2.Рассматривая структуру проекта, важно отметить, что в этом приложении два XAML-файла, и ни один из них не является Silverlight XAML-страницей, как это было в Silverlight 1. Это одно из фундаментальных отличий проекта Silverlight 2 Application от проекта Silverlight 1 Site.
Страница по умолчанию
Silverlight 2 работает с вашим XAML как со страницей. Таким образом, шаблон создает стандартное XAML-содержимое приложения в виде файла Page.xaml. Корневым элементом данного файла, что не удивительно, является UserControl (Пользовательский элемент управления), а не Canvas, к которому вы, возможно, привыкли в Silverlight 1.
Далее представлен XAML для стандартного Page.xaml:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xa ml"
x:Class="TestApp.Page"
Width = "640" Height="480">
<Grid x:Name="LayoutRoot" Background="White"/>
</UserControl>
Обратите внимание, что для размещения содержимого используется < UserControl>.
Можно увидеть, что Page имеет сформированный для вас файл выделенного кода. Ему будет присвоено имя Page.xaml.cs или Page.xaml.vb в зависимости оттого, какой язык программирования выбран для проекта. Файл содержит базовый код, необходимый для создания UserControl. Он представлен в следующем фрагменте:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace TestApp {
public partial class Page : UserControl
{
public Page() {
// Необходимо для инициализации переменных
InitializeComponent();
}
}
}
Конечно, для реализации логики своего приложения вы не ограничены этим файлом и можете создавать другие файлы .cs (или .vb) для этого, но данный файл будет запускаться при каждом создании экземпляра элемента управления средой выполнения Silverlight.
Файлы App.xaml и App.xaml.cs определяют условия запуска создаваемого приложения. Silverlight будет загружать и выполнять их первыми при запуске и закрывать последними при завершении приложения.
Для реализации этого используются события OnStartup и OnStartup, где свойство приложения RootVisual задается как экземпляр Page:
public App() {
this.Startup += this.OnStartup;
this.Exit += this.OnExit;
InitializeComponent();
}
private void OnStartup(object sender, StartupEventArgs e) {
// Здесь загружается основной элемент управления
this.RootVisual = new Page();
}
private void OnExit(object sender, EventArgs e) {
}
App.xaml не поддерживает визуальные элементы напрямую, поэтому нельзя в него напрямую добавлять элементы управления или другие визуальные элементы. Не рассматривайте это как рабочую поверхность только потому, что это XAML В данном случае, XAML используется только для определений. Например, с его помощью можно описать ресурсы для создаваемого приложения.
App.xaml.cs полезен для инициализации данных, которые предполагается использовать в нескольких пользовательских элементах управления. Помните об этом при разработке своего приложения. Например, можно сохранить некоторый текст, который будет использоваться приложением, объявив его ресурсом в App.xaml:
<Application xmlns=" http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xam l"
x:Class="TestApp.App">
<Application.Resources>
<TextBlock x:Key="txtResource" Text="Hello">
</TextBlock>
</Application.Resources>
</Application>
Теперь это содержимое может быть без труда извлечено для любого элемента управления в приложении следующим образом:
TextBlock t = (TextBlock)Application.Current.Resources["txtResource"]; string strTest = t.Text;
Особо внимательные заметят, что здесь не хватает страницы для размещения элемента управления Silverlight. He волнуйтесь! Blend автоматически сформирует ее для вас. Вы увидите это, когда запустите приложение.
Прежде чем двигаться дальше, добавим в UserControl простой TextBlock (Текстовый блок) для отображения некоторого текста. Вот пример:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xa ml"
x:Class="TestApp.Page" Width = "640" Height="480">
<Grid x:Name="LayoutRoot" Background="White" >
<TextBlock Text="Hello"/>
</Grid>
</UserControl>
Теперь, если выполнить это приложения (Project > Test Solution), вы увидите на экране примерно то, что представлено на рис. 2.4.
(рис 2.4) Выполнение приложения Silverlight из Blend.Это простое приложение выполняется с использованием Веб-сервера Cassini (отсюда случайный номер порта, 4553, который можно видеть в адресной строке на рис. 2.4) путем формирования HTML-страницы для размещения Silverlight-содержимого.
Посмотрим на исходный код этой страницы с помощью команды браузера View Source (Просмотр исходного кода):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>TestApp</title>
<style type="text/css">
html, body {
height: 100%; overflow: auto;
} body {
padding: 0; margin: 0;
}
#silverlightControlHost { height: 100%; }
</style>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
var errMsg = "Unhandled Error in Silverlight 2 Application " +
appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError")
{
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n"; }
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n"; }
errMsg += "MethodName: " + args.methodName + " \n"; }
throw new Error(errMsg); }
</script>
</head>
<body>
<div id='errorLocation' style="font-size: small;color: Gray;"></div>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight,"
type="application/x-silverlight-2"
width = "100%" height="100%">
<param name="source" value="TestApp.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId = 108181"
alt="Get Microsoft Silverlight"
style="border-style: none"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>
</div>
</body>
</html>
Обратите внимание на тег <object>. В нем делается попытка создания экземпляра Silverlight. В случае сбоя он формирует изображение с гипертекстовой ссылкой (HREF) на адрес, с которого можно загрузить Silverlight. Более подробно об этом и других способах создания экземпляра объекта Silverlight рассказывается в лекц. 6, "Элемент управления браузера Silverlight".
Expression Blend предлагает гибкую интегрированную среду разработки (IDE), которая позволяет максимально увеличить количество информации, выводимой на экран. При этом пользователь может без труда понимать, что происходит.
IDE имеет два варианта организации рабочей области приложения: рабочая область Design (Дизайн), используемая преимущественно для создания и настройки пользовательского интерфейса (UI), и рабочая область Animation (Анимация), которая используется, главным образом, для создания анимаций с использованием временной шкалы. Переключаться между рабочими областями можно с помощью клавиши F6, или выбирая необходимую рабочую область в опциях Active Workspace (Активная рабочая область) меню Window.
Экран в Expression Blend IDE разделен на панели.Каждая панель имеет собственное назначение, как вы увидите прямо сейчас во время их обзора.
Панель инструментов располагается на экране с левого края. Она содержит инструменты,такие как Selection (Выбор) или Direct Selection (Прямой выбор), которые могут использоваться для обработки любого объекта; визуальные элементы,такие как Rectangle (Прямоугольник) или Ellipse (Эллипс); компоновочные элементы,такие как StackPanel или Canvas; и элементы управления,такие как Button (Кнопка) или TextBox (Текстовое поле). Панель инструментов представлена на рис. 2.5.
(рис 2.5) Панель инструментов Expression Blend.В Blend схожие инструменты могут быть собраны под одним значком на панели инструментов. На рис. 2.5 видно, как можно просматривать набор подобных инструментов. Если в нижнем правом углу инструмента есть белый треугольник, вы можете навести курсор на этот инструмент и нажать кнопку мыши, чтобы увидеть всех членов "семейства" выбранного объекта. Так, например, если навести курсор на инструмент Rectangle и нажать кнопку мыши, появится выпадающее окно, в котором будут представлены все остальные доступные фигуры, как видно на рис. 2.6.
(рис 2.6) Группировка инструментов.Blend обладает замечательным свойством - он отображает на панели инструментов значок того инструмента семейства инструментов, который вы использовали. То есть, на панели инструментов будет отображаться инструмент, который использовался последним, так что вам не придется в следующий раз удерживать кнопку мыши, ожидать открытия меню и выбирать этот инструмент снова.
Так, например, на рис. 2.6 на панели инструментов отображается Rectangle, и по нажатию кнопки мыши вы увидите окно с остальными доступными инструментами визуальных элементов этого типа. Если выбрать Ellipse и нарисовать с его помощью что-то на рабочей поверхности, на панели инструментов будет отображаться значок Ellipse, а не Rectangle.
Панель взаимодействий представлена на рис. 2.7 и обычно располагается правее панели инструментов. Она создана с целью упрощения выполнения следующих задач:
Панель взаимодействий имеет два разных вида подсветки. Выбранный в настоящий момент элемент подсвечивается серым. На рис. 2.7 можно видеть, что элемент управления Border (Граница) выделен серым. Выделенный объект можно изменять, используя окно свойств или перетягивая его по рабочей поверхности.
Хотя на черно-белом рисунке он кажется серым, на экране компьютера элемент управления LayoutRoot (Корень компоновки) был бы обведен желтой рамкой. На рабочей поверхности также будет видна эта желтая рамка. Она указывает на то, что данный контейнер выбран в настоящий момент.
Кроме работы с объектами, панель взаимодействий используется для создания анимаций и раскадровок. Делается это путем нажатия кнопки со знаком плюс (+) вверху панели взаимодействий. Возможные пути создания анимаций будут рассмотрены в разделе "Использование Blend для создания анимаций" далее в данной лекции.
(рис 2.7) Панель взаимодействий.
Рабочая поверхность - основная панель экрана Expression Blend IDE. Здесь можно манипулировать всеми объектами визуально или путем непосредственного изменения, лежащего в основе XAML-кода.
В правой части рабочей поверхности имеется три вкладки:
Рабочая поверхность в совмещенном режиме представлена на рис. 2.8.
(рис 2.8) Рабочая поверхность в совмещенном режиме.Обратите внимание, что в режиме просмотра дизайна доступна возможность Zoom (Масштаб), поэтому при работе над сложными интерфейсами можно увеличивать масштаб для более детального просмотра и уменьшать масштаб изображения для получения общего вида. Для этого используется инструмент Zoom, располагающийся в нижнем левом углу рабочей поверхности. Его можно развернуть и выбрать стандартный масштаб, можно ввести определенное значение в предоставленном поле или установить заданный масштаб с помощью мыши.
Панель проекта (представленная на рис. 2.9) используется для управления файлами проекта. Что важно заметить об этой панели, это использование контекстных меню. В зависимости от того, в каком месте панели находится курсор в момент щелчка правой кнопкой мыши, появляются разные (но соответствующие) контекстные меню. Возможно, вам знакомы контекстные меню, предлагающие команды для определенной панели, но, в данном случае, разные меню выводятся по щелчку правой кнопкой мыши на решении, проекте, папке References (Ссылки) и других элементов панели проекта.
(рис 2.9) Панель проекта.Solution (Решение) -это коллекция из одного или более проектов. При редактировании решения им можно управлять как угодно: выполнять его сборку, отладку, очистку и управление отдельными проектами. На рис. 2.9 решение TestApp располагается вверху панели проекта, и панель показывает, что данное решение содержитодин проект.
Project (Проект) - это коллекция элементов, сочетание которых образует приложение, содержащее одну или более страниц Silverlight. Все ссылки на внешние компоненты, необходимые данному приложению, находятся в папке References описания проекта. По правому щелчку мыши проекта появляется контекстное меню, с помощью которого можно манипулировать содержимым проекта. В контекстном меню предлагаются такие опции, как добавление новых шаблонных элементов, добавление существующих элементов из других проектов или удаление элементов из проекта.
Папка References в проекте используется для управления ссылками на сборки, содержащие информацию, которая необходима в создаваемом проекте. Например, если необходим специальный элемент управления, он будет скомпилирован в сборку. Тогда если вы укажете эту сборку в ссылках, вы сможете использовать ее в своем приложении.
Папка Properties (Свойства) содержит файл манифеста приложения, описывающий все свойства проекта, включая список ссылок, чтобы приложение понимало, откуда они загружаются во время выполнения. Не следует путать папку Properties с панелью свойств, обозначенной вкладкой Properties вверху окна, которое показано на рис. 2.9, и описываемой более подробно в следующем разделе.
Панель свойств используется для управления всеми визуальными аспектами отдельного элемента. Поскольку элементы XAML имеют множество настраиваемых свойств, эта панель предлагает два очень полезных ярлыка.
Под первым ярлыком представлены свойства редактируемого элемента, сгруппированные по категориям. Обычно здесь предоставляется доступ к следующим визуальным аспектам элементов:
Brushes ( Кисти ) Позволяет задавать для элемента заливку и обводку, а также использовать маску прозрачности. Намного более подробно использование кистей рассматривается в лекц. 4, "Основы XAML".Appearance ( Вид ) Позволяет задавать для объекта расширенные свойства отображения. Обратите внимание, что доступные свойства отображения будут меняться в зависимости от того, какой объект редактируется в настоящий момент. Например, если редактируется элемент Rectangle, раздел Appearance панели свойств предложит задать такой параметр, как радиус скругления углов, но при редактировании элемента Button, который не имеет радиуса скругления, эта опция будет недоступна.Layout ( Компоновка ) Позволяет редактировать различные опции компоновки для объекта, такие как Width (Ширина), Height (Высота) и опции Alignment (Выравнивание). Также опции компоновки можно использовать для изменения положения объекта внутри сетки, если компоновка выполняется на сетке.Common Properties ( Общие свойства ) Включает свойства, общие для данного типа объектов. Например, здесь обычно редактируются общие свойства элементов управления, не являющихся фигурами. Доступность этих опций зависит от типа редактируемого объекта. Например, если редактируется элемент управления, общим свойством будет его индекс перехода по клавише Tab, но в случае редактирования фигуры индекс перехода по клавише Tab будет недоступен.Transform ( Трансформация ) Обеспечивает возможность редактировать свойство RenderTransform (Трансформация визуального представления) объекта. Это свойство определяет, как система формирования визуального отображения может изменять объект. Более подробно трансформации рассматриваются в лекц. 5, "Трансформация и анимация в XAML".Miscellaneous ( Разное ) Место размещения всех свойств, которые не подходят ни под одну категорию.Обратите внимание, что эти категории могут иметь подкатегории. У многих из них есть стрелка внизу, с помощью которой можно разворачивать и сворачивать панель свойств. Это позволяет скрывать свойства, которые используются реже.
Второй ярлык панели свойств - это Search (Поиск), который позволяет выполнять поиск определенного свойства. Например, если требуется редактировать некоторые свойства шрифта, но вы не знаете имя самого свойства, можно ввести font в строку поиска. Категории и доступные свойства будут отфильтрованы, и на панель будут выведены только те из них, которые имеют отношение к шрифтам. Это происходит непосредственно в процессе ввода слова поиска, поэтому если вы ищете свойство шрифта - т.е. для нашего примера, как только введены буквы fo - вы увидите доступные свойства, такие как fo reground и rendertrans fo rm, а также доступные свойства шрифта, как показано в нижней части рис. 2.10.
(рис 2.10) Использование панели свойств.Теперь рассмотрим то, как можно использовать все эти представленные выше инструменты для построения приложений 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.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 рассматривается в лекц. 4.
Компоновочный элемент StackPanel всегда будет выравнивать свои дочерние элементы управления в горизонтальном или вертикальном направлении, укладывая их, исходя из значения свойства Orientation (Ориентация). Обратите внимание, что панель переопределяет позиционирование элементов управления. Например, рассмотрим следующий XAML:
<StackPanel Height="337" Width="224" Orientation="Vertical"> <Button Canvas.Top="100" Height="64" Width = "98" Content="KHonKa"/> <Button Height="85" Width="92" Content="KHonKa"/> <Button Height="48" Width = "205" Content="KHonKa"/> </StackPanel>
Как видим, свойству Canvas.Top первой кнопки задано значение 100. Можно было бы ожидать, что данный элемент управления будет отрисовываться в этой позиции, но, как видно на рис. 2.16, это не так. Компоновочный элемент StackPanel расположил эту кнопку вверху StackPanel (потому что свойству Orientation элемента StackPanel задано значение Vertical (Вертикально)).
(рис 2.16) Кнопки в StackPanel.Когда в StackPanel располагается много элементов управления, они могут выходить за рамки самого элемента управления Panel. В этом случае элементы управления будут обрезаны границами StackPanel. Решить эту проблему поможет элемент управления ScrollViewer (Прокручиваемая область), который рассматривается в следующем разделе.
Элемент ScrollViewer обеспечивает полосы прокрутки, которые позволяют пользователю перемещаться по содержимому компоновки, выходящему за границы ScrollViewer. У этого элемента может быть только один дочерний элемент управления, поэтому обычно он используется только для размещения других контейнеров и для элементов управления с большой областью просмотра (такими как Image ).
Например, ниже представлен StackPanel, содержимое которого превышает доступный размер по вертикали:
<StackPanel Height="300" Width="199"> <Button Height="44" Width = "86" Content="KHonKa"/> <Button Height="57" Width = "75" Content="KHonKa"/> <Button Height="70" Width = "59" Content="KHonKa"/> <Button Height="109" Width="95" Content="KHonKa"/> <Button Height="104" Width="88" Content="KHonKa"/> </StackPanel>
В данном примере высота StackPanel составляет 300 пикселов, но общая высота всех кнопок - 384 пиксела. Таким образом, нижняя кнопка будет обрезана, что можно видеть на рис. 2.17.
(рис 2.17) Элементы, не поместившиеся в StackPanel.Но если поместить этот элемент в ScrollViewer, результат будет более приемлемым. Обратите внимание, что если не изменить высоту StackPanel, он по-прежнему будет обрезать кнопки. Поэтому если необходимо иметь область высотой 300 пикселов, можно задать эту высоту для ScrollViewer, а для StackPanel задать другое значение высоты. Вот пример XAML для этого:
<ScrollViewer Height="300" Width="300">
<StackPanel Height="400" Width="199">
<Button Height="44" Width="86" Content="KHonKa"/>
<Button Height="57" Width="75" Content="KHonKa"/>
<Button Height="70" Width="59" Content="KHonKa"/>
<Button Height="109" Width = "95"Content="KHonKa"/>
<Button Height="104" Width="88" Content="KHonKa"/>
</StackPanel>
</ScrollViewer>
To, как выглядит созданный в данном примере ScrollViewer, представлено на рис. 2.18.
(рис 2.18) Использование ScrollViewer.Теперь можно прокручивать список кнопок вверх и вниз, и все кнопки будут доступны; ни одна из них не будет обрезана, потому что применяется ScrollViewer. Обратите внимание, что нижнюю кнопку (рис. 2.18) можно увидеть, если перетянуть полосу прокрутки вниз.
Элемент управления Border используется только для отрисовки рамки, фона или того и другого вокруг элемента. Например, рассмотрим следующий XAML:
<Border Height="318" Width="405" Background="#FFFF0000">
<Button Height="234" HorizontalAlignment= "Center" VerticalAlignment="Center"
Width="239" RenderTransformOrigin="0.5,0.5" Content="KHonKa">
</Button>
</Border>
Это обеспечит создание красного фона за кнопкой.
Доступные визуальные элементы определены в спецификации XAML Более подробно каждый из них рассматривается в лекц. 4. А сейчас давайте перечислим основные фигуры и инструменты, предлагаемые панелью инструментов. Сюда относятся следующие фигуры:
Rectangle ( Прямоугольник ) Эта фигура используется для отрисовки прямостороннего прямоугольного четырехугольника. Создав Rectangle, высота и ширина которого равны, можно получить квадрат.Ellipse ( Эллипс ) Эта фигура используется для отрисовки эллиптической формы, овала. Ее можно превратить в круг, сделав равными ширину и высоту.Line ( Линия ) Эта фигура используется для отрисовки простой прямой линии между двумя точками.На панели инструментов также можно найти инструменты, используемые для создания фигур произвольной формы:
Pen ( Перо ) Используется для отрисовки ряда соединенных отрезков, представленных базовым элементом Path (Контур).Pencil ( Карандаш ) Используется для отрисовки ряда соединенных элементов, которые могут быть прямыми или кривыми линиями. Blend преобразует отрисованные пользователем контуры в базовый элемент Path.Все эти визуальные элементы, включая созданные с помощью инструментов Pen и Pencil, представляются одним элементом. И этот элемент может обрабатываться как любой другой объект; т.е. его можно изменять разными способами, включая задание его свойств или анимирование. Например, рассмотрим рис. 2.19, на котором с помощью инструмента Pencil отрисован ряд соединенных кривых с целью создания представления написанного от руки слова Hello (Привет). На панели Objects And Timeline (Объекты и временная шкала) можно увидеть объект, представленный как Path.
(рис 2.19) Редактирование объекта Path.Теперь слово Hello, написанное с помощью инструмента Pencil, рассматривается как один объект. Таким образом, вы можете редактировать его свойства, включая Fill, Brush и т.д. Просто выберите объект в представлении Objects And Timeline и внесите соответствующие изменения в окне свойств, как для любого другого объекта.
Blend интерпретирует элементы управления абсолютно точно так же, как и визуальные элементы. Вы просто выбираете их на панели инструментов и размещаете на рабочей поверхности. После того, как элемент управления создан на рабочей поверхности, можно редактировать его свойства. Подробно элементы управления обсуждаются в лекц. 7, "Элементы управления Silverlight: представления и компоновки".
Единственное, что следует заметить, - на панели инструментов Blend предоставлено два семейства элементов управления. Первое включает текстовые элементы управления: TextBlock (Текстовый блок) и TextBox. Во второе семейство входит ряд базовых элементов управления пользовательского интерфейса: Button, CheckBox (Флажок), ListBox (Список), RadioButton (Переключатель), ScrollBar (Полоса прокрутки), Slider (Ползунок) и GridSplitter (Разделительная полоса).
Наконец, панель инструментов предоставляет возможность добавления элементов управления, не входящих в этот набор. Для этого необходимо выбрать ссылку Asset Library (Библиотека ресурсов) в нижней части панели инструментов. При этом на экран будет выведен диалог Asset Library, как показано на рис. 2.20.
(рис 2.20) Диалоговое окно Asset Library.В диалоговом окне Asset Library можно выбирать элементы управления и добавлять их на панель инструментов. Также можно выполнять поиск определенных элементов управления, вводя название в строку поиска. Так, например, если требуется использовать элемент управления MediaElement (Элемент мультимедиа), начните вводить его название. Увидев искомый элемент управления ( MediaElement, в данном случае), достаточно выбрать его, и он станет доступен на панели инструментов.
После этого элемент управления можно помещать на рабочую поверхность и работать с его свойствами в редакторе свойств, как это делается для визуальных элементов и компоновочных элементов управления.
Подробно создание анимаций будет рассмотрено в лекц. 5, но если говорить кратко, анимация создается в Silverlight за счет изменения свойства объекта во времени. Анимации такого типа можно без труда создавать визуально, используя Blend и редактор временной шкалы.
Одна из форм анимации, поддерживаемых Silverlight, - DoubleAnimation (Анимация свойств типа Double ), которая используется для изменения числовых свойств, таких как, например, ширина визуального элемента Ellipse. Другой тип, ColorAnimation (Цветовая анимация), используется для изменения цвета свойства Brush.
Например, рассмотрим Ellipse, представленный на рис. 2.21 (который выглядит кругом, потому что его высота и ширина равны). Чтобы визуальными средствами анимировать изменение ширины элемента Ellipse, необходимо добавить новый элемент Storyboard, содержащий эту анимацию.
(рис 2.21) Рисование круга.В представлении Objects And Timeline выберите Ellipse и нажмите кнопку + рядом со списком Storyboard в верхней части панели. После принятия в диалоговом окне Create Storyboard (Создание раскадровки) настроек по умолчанию появится редактор временной шкалы. Также вверху окна Blend будет выведено сообщение Timeline Recording Is On (Ведется запись временной шкалы). Нажмите клавишу F6 для реорганизации рабочего пространства, что упростит работу над анимацией. Экран должен выглядеть примерно так, как показано на рис. 2.22.
Найдите на временной шкале желтую линию. Она обозначает текущее положение курсора воспроизведения на временной шкале. Перетащите его на отметку 2 секунды и щелкните инструмент Record Keyframe (Запись ключевых кадров), располагающийся в верхней части временной шкалы. Он выглядит как шарик с небольшим зеленым знаком плюс (+) снизу справа. На временной шкале на отметке 2 секунды появится маленький овал, как показано на рис. 2.23.
После того, как определен ключевой кадр, любые вносимые изменения в свойства объекта будут записываться в этот ключевой кадр. Продолжим и изменим ширину Ellipse, в то время как желтая линия остается на отметке 2 секунды, обозначая текущее положение на временной шкале. Например, зададим для ширины значение 200 и для свойства Fill значение Red (Красный).
Теперь подвигаем курсор воспроизведения (верхушка вертикально желтой линии на временной шкале) влево-вправо и увидим изменение ширины и цвета круга во времени.
(рис 2.22) Редактирование временной шкалы.(рис 2.23) Добавление ключевого кадра.А вот XAML-код, сформированный в результате создания анимации визуальными средствами:
<UserControl.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation Using="" KeyFrames="" Storyboard.TargetName="ellipse" Story=""
board.TargetProperty="(FrameworkElement.Width)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="200"/>
</DoubleAnimationUsingKey Frames>
<ColorAnimation Using="" Key="" Frames="" Story="" board.TargetName="ellipse"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"
BeginTime="00:00:00">
<SplineColorKeyFrame KeyTime="00:00:02" Value="#FFFF2200"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<Ellipse Height="100" Width="100" Fill="#FFFFF500" Stroke="#FF000000"
x:Name="ellipse"/>
</Grid>
Намного более подробно структура этого XAML будет рассмотрена в лекц. 5, но важно обратить внимание на экземпляр элемента Storyboard.TargetName, обозначающий, для какого элемента определена анимация, и экземпляр элемента Storyboard.TargetProperty, обозначающий изменяемое свойство. Как видим, в данном XAML присутствует две анимации: изменяющая ширину целевого объекта и изменяющая его цвет. Во время формирования визуального представления анимации Silverlight использует это описание для вычисления значений свойств в каждом кадре.
В данной лекции были рассмотрены основы работы с Expression Blend и проведен краткий обзор возможностей, которые он предлагает дизайнеру или разработчику, создающему и реализующему собственные приложения Silverlight. Было показано, как можно использовать Blend для разработки решений и проектов Silverlight, и какие инструменты предлагает Blend IDE для создания и управления визуальными элементами, компоновкой, элементами управления и анимациями в приложении.
Данная лекция лишь поверхностно знакомит с тем, что можно делать с помощью Blend, но, возможно, полученные сведения вдохновят читателей на более глубокое его изучение.
Вторая часть набора инструментов взаимодействия дизайнера и разработчика находится в Visual Studio. В лекц. 3 будет рассмотрено, как можно использовать этот инструмент, что общего у него с Blend, и какие мощные возможности он обеспечивает разработчикам. Будет показано, как можно создать свое первое Silverlight-приложение - головоломку с перемещением фрагментов.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.