<UserControl x:Class="Wex.Lib.Demo.Views.Demos.StoryBoardAction" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:wex="clr-namespace:Wex.Lib.Interactions;assembly=Wex.Lib" d:DesignHeight="300" d:DesignWidth="400"> <Canvas> <i:Interaction.Triggers> <wex:EventTrigger ElementName="btnBegin" EventName="Click"> <wex:StoryBoardAction StoryBoardKey="storyBoard1" Action="Begin"/> </wex:EventTrigger> <wex:EventTrigger ElementName="btnStop" EventName="Click"> <wex:StoryBoardAction StoryBoardKey="storyBoard1" Action="Stop"/> </wex:EventTrigger> <wex:EventTrigger ElementName="btnPause" EventName="Click"> <wex:StoryBoardAction StoryBoardKey="storyBoard1" Action="Pause"/> </wex:EventTrigger> <wex:EventTrigger ElementName="btnResume" EventName="Click"> <wex:StoryBoardAction StoryBoardKey="storyBoard1" Action="Resume"/> </wex:EventTrigger> </i:Interaction.Triggers> <Canvas.Resources> <Storyboard Name="myStoryboard" x:Key="storyBoard1"> <!-- Animate the center point of the ellipse. --> <PointAnimation Storyboard.TargetProperty="Center" Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:5" From="20,200" To="400,100" RepeatBehavior="Forever" /> </Storyboard> </Canvas.Resources> <Path Fill="Blue"> <Path.Data> <!-- Describe an ellipse. --> <EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="20,20" RadiusX="15" RadiusY="15" /> </Path.Data> </Path> <StackPanel Orientation="Horizontal" Canvas.Left="10" Canvas.Top="265"> <!-- Button that begins animation. --> <Button Name="btnBegin" Width="65" Height="30" Margin="2" Content="Begin" /> <!-- Button that pauses animation. --> <Button Name="btnPause" Width="65" Height="30" Margin="2" Content="Pause" /> <!-- Button that resumes animation. --> <Button Name="btnResume" Width="65" Height="30" Margin="2" Content="Resume" /> <!-- Button that stops animation. Stopping the animation returns the ellipse to its original location. --> <Button Name="btnStop" Width="65" Height="30" Margin="2" Content="Stop" /> </StackPanel> </Canvas> </UserControl>
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)