Path Angle Animated Button
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas.Resources>
<PathGeometry x:Key="path"
Figures="M 96 192 C 288 0, 400 400, 576 192
S 662 192 0 -100 S 400 576 96 192" />
</Canvas.Resources>
<Path Stroke="Black" Data="{StaticResource path}" />
<Button Name="btn">
Button
<Button.RenderTransform>
<RotateTransform x:Name="xform" />
</Button.RenderTransform>
</Button>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimationUsingPath
Storyboard.TargetName="btn"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:10"
PathGeometry="{StaticResource path}"
Source="X" />
<DoubleAnimationUsingPath
Storyboard.TargetName="btn"
Storyboard.TargetProperty="(Canvas.Top)"
Duration="0:0:10"
PathGeometry="{StaticResource path}"
Source="Y" />
<DoubleAnimationUsingPath
Storyboard.TargetName="xform"
Storyboard.TargetProperty="Angle"
Duration="0:0:10"
PathGeometry="{StaticResource path}"
Source="Angle" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
Related examples in the same category
