Технологии программирования / источники / ++ Введ в совр Веб-техн 1-22 / 22. +ЛР Знакомство с Silverlight (продолжение
.doc22. ЛР: Знакомство с Silverlight (продолжение)
Содержание
Часть 1. Создание цветовой анимации
Часть 2. Создание интерактивных элементов
1. Рисование фигур и группировка объектов.
2. Создание первой анимации: эллипс.
3. Создание второй анимации: прямоугольник.
4. Создание третьей анимации: треугольник.
Часть 3. Создание гиперссылок
1. Создание цепочки гиперссылок на страницах
2. Создание отдельной страницы ссылок.
3. Редактирование HTML-страницы
Часть 1. Создание цветовой анимации
Добавьте к приложению, созданному в предыдущей работе, ещё одну страницу (Page) с именем AnimateColor.xaml.
Создайте несколько текстовых блоков и примените к ним стиль.
Создайте StoryBoard с именем sbColor, установите курсор на 1 сек и измените цвета текстовых блоков. Теперь выделите StoryBoard, щёлкнув мышью по его имени (прямо под заголовком панели Objects and Timeline) и на панели свойств задайте вечный повтор с авто-реверсом (рис. 22.1).
Рис. 22.1. Настройка анимации на бесконечный повтор с авто-реверсом
Запуск анимации задайте таким же образом, как и в предыдущем задании.
Перед запуском приложения измените свойство Source навигационного фрейма на главной странице - укажите в нём страницу AnimateColor.xaml.
Часть 2. Создание интерактивных элементов
1. Рисование фигур и группировка объектов.
Добавьте к приложению ещё одну страницу с именем Interactions.xaml.
Изобразите на ней нечто подобное рис. 22.2
Рис. 22.2. Пример нескольких графических объектов, используемых для демонстрации интерактивной анимации
Для рисования фигур используйте инструменты Прямоугольник и Эллипс, которые совмещаются на одной кнопке панели инструментов (рис. 22.3).
Рис. 22.3. Выбор инструментов Прямоугольник, Эллипс и Линия на панели
К эллипсу применена радиальная градиентная заливка (рис. 22.4).
Рис. 22.4. Настройка радиальной градиентной заливки
Прямоугольник залит сплошным цветом, а его рамка (Stroke) имеет относительно большую толщину (StrokeThickness), к которой применена градиентная радиальная заливка (рис. 22.5).
Рис. 22.5. Настройка толщины и градиентной заливки для рамки
Треугольник можно нарисовать, например, пользуясь инструментом Pen - выбрав его, щёлкните мышью в трёх точках и, чтобы замкнуть фигуру, снова щёлкните в начальной точке. После этого к фигуре (Path) можно применять любую заливку.
Нарисовав текстовые блоки, объедините их с соответствующими фигурами - это целесообразно сделать, поскольку анимация будет применена к каждой фигуре с надписью как к единому целому. Для этого: выделите фигуру и надпись (например, воспользовавшись инструментом Selection и обведя их мышью, либо щёлкнув по их названиям в дереве объектов, удерживая Ctrl) и примените команду меню Object - Group into - Canvas. При этом в дереве объектов появятся элементы Canvas (холсты), которые сами по себе невидимы (если не применить к ним заливки), но выполняют группирующую функцию, как видно в дереве объектов (рис. 22.6).
Рис. 22.6. Сгруппированные объекты в дереве объектов
Именно к холстам будет применена анимация.
2. Создание первой анимации: эллипс.
Пусть эллипс с надписью (а точнее, группирующий их холст) при щелчке мыши увеличивается в размере, становясь прозрачным - как бы растворяется в странице.
Создайте объект StoryBoard с именем sbDissolveEllipse, установите курсор на 1 сек и назначьте холсту два свойства: трёхкратное увеличение (рис. 22.7) и нулевую непрозрачность (Opacity).
Рис. 22.7. Установка масштабирования объекта
Чтобы привязать запуск этой анимации к щелчку мыши по холсту, привяжите к нему поведение ControlStoryboardAction и настройте его свойства соответствующим образом. Проверьте анимацию в действии.
3. Создание второй анимации: прямоугольник.
Прямоугольник пусть при подведении указателя дважды переворачивается. Для этого создайте объект StoryBoard с именем sbFlipRect, установите курсор на 0,5 сек и назначьте холсту поворот вокруг оси X порядка 360 градусов (рис. 22.8).
Рис. 22.8. Установка проекции (поворота холста)
Привязав к холсту с прямоугольником поведение ControlStoryboardAction, в качестве события, инициирующего запуск анимации, выберите MouseEnter (вход указателя мыши в область объекта).
4. Создание третьей анимации: треугольник.
Этот объект при нажатии клавиши мыши пусть улетает за пределы страницы, вращаясь, уменьшаясь и делаясь прозрачным. Сделайте эту анимацию самостоятельно.
Часть 3. Создание гиперссылок
1. Создание цепочки гиперссылок на страницах
Перейдите на страницу AnimatePosition.xaml, закройте активный StoryBoard (чтобы случайно не записать что-либо) и перетащите на страницу элемент HyperlinkButton из группы Locations панели Assets. В свойствах гиперссылки укажите Content и NavigateUri (рис. 22.9р).
Рис. 22.9. Настройка свойств гиперссылки
Теперь в работающем приложении можно переходить со страницы AnimatePosition.xaml на страницу AnimateColor.xaml, нажимая на гиперссылку. Аналогично свяжите и страницу AnimateColor с Interactions.
2. Создание отдельной страницы ссылок.
Добавьте к приложению ещё одну страницу с именем Links.xaml и поставьте ссылку на неё на странице Interactions.xaml.
Для размещения на странице Links двух наборов гиперссылок (внутренних и внешних) воспользуемся элементом управления TabControl. Найдите его в группе Locations на панели Assets, перетащите на страницу и расширьте (воспользовавшись инструментом Selection), как показано на рис. 22.10.
Рис. 22.10. Размещение элемента TabControl на странице
Чтобы дать вкладкам заголовки, на панели свойств во вкладке Common Properties нажмите кнопку с многоточием напротив Items (Collection) и в открывшемся редакторе вкладок измените свойство Header у обоих элементов - один назовите "Внутренние", а второй - "Внешние" (рис. 22.11).
Рис. 22.11. Настройка свойств вкладок
Кроме того, уберите белый фон элемента TabControl (рис. 22.12).
Рис. 22.12. Удаление фонового цвета
Теперь разместите на вкладке "Внутренние" гиперссылки на все созданные в данной работе страницы, а на вкладке "Внешние" - 2-3 ссылки на внешние ресурсы. Для того, чтобы разместить какой-либо элемент во вкладке, следует сначала выделить вкладку в дереве объектов, а затем перетащить требуемый элемент (в данном случае - гиперссылку) в окно конструктора (рис. 22.13).
Рис. 22.13. Добавление гиперссылки на вкладку
Для внешних гиперссылок свойство NavigateUri следует задавать в полном виде (например, http://www.w3.org), не опуская названия протокола. Кроме того, для свойства TargetName введите значение _new (новое окно браузера), как показано на рис. 22.14.
Рис. 22.14. Настройка свойств гиперссылки
3. Редактирование HTML-страницы
Найдите в папке с вашим Silverlight-приложением страницу TestPage.html (подкаталог Bin\Debug), создайте её копию и при помощи стилей центрируйте объект на странице.