На странице будет размещено несколько крупных текстовых блоков, которые "прилетят" на свои места в момент при открытии страницы.
Добавьте текстовый блок, но перед тем как применять к нему какое-либо форматирование, создайте стиль (Контекстное меню «Изменить стиль» - «Создать пустой») Дайте стилю понятное имя и определите его в приложении, тогда он будет доступен во всех окнах (рис.3).
Рис. 3. Создание стиля
Окно конструктора теперь находится в режиме редактирования стиля - показан только активный элемент. Две кнопки вверху позволяют переключаться из режима редактирования страницы в режим редактирования стиля (рис.4).
Рис. 4. Режим редактирования стиля
Установите крупный (порядка 40pt) размер шрифта, полужирное начертание и какую-нибудь контрастирующую с фоном главной страницы заливку. Добавьте тень: нажмите на вкладке Внешний вид панели Свойства кнопку Создать напротив слова Effect и в появившемся окне выберите DropShadowEffect. После этого выйдите из редактирования стиля.
Добавьте ещё 2-3 текстовых блока с произвольным текстом и примените к ним созданный стиль. Для этого каждый блок сначала следует выделить, а затем выбрать стиль через контекстное меню «Изменить стиль» - «Применить ресурс»). Разместите объекты на странице произвольным образом (для перемещения используйте инструмент Выбор с панели инструментов) - например, так, как показано на рис.5.
Рис. 5. Текстовые блоки с применённым стилем
Теперь, если изменить стиль, изменятся и все элементы, к которым он применён.
Проверка: запуск приложения
Перед тем как перейти к следующей части работы, следует убедиться, что на данном этапе всё работает правильно. Запустите проект (меню Отладка – Начать отладку или F5). При этом все файлы проекта автоматически сохранятся, произойдёт компиляция, создастся и будет запущен на выполнение исполняемый файл. В итоге отобразится окно работающего приложения.
Создание анимации перемещений объектов
Создание элемента StoryBoard
Нажмите кнопку "+" на панели Объекты и временная шкала. В появившемся окне можно изменить создаваемому элементу имя. Затем нажмите кнопку «OK».
Рядом с деревом объектов появится временная шкала анимации, а в окне конструктора появится надпись "Storyboard1 Запись временная шкала включена". Когда запись включена, все манипуляции в окне конструктора и на панели свойств приобретают другой смысл: статические (исходные) состояния объектов не изменяются - вместо этого происходит фиксация изменения свойств с привязкой к моменту времени, указываемому курсором. Если требуется изменить начальные состояния, выключите запись (красная круглая кнопка рядом с надписью).
Запись анимации
В этом примере анимационный эффект будет следующим: при загрузке страницы текстовые блоки поочерёдно "слетаются" с разных сторон и, слегка пружиня, останавливаются на своих местах, образуя одну строку. Для реализации эффекта нужно отметить на временной шкале, в какой момент времени каждый объект должен быть в том или ином месте и уточнить функцию интерполяции, которая по умолчанию линейная.
Установите курсор временной шкалы на момент, когда анимация должна закончиться (например, три секунды), выделите текстовые блоки (кликом мыши, удерживая Shift) в дереве объектов и нажмите слева вверху в блоке временной шкалы кнопку "Записать опорный кадр". На шкале появятся отметки, символизируя созданный опорный кадр (рис.6).
Рис. 6. Отображение опорного кадра на временной шкале
Задайте конечное положение текстовых блоков для метки времени созданного опорного кадра. Переместите курсор на начало временной шкалы и на вкладке Внешний вид панели свойств обнулите непрозрачность (Opacity). Просмотрите анимацию в действии, нажав кнопку Play на временной шкале.
Линейную функцию перемещения между двумя указанными позициями можно модифицировать. Выберите маркеры, соответствующие окончанию анимации, на временной шкале (обведите их нажатой клавишей мыши, удерживая Ctrl). На панели свойств выберите функцию замедления анимации (Easing Function). Функции в группе In влияют на начало анимации; Out - на окончание; InOut - на то и другое. Функция Bounce даёт эффект пружины, который можно несколько ослабить увеличением параметра Bounciness (рис.7).
Рис. 7. Выбор и настройка функции замедления анимации
Добьёмся теперь поочерёдного "вылета" блоков. Пусть, например, "вылет" каждого блока длится одну секунду - для этого следует изменить позиции маркеров на временной шкале. Маркеры окончания достаточно просто переместить мышью: первый на 1 сек от начала, а второй - на 2 сек. Для маркеров начала создайте новые опорные кадры следующим образом: выделите блок, который "вылетает" вторым, установите курсор на 1 сек (время его "вылета") - при этом в конструкторе будет отображено интерполированное состояние его позиции и непрозрачности – и переместите блок в окне конструктора на исходное место (траектория движения его центра показана в конструкторе тонкой точечной линией), а также сделайте его прозрачным. Аналогично поступите и с последним блоком (или блоками - если общее количество больше трёх).
Проверьте анимацию в действии, нажав кнопку Play.
Запуск анимации.
Анимаций, которые моделируются при помощи элементов StoryBoard, может быть много (даже с участием одних и тех же объектов), и для запуска каждой из них нужен какой-либо источник.
Если не прибегать к написанию кода, то в качестве источника можно использовать Поведение ControlStoryboardAction. Найдите его на вкладке Поведение панели Ресурсы (рис.9) и перетащите мышью на элемент Window в панели Объекты и временная шкала.
Рис. 9 Объект ControlStoryboardAction
Тем самым вы назначили элементу поведение, смысл которого - контроль над некоторым элементом StoryBoard. Поскольку анимация должна запускаться при запуске приложения, в качестве элемента-источника события выбрано окно приложения.
На панели свойств следует указать, какое именно событие, как, и на какой StoryBoard будет влиять (рис.10).
Рис. 10. Настройка объекта ControlStoryboardAction
В данном случае событие окна Loaded (загружено) будет вызывать действие Play элемента StoryBoard по имени Storyboard1.
Создание кнопки
Создать кнопку с собственным дизайном можно, выполнить следующие шаги.
- Нарисуйте прямоугольник приблизительно в размере кнопки в окне.
- Округлите углы прямоугольника. Например, задайте значения свойств RadiusX и RadiusY равными 20.
- Замените прямоугольник на кнопку: В меню Сервис выберите Преобразовать в элемент управления – Button.
Для дальнейшего редактирования дизайна кнопки выберите кнопку в окне конструктора и в контекстном выберите меню Правка шаблона – Правка текущего. В результате Blend перейдёт в режим редактирования стиля и в панели Объекты и временная шкала будет отображаться структура шаблона кнопки, состоящая из вложенных друг в друга элементов Grid, Rectangle и ContentPresenter. Выберите Rectangle и в панели свойств задайте через свойство Fill кисть для фона кнопки. Задайте для Stroke цвет, который будет использоваться в шаблоне и для StrokeThickness значение 5. Можно изменить эти настройки и добавить в контейнер Grid дополнительные элементы оформления кнопки. Для задания изменения вида кнопки в различных состояниях используются определённые в шаблоне триггеры. Для изменения цвета фона кнопки при наведении на нее курсора мыши следует добавить в тег Rectangle атрибут x:Name, значением которого будет имя элемента, например
<Rectangle x:Name="btn1" … >
Затем в тег триггера для свойства IsMouseOver (нахождение курсора мыши над кнопкой)
следует вложить тег Setter, задающий изменение свойства визуального элемента с указанным через атрибут TargetName именем в ответ на это состояние. Например
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" TargetName="btn1" Value="#721F33" />
</Trigger>
В примере значение атрибута Value тега Setter содержит RGB-код цвета фона, устанавливаемого при наведении курсора мыши.
Аналогичным образом можно изменять вид кнопки при нажатии на нее (триггер для свойства IsPressed).