Задание продолжительности

Для определения времени перехода анимируемых свойств от одного значения к другому используется свойство Duration (Продолжительность). Оно определяется в формате ЧЧ:ММ:СС, где продолжительность 5 секунд записывается 00:00:05, или сокращенно – 0:0:5.

<DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" />

Использование свойства AutoReverse

Cвойство AutoReverse (Автоматическая перемотка) заставит анимацию выполниться в обратном направлении, от 500 к 0.

<DoubleAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)" AutoReverse="True" Duration="0:0:5" />

Задание свойства RepeatBehavior

Например, если необходимо повторить анимацию три раза, задается значение 3x.

<Storyboard> <DoubleAnimation RepeatBehavior="3x" Storyboard.TargetName="rect" Storyboard.TargetProperty="(Canvas.Left)" To="500" Duration="0:0:5" AutoReverse="True" /> </Storyboard>

3.Анимация с помощью ColorAnimation. Поведение ColorAnimation очень близко поведению DoubleAnimation. Этот тип используется для изменения значения color элемента во времени. Анимация вычисляется как линейная интерполяция между значениями color в заданный промежуток времени.

<ColorAnimation Storyboard.TargetName="rect" Storyboard.TargetProperty= "(Shape.Fill).(SolidColorBrush.Color)" To="#00000000" Duration="0:0:5" />

4.Анимация с помощью PointAnimation. Для изменения во времени значения, определенного как точка, используется тип PointAnimation. Анимация вычисляется как линейная интерполяция между значениями в заданный промежуток времени.Исходное значение задается с помощью свойства From и конечное значение задается как относительное (используя By ) или как абсолютное (используя To ). Пример анимации конечной точки кривой Безье:

<Path Stroke="Black" >

<Path.Data>

<PathGeometry>

<PathFigure StartPoint="100,100">

<QuadraticBezierSegment x:Name="seg"

Point1 = "200,0" Point2="300,100" />

</PathFigure>

</PathGeometry>

</Path.Data>

<Path.Triggers>

<EventTrigger RoutedEvent="Path.Loaded">

<BeginStoryboard>

<Storyboard>

<PointAnimation Storyboard.TargetName="seg"

Storyboard.TargetProperty="Point2"

From="300,100" To="300,600" Duration="0:0:5" />

</Storyboard>

</BeginStoryboard >

</EventTrigger>

</Path.Triggers>

</Path>

5.Замедление анимации. Функции замедления позволяют создавать и использовать различные специальные эффекты анимации, включая эффекты подпрыгивания или «пружины». Использование функций замедления анимации существенно упрощает анимацию объектов и придает им реалистичное поведение, поскольку в этом случае разработчику не приходится вдаваться в физику процесса.

<DoubleAnimation.EasingFunction> <BounceEase Bounces="10" EasingMode="EaseOut" Bounciness="2"></BounceEase> </DoubleAnimation.EasingFunction>

Определение EasingFunction (названной BounceEase) включает используемый тип замедления.

· EaseIn – значение изменяется от 0 до 100. При этом функция обеспечит колебания значения в области 0 заданное количество раз, что создаст эффект подпрыгивания объекта вокруг начальной точки перемещения.

· EaseOut – значение изменяется от 0 до 100, но функция, прежде чем объект достигнет конечной точки перемещения, обеспечивает колебания значения в области 100 заданное количество раз, что создаст эффект подпрыгивания объекта вокруг конечной точки.

· EaseInOut обеспечивает причудливое сочетание предыдущих двух режимов, когда значение «колеблется» как в начале, так и в конце заданного диапазона перемещения.

Функции замедления:

· BackEase Обеспечивает небольшой ход объекта назад в начале движения. Это немного напоминает то, как машина ведет себя на холме, когда она немного откатывается назад, прежде чем начать двигаться вперед.

· BounceEase - эта функция создает эффект подпрыгивания.

· CircleEase Обеспечивает изменение ускорения анимации соответственно тригонометрической функции, с постепенным нарастанием ускорения.

· CubicEase Подобно CircleEase, но изменение ускорения осуществляется по гиперболе (кубическое уравнение времени), что обусловливает более медленное изменение ускорения в начале и более быстрое его изменение в конце движения.

· PowerEase Обеспечивает изменение ускорения, при котором значение коэффициента ускорения пропорционально степени времени.

· SineEase Обеспечивает изменение значения по синусоиде.

6.Фигуры в XAML. 1)Rectangle – прямоугольник. 2)Elipse – овал. 3) Point – точка. 4)Path – нелинейный контур. 5)Line – линия. 6) Poligen – многоугольник. 7) Polyline – ломанная линия.

7.Компановочные свойства XAML. Свойства Canvas.Left и Canvas.Top используются для компоновки элементов управления в XAML. Их называют присоединенными свойствами. Кроме того, присоединенное свойство Canvas.ZIndex может использоваться для обозначения положения объекта на плоскости относительно оси Z, что определяет очередность отрисовки в случае наложения объектов друг на друга. По умолчанию элемент, отрисовываемый последним, является самым верхним, но с помощью Canvas.ZIndex это положение можно переопределить. Пример с двумя прямоугольниками:

<Canvas>

<Rectangle Fill="Red" Width="200" Height="128" Canvas.Left="8" Canvas.Top="8"/>

<Rectangle Fill="Black" Width="280" Height="80" Canvas.Left="40" Canvas.Top="32"/>

</Canvas>

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

<Canvas>

<Rectangle Canvas.ZIndex="2" Fill="Red" Width="200" Height="128" Canvas.Left="8" Canvas.Top="8"/>

<Rectangle Canvas.ZIndex="1" Fill="Black" Width="280" Height="80" Canvas.Left="40" Canvas.Top="32"/>

</Canvas>

8) Мультимедиа в Silverlight.Microsoft SilverLight— это программная платформа, включающая в себя плагин для браузера, который позволяет запускать приложения, содержащие анимацию, векторную графику и аудио-видео ролики. Silverlight реализована для ОС Windows, Mac OS и браузеров Internet Explorer, Opera, Mozilla Firefox, Safari, Google Chrome. Silverlight предоставляет графическую систему и объединяет мультимедиа, графику, анимацию и интерактивность в одной программной платформе. Он был разработан, чтобы работать с XAML и с языками .NET. XAML используется для разметки страниц, использующих векторную графику и анимацию. Текст, содержащийся в приложениях Silverlight, доступен для поисковых систем, так как он не компилируется, а доступен в виде XAML. Silverlight может воспроизводить WMV, WMA и MP3 для всех поддерживаемых браузеров, не требуя при этом дополнительных компонентов, таких как Windows Media Player. Silverlight содержит объект Downloader, благодаря которому можно скачивать скрипты, медиа файлы и т. д.

9)Поведение курсора. Большинство элементов XAML позволяют использовать свойство Cursor (Курсор) для задания вида курсора при его прохождении по элементу. Это свойства принимает значения перечисления MouseCursor (Курсор мыши). Вот ряд наиболее часто используемых значений:

· Arrow (Стрелка) Отображается обычный стандартный курсор-стрелка.

· Default (Стандартный) Нет предпочтительного курсора; используется курсор. родительского элемента, если таковой задан.

· Hand (Рука) Отображается курсор-рука, обычно используемый для ссылок.

· IBeam (I-образный) Определяет I-образный курсор; обычно используется для выбора текста.

· None (Нет) Курсор отсутствует

· Wait (Ожидание) Задает значок, который обозначает состояние ожидания.

10.Кисти xaml.Кисти в XAML определяют, как отрисовываются и закрашиваются фигуры. SolidColorBrushзаполняет область сплошным цветом. Для задания цвета может использоваться именованное значение, например Red или Black, или шестнадцатеричные значения. LinearGradientBrushзаполняет область линейной градиентной заливкой, определенной в двумерном пространстве. В этом случае градиент распространяется в направлении от верхнего левого угла к нижнему правому углу. Если для каждой из этих точек задать цвет, Silverlight отобразит плавный переход между ними.

<Canvas>

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8">

<Rectangle.Fill> <LinearGradientBrush>

<GradientStop Color="#FF000000" Offset="0"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

</LinearGradientBrush> </Rectangle.Fill> </Rectangle> </Canvas>

RadialGradientBrush

RadialGradientBrush аналогична LinearGradientBrush с точки зрения определения, но она задает круговой градиент, где точка 0 обозначает центр круга, и 1 обозначает внешний край. Проще показать это на примере, рассмотрев такой XAML:

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8">

<Rectangle.Fill> <RadialGradientBrush>

<GradientStop Color="#FF000000" Offset="0"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

</RadialGradientBrush> </Rectangle.Fill> </Rectangle>

Для задания необходимого радиуса градиентной заливки используются свойства RadiusX и RadiusY. Значение по умолчанию для этих свойств – 0,5

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8"> <Rectangle.Fill> <RadialGradientBrush RadiusX="0.1" RadiusY="0.1">

<GradientStop Color="#FF000000" Offset="0"/> <GradientStop Color="#FFFFFFFF" Offset="1"/> </RadialGradientBrush> </Rectangle.Fill> </Rectangle>

Использование ImageBrush. Для заполнения области изображением используется ImageBrush . По умолчанию кисть меняет размер соответственно размеру изображения, обеспечивая сохранение его пропорций. Следующий XAML-код обеспечивает заполнение содержимого прямоугольника ImageBrush:

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8">

<Rectangle.Fill> <ImageBrush ImageSource="smily.jpg" /> </Rectangle.Fill> </Rectangle>

11) Размеры и прозрачность MediaElement.Управление шириной и высотой самого MediaElement осуществляется через его свойства Height и Width. При формировании визуального представления элемента управления, мультимедиа будет растягиваться (или сжиматься) так, чтобы поместиться в элемент управления.

Переопределить это поведение можно с помощью свойства Stretch элемента управления MediaElement. Это свойство принимает четыре разных значения:

· None Растяжения нет. Если MediaElement больше размера видеоизображения, видеоизображение отображается в центре области отображения. Если MediaElement меньше, будет видна центральная часть видеоизображения.

· Uniform Это режим растяжения по умолчанию, он обеспечивает сохранение пропорций видеоизображения и добавление полей вверху, внизу или по бокам в случае необходимости.

· UniformToFill Это значение обеспечивает растяжение видео с сохранением его пропорций. При этом часть видеоизображения, не поместившаяся в область отображения, обрезается.

· Fill Это режим растяжения обеспечивает заполнение MediaElement видеоизображением с изменением его пропорций в случае необходимости.

Прозрачность видеоизображения. Регулировать прозрачность MediaElement позволяет свойство Opacity. Это нормализованное свойство, т.е. значение 0 эквивалентно полной прозрачности, 1 – полной непрозрачности, все остальные значения в этом диапазоне представляют разные степени прозрачности.

<Rectangle Fill="Red" Height="100" Width="200" />

<MediaElement Source="/balls.wmv" Height="200"

Width="200" Stretch="Fill" Opacity="0.5" />

12)Визуальные свойства XAML.Кроме кистей и параметров расположения, XAML предоставляет множество других свойств для управления представлением объекта. Они позволяют задавать размеры, прозрачность объекта, поведение курсора и обводку. Использование прозрачности:Прозрачность объекта может быть задана двумя способами. Первый – с помощью альфа-канала кисти, которая используется для заливки объекта. Следующий XAML-код обеспечит создание черного прямоугольника поверх рисунка: <Image Source="smily.jpg" /> <Rectangle Fill="#FF000000" Width="100" Height="200" /> Второй метод – использовать свойство Opacity (Непрозрачность), которое принимает значения в диапазоне от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это свойство применяется в сочетании с определением альфа-канала кисти.

13) Элемент управления Button и CheckBox. Элемент управления Button. В Silverlight кнопка реализуется с помощью элемента управления Button. Кнопка реагирует на ввод пользователя с таких устройств ввода, как мышь, клавиатура или стилус, формируя событие Click (Щелчок). Условия формирования кнопкой события Click могут быть настроены несколькими способами. Они задаются свойством ClickMode (Режим щелчка), которое может принимать значения Hover (Наведение), Press (Нажатие) и Release (Отпустить).

<Canvas x:Name="LayoutRoot" Background="White">

<Button x:Name="b1" ClickMode="Hover" Content="Button1" Click="Button_Click"></Button>

</Canvas>

Элемент управления CheckBoxпредоставляет пользователю опцию для выбора. Обычно он представляется в виде прямоугольника, в котором пользователь может установить или убрать флажок. Он используется, когда имеется ряд опций на выбор и можно выбрать несколько из них. При установлении флажка CheckBox формирует событие Checked (Установлен), при снятии флажка формируется событие Unchecked (Снят), и событие Click формируется при каждом щелчке по CheckBox. Аналогично элементу управления Button, CheckBox имеет свойство ClickMode, которому может быть задано значение Hover, Press или Release, определяющее условия формирования события.

<StackPanel>

<CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" IsThreeState="True" Content="Test1">

</CheckBox> <CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked" IsThreeState="True">

<CheckBox.Content>

<StackPanel Orientation="Horizontal"> <TextBlock Text="The Caption">

</TextBlock>

<Image Source="..."/>

</StackPanel>

</CheckBox.Content> </CheckBox> </StackPanel>

14) Элемент управления ComboBox и ListBox.Элемент управления ComboBox (Поле со списком) используется для представления списка доступных для выбора элементов. При этом отображается только выбранный элемент, но имеется выпадающее меню с полным списком доступных для выбора элементов. <ComboBoxItem> <TextBlock Text="Item3"></TextBlock> </ComboBoxItem> </ComboBox> Элемент управления ListBoxиспользуется для представления содержимого в виде упорядоченного списка. Это достаточно гибкий элемент управления, так что элементы списка могут создаваться из содержимого любого типа, но обычно список образуется элементами ListBoxItem (Элемент списка).

<ListBox x:Name="theList" SelectionChanged="ListBox_SelectionChanged">

<ListBoxItem Content="1"/>

<ListBoxItem Content="2"/>

<ListBoxItem Content="3"/>

<ListBoxItem Content="4"/>

<ListBoxItem Content="5"/>

</ListBox>