Path Angle Animated Button

image_pdfimage_print
   
   

<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>