Знакомство с Silverlight (продолжение)

Часть 1. Создание цветовой анимации

Добавьте к приложению, созданному в предыдущей работе, ещё одну страницу (Page) с именем AnimateColor.xaml.

Создайте несколько текстовых блоков и примените к ним стиль.

Создайте StoryBoard с именем sbColor, установите курсор на 1 сек и измените цвета текстовых блоков. Теперь выделите StoryBoard, щёлкнув мышью по его имени (прямо под заголовком панели Objects and Timeline) и на панели свойств задайте вечный повтор с авто-реверсом (рис 22.1).

Запуск анимации задайте таким же образом, как и в предыдущем задании.

Перед запуском приложения измените свойство Source навигационного фрейма на главной странице - укажите в нём страницу AnimateColor.xaml.

Часть 2. Создание интерактивных элементов

1. Рисование фигур и группировка объектов.

Добавьте к приложению ещё одну страницу с именем Interactions.xaml.

Изобразите на ней нечто подобное рис 22.2

Для рисования фигур используйте инструменты Прямоугольник и Эллипс, которые совмещаются на одной кнопке панели инструментов (рис 22.3).

К эллипсу применена радиальная градиентная заливка (рис 22.4).

).

Треугольник можно нарисовать, например, пользуясь инструментом Pen - выбрав его, щёлкните мышью в трёх точках и, чтобы замкнуть фигуру, снова щёлкните в начальной точке. После этого к фигуре (Path) можно применять любую заливку.

Нарисовав текстовые блоки, объедините их с соответствующими фигурами - это целесообразно сделать, поскольку анимация будет применена к каждой фигуре с надписью как к единому целому. Для этого: выделите фигуру и надпись (например, воспользовавшись инструментом Selection и обведя их мышью, либо щёлкнув по их названиям в дереве объектов, удерживая Ctrl) и примените команду меню Object - Group into - Canvas. При этом в дереве объектов появятся элементы Canvas (холсты), которые сами по себе невидимы (если не применить к ним заливки), но выполняют группирующую функцию, как видно в дереве объектов (рис 22.6).

Именно к холстам будет применена анимация.

2. Создание первой анимации: эллипс.

Пусть эллипс с надписью (а точнее, группирующий их холст) при щелчке мыши увеличивается в размере, становясь прозрачным - как бы растворяется в странице.

Создайте объект StoryBoard с именем ) и нулевую непрозрачность (Opacity).

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

3. Создание второй анимации: прямоугольник.

Прямоугольник пусть при подведении указателя дважды переворачивается. Для этого создайте объект StoryBoard с именем sbFlipRect, установите курсор на 0,5 сек и назначьте холсту поворот вокруг оси X порядка 360 градусов (рис 22.8).

Привязав к холсту с прямоугольником поведение ControlStoryboardAction, в качестве события, инициирующего запуск анимации, выберите MouseEnter (вход указателя мыши в область объекта).

4. Создание третьей анимации: треугольник.

Этот объект при нажатии клавиши мыши пусть улетает за пределы страницы, вращаясь, уменьшаясь и делаясь прозрачным. Сделайте эту анимацию самостоятельно.

Часть 3. Создание гиперссылок

1. Создание цепочки гиперссылок на страницах

Перейдите на страницу AnimatePosition.xaml, закройте активный StoryBoard (чтобы случайно не записать что-либо) и перетащите на страницу элемент HyperlinkButton из группы Locations панели Assets. В свойствах гиперссылки укажите Content и NavigateUri (рис 22.9р).

Теперь в работающем приложении можно переходить со страницы AnimatePosition.xaml на страницу AnimateColor.xaml, нажимая на гиперссылку. Аналогично свяжите и страницу AnimateColor с Interactions.

2. Создание отдельной страницы ссылок.

Добавьте к приложению ещё одну страницу с именем Links.xaml и поставьте ссылку на неё на странице Interactions.xaml.

Для размещения на странице Links двух наборов гиперссылок (внутренних и внешних) воспользуемся элементом управления TabControl. Найдите его в группе Locations на панели Assets, перетащите на страницу и расширьте (воспользовавшись инструментом Selection), как показано на рис 22.10.

Чтобы дать вкладкам заголовки, на панели свойств во вкладке Common Properties нажмите кнопку с многоточием напротив Items (Collection) и в открывшемся редакторе вкладок измените свойство Header у обоих элементов - один назовите "Внутренние", а второй - "Внешние" (рис 22.11).

Кроме того, уберите белый фон элемента TabControl (рис 22.12).

Теперь разместите на вкладке "Внутренние" гиперссылки на все созданные в данной работе страницы, а на вкладке "Внешние" - 2-3 ссылки на внешние ресурсы. Для того, чтобы разместить какой-либо элемент во вкладке, следует сначала выделить вкладку в дереве объектов, а затем перетащить требуемый элемент (в данном случае - гиперссылку) в окно конструктора (рис 22.13).

Для внешних гиперссылок свойство NavigateUri следует задавать в полном виде (например, http://www.w3.org), не опуская названия протокола. Кроме того, для свойства TargetName введите значение _new (новое окно браузера), как показано на рис 22.14.

3. Редактирование HTML-страницы

Найдите в папке с вашим Silverlight-приложением страницу TestPage.html (подкаталог Bin\Debug), создайте её копию и при помощи стилей центрируйте объект на странице.