2D-графика и анимация в Silverlight

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

Размер фигур можно настраивать в визуальном режиме, например, на рис. 30.3 видны маркеры изменения размера вокруг выделенного эллипса. Но, в том, что касается остальных настрое,к нам будет полезна панель Свойства и XAML-редактор.

Рассмотрим свойства фигур, которыми мы пользовались в этом примере, опираясь на их XAML-разметку. В листинге 30.2 приведен XAML-код эллипса, расположенного в нашем примере на переднем плане, код его описания расположен последним, если ориентироваться на листинг 23.1.

<Ellipse Height="222" HorizontalAlignment="Left" Margin="12,49,0,0"
Name="ellipse1" Stroke="#FF2B2BA0" StrokeThickness="10" VerticalAlignment="Top" 
Width="416" Fill="#FF32B132" />

<p>Height – высота элемента

HorizontalAlighment – выравнивание по горизонтали

Margin – расстояние между элементом и другими элементами. В данном случае задаётся для левой, верхней, правой и нижней сторон объекта и отражает расположение объекта на экране относительно ячейки сетки (она имеет имя ContentPanel), в которой расположены объекты. При изменении положения объекта на странице именно здесь записывается его новое положение.

Name – имя элемента

Stroke – цвет обводки в шестнадцатеричном формате, с альфа-каналом, отвечающим за прозрачность. Первое значение в описании цвета (#FF2B2BA0), FF, указывает на то, что объект непрозрачен, три других – 2B, 2B, A0 – задают, соответственно, красную, зеленую и синюю составляющие итогового цвета. Цвета удобно задавать в панели Свойства – при попытке редактирования свойства, подразумевающего установку цвета, появляется окно настройки цвета (рис. 30.4). Причём, здесь возможно не только настраивать цвета, но и задавать, например, тип заливки и некоторые другие параметры.

StrokeThickness – толщина обводки

VerticalAlignment – выравнивание по вертикали

Width - ширина

Fill – заливка

Рассмотрим свойства следующей фигуры в коде. Это – многоугольник, представленный в нашем проекте в виде треугольника, листинг 23.3.,

            <Polygon Height="163" HorizontalAlignment="Left" Margin="143,399,0,0" Name="polygon1" Stroke="#FFA04BC4"
 StrokeThickness="10" VerticalAlignment="Top" 
Width="233" Fill="{x:Null}">
                <Polygon.Points>
                    <Point>0,0</Point>
                    <Point Y="100" />
                    <Point X="100" Y="100" />
                </Polygon.Points>
            </Polygon>

Подавляющее большинство его свойств вам уже знакомы. У многоугольника есть одна важная особенность. Для того чтобы задать его, нужно указать координаты точек, которые в него входят. Эти точки будут соединены замкнутой линией. Если обратиться к свойству объекта Points в панели Свойства, откроется окно, рис. 30.5.

Здесь можно добавлять в многоугольник точки (в левой части окна), и настраивать свойства точек (X и Y) в правой части.

Обратите внимание на то, что координаты точек задаются относительно левого верхнего угла границы фигуры, рис. 30.6.

У многоугольника задана граница толщиной в 10 пикселей, она равномерно выводится вокруг линий, задающих стороны фигуры, в итоге, выходит за пределы ограничивающей рамки.

Наша следующая фигура, листинг 23.4, представляет собой эллипс с градиентной заливкой

<Ellipse Height="100" HorizontalAlignment="Left" Margin="187,250,0,0" Name="ellipse2" 
Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="100">
                <Ellipse.Fill>
                    <RadialGradientBrush>
                        <GradientStop Color="#E9FFFFFF" Offset="0" />
                        <GradientStop Color="#E304121A" Offset="0.994" />
                        <GradientStop Color="#F106639F" Offset="0.517" />
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>

Высота и ширина эллипса равны, мы получаем круг, а с учётом использования градиентной заливки – иллюзию шарообразной формы объекта.

Для задания градиентной заливки удобно пользоваться уже упомянутым окном настройки цвета, выбрав в качестве кисти заливки Градиентную кисть, в качестве типа – Радиальный градиент (рис. 30.7) и настроив параметры градиента.

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

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

Поговорив о стандартных фигурах, остановимся теперь на трансформации объектов.

30.2. Трансформация объектов

Трансформация в Silverlight может применяться к объектам, которые наследуются от UIElement. На практике оказывается, что это – текст, изображения, фигуры, элементы управления, другие элементы. В UIElement есть свойство RenderTransform, которому можно назначать объект типа Transform (System.Windows.Media.Transform). В частности, существуют следующие классы (из пространства имён System.Windows.Media), которые можно использовать при настройке данного свойства:

Задавать трансформации можно как в XAML-описании объектов, так и в коде, меняя параметры трансформации по какому-либо событию.

Рассмотрим пример описания трансформации в XAML-коде. Создадим новую страницу, назовём её Transformation.XAML, сделаем её доступной с главной страницы по ссылке.

Добавим на страницу новый TextBlock, введем в него текст "Текст для трансформации", зададим размер шрифта (FontSize) 32 пункта. Создадим две копии текстового блока. Добавим на страницу кнопку (элемент управления Button), её копию и приведем их код в вид, представленный в листинге 30.5.

           <!-- Исходный текст-->
            <TextBlock Height="58" 
                       HorizontalAlignment="Left" 
                       Margin="28,32,0,0" 
                       Name="textBlock1" 
                       Text="Текст для трансформации" 
                       VerticalAlignment="Top" 
                       FontSize="32" 
                       Width="393" />
            <!-- Перекошенный текст -->
            <TextBlock FontSize="32" 
                       Height="58" 
                       HorizontalAlignment="Left" 
                       Margin="16,98,0,0" 
                       Name="textBlock2" 
                       Text="Текст для трансформации" 
                       VerticalAlignment="Top" 
                       Width="393" >
                <TextBlock.RenderTransform>
                     <SkewTransform AngleX="30" 
                                    AngleY="10"/>  
                </TextBlock.RenderTransform>
            </TextBlock>
            <!-- Наклоненный текст -->
            <TextBlock FontSize="32" 
                       Height="58" 
                       HorizontalAlignment="Left" 
                       Margin="30,301,0,0" 
                       Name="textBlock3" 
                       Text="Текст для трансформации" 
                       VerticalAlignment="Top" 
                       Width="393" >
                <TextBlock.RenderTransform>
                     <RotateTransform Angle="-15"/>  
                </TextBlock.RenderTransform>
            </TextBlock>
            <!--Исходная кнопка -->
            <Button Content="Button" 
                    Height="72"
                    HorizontalAlignment="Left" 
                    Margin="263,313,0,0" 
                    Name="button1" 
                    VerticalAlignment="Top" 
                    Width="160" />
            <!-- Перекошенная и увеличенная кнопка-->
            <Button Content="Button" 
                    Height="72" 
                    HorizontalAlignment="Left"
                    Margin="149,410,0,0" 
                    Name="button2" 
                    VerticalAlignment="Top" 
                    Width="160"> 
                <Button.RenderTransform>
                    <TransformGroup>
                        <SkewTransform AngleX="-50" 
                                    AngleY="20"/>
                        <ScaleTransform ScaleX="2"/>
                    </TransformGroup>
                 </Button.RenderTransform>
            </Button>

Внутри описания элемента мы задаем свойства для RenderTransform. Два трансформированных фрагмента текста демонстрируют трансформации SkewTransform и RotateTransform. К кнопке мы применили сразу две трансформации, для этого нам понадобилось использовать тег TransformGroup (фактически, воспользовались группой трансформаций). Сначала мы применили трансформацию перекоса, потом – масштабирования.

Итог работы вышеприведенного кода вы можете видеть на рис. 30.8.

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

Рассмотрим теперь анимацию объектов с использованием трансформаций и события Rendering.

30.3. Анимация объектов, основанная на событии Rendering

Добавим в наш проект новую страницу, назовем ее SimpleAnimation. Добавим на страницу эллипс с равной высотой и шириной, приведем его XAML-код к виду, представленному в листинге 30.6.

<Ellipse Height="100" 
                     HorizontalAlignment="Left" 
                     Margin="134,501,0,0" 
                     Name="ellipse1" 
                     Stroke="Black" 
                     StrokeThickness="1" 
                     VerticalAlignment="Top"
                     Width="100" 
                     Fill="#FF00CB00">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="translate" />
                </Ellipse.RenderTransform>
            </Ellipse>

Обратите внимание, здесь мы задаём в настройках трансформации TranslateTransform, указывая для этой трансформаци имя (x:Name) – translate. По этому имени мы сможем обращаться к данной трансформации из кода, модифицируя в процессе исполнения программы её свойства. Обращение к трансформации можно организовать и без задания имени, через объект ellipse1.

Мы собираемся организовать автоматическое перемещение окружности по событию Rendering объекта CompositionTarget, который представляет собой отображаемую поверхность приложения. Фактически, перехватив это событие мы получаем таймер, частота срабатывания которого соответствует частоте обновления экрана. Для перехвата события мы воспользуемся конструктором SimpleAnimation() в файле SimpleAnimation.xaml.cs. Добавим на страницу две кнопки.

Одну, подписанную как Старт (button1), будем нажимать для запуска перемещения объекта по экрану со случайными значениями приращения по X и Y, вторую (Сброс, button2) будем использовать для возврата объекта в исходную позицию и прекращения перемещения.

Код файла SimpleAnimation.xaml.cs приведен в листинге 30.7

7using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace P23_1
{
    public partial class SimpleAnimation : PhoneApplicationPage
    {
        double speedAndDirX = 0;
        double speedAndDirY = 0;
        bool isAnimated = false;
        public SimpleAnimation()
        {
            InitializeComponent();
            CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
        }

                
        void CompositionTarget_Rendering(object sender, EventArgs e)
        {
            if (isAnimated)
            {
                translate.X += speedAndDirX;
                translate.Y += speedAndDirY;
            }
        }

        private void button2_Click(object sender, RoutedEventArgs e)
        {
            isAnimated = false;
            translate.X = 0;
            translate.Y = 0;
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            Random r = new Random();
            speedAndDirX = r.Next(5) - r.Next(5);
            speedAndDirY = r.Next(5) - r.Next(5);
            isAnimated = true;
        }
    }
}

На рис. 30.9 в можете видеть страницу SimpleAnimation.xaml.

Рассмотрим еще один вариант анимации – с использованием инструментов, доступных в Expression Blend.

30.4. Анимация объектов с применением Expression Blend

Создадим новую страницу, BlendAnimation, разместим на ней эллипс размером 200х200, зададим заливку. Вызовем контекстное меню проекта, выберем команду Открыть в Expression Blend.

В Expression Blend перейдем на закладку Projects, двойным щелчком выберем страницу BlendAnimation.xaml, рис. 30.10.

На закладке Objects and Timeline нажмем на кнопку "+" в верхней части панели, появится окно Create Storyboard Resource, зададим в нём имя для нашей анимации – Ellipse Animation, рис. 30.11.

Нажмем на кнопку ОК. В панели Objects and Timeline появится временная шкала. Выделим объект LayoutRoot и нажмём кнопку Record Keyframe (на ней изображён овал со знаком +), на шкале времени напротив LayoutRoot появится значок овала, кроме того, в правой части окна будет доступна панель Properties, рис. 30.12.

Первый ключевой кадр – это исходной состояние страницы. Создавая новые ключевые кадры и изменяя состояние элементов мы задаём их анимацию.

Переместим жёлтый указатель на шкале времени, после чего изменим размеры и положение эллипса. Новый ключевой кадр будет создан автоматически, рис. 30.13.

Теперь, когда у нас есть уже два ключевых кадра, мы можем просмотреть полученную анимацию, для этого нажмём на кнопку Play на панели Objects and Timeline. Мы можем добавлять новые ключевые кадры, работать с существующими, перетаскивая мышью указатель текущего времени на шкале, просматривать промежуточные состояния анимации, пользоваться панелью Properties, добавлять в проект новые элементы и т.д. В итоге наш проект приобрел вид, показанный на рис. 30.14.

Сохраним проект (можно закрыть окно Expression Blend, утвердительно ответив на вопрос о сохранении проекта) и снова окажемся в Visual Studio. Утвердительно ответим на вопрос о перезагрузке измененного файла. В файл BlendAnimation.xaml будет добавлен XAML-код описания анимации, так как в Blender мы создали новый объект (прямоугольник), этот прямоугольник так же будет добавлен на страницу.

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

        private void ellipse1_DoubleTap(object sender, GestureEventArgs e)
        {
            EllipseAnimation.Begin();
        }

30.5. Выводы

В этой лабораторной работе мы рассмотрели вывод двумерных изображений в Silverlight-проектах и их анимацию различными способами. Рассмотрели пример использования Expression Blend для анимации объектов с помощью шкалы времени и ключевых кадров.

30.6. Задание

Изучите различные способы трансформации объектов. Поэкспериментируйте с покадровой анимацией, основанной на перехвате события Rendering, используя различные варианты трансформаций. Исследуйте возможности Expression Blend.

30.7. Дополнительные материалы

К данной лабораторной работе прилагается видеоурок