Объект поведения ControlStoryboardAction

Expression Blend --- Основы работы --- Объект поведения ControlStoryboardAction

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

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

Для демонстрации назначения и функциональных возможностей упомянутого выше объекта поведения еще раз откройте в среде Expression Blend IDE проект SimpleBlendAnimations, рассматривавшийся в качестве первого примера создания анимаций, сохраните его полную копию по команде меню File --> Save Copy of Project и присвойте новой копии имя SimpleBlendAnimations_Behavior. Убедитесь в том, что новая копия данного проекта открыта теперь в среде Expression Blend IDE.

А теперь откройте в редакторе XAML файл разметки MainPage.xaml и найдите в разметке определение кнопки Start Animation. В этом определении должно присутствовать значение обработчика событий Click, как показано ниже:

<Button x:Name="button" Content="Запустить" HorizontalAlignment="Left" Height="37"
		         Margin="97,51,0,0" VerticalAlignment="Top" Width="103" Click="Button_Click" 
				 RenderTransformOrigin="0.5,0.5">

Удалите значение обработчика событий Click полностью из определения упомянутой выше кнопки. Откройте файл исходного кода C# и удалите полностью логику обработчика событий Click, где содержится код программного запуска анимации по раскадровке. Иными словами, удалите из исходного кода все следы метода btnStartAnimation_Click(). Для проверки на отсутствие ошибок компиляции постройте и запустите рассматриваемый здесь проект на выполнение.

Перейдите к визуальному конструктору основной страницы, описываемой в разметке из файла MainPage.xaml, на монтажном столе, откройте панель Assets, выберите категорию Behaviors (Виды поведения) и найдите объект типа ControlStoryboardAction:

Перетащите этот объект поведения на объект типа Button, находящийся на монтажном столе. С другой стороны, можете перетащить объект поведения на соответствующий узел иерархического представления на панели Objects and Timeline.

Выберите вновь созданный узел на панели Objects and Timeline (в иерархическом представлении он должен появиться ниже узла Button), чтобы исследовать свойства, доступные в области Trigger на панели Properties, как показано на рисунке ниже:

Обратите внимание на то, что в свойстве SourceObject (Исходный объект) устанавливается имя объекта типа Button вследствие предыдущей операции перетаскивания. В этом свойстве указывается тот объект на монтажном столе, с которым должен взаимодействовать объект поведения. Обратите также внимание на то, что в свойстве EventName (Имя события) автоматически устанавливается событие типа Click, хотя из раскрывающегося списка можно выбрать любое другое событие.

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

В качестве примера на рисунке ниже показано, что если щелкнуть на кнопке, находящейся на главной странице приложения, начнется воспроизведение анимации круга по раскадровке, определяемой объектом EllipseAnimation.

Запустите свое приложение на выполнение. Теперь у вас имеется возможность начинать анимацию без всякой помощи специального кода C# или обработчиков событий! Если вы проанализируете разметку, автоматически сформированную в коде - обнаружите в ней приведенный ниже фрагмент:

<i:Interaction.Triggers>
				<i:EventTrigger EventName="Click">
					<ei:ControlStoryboardAction Storyboard="{StaticResource EllipseAnimation}"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>