Path 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 1 2 C 288 0, 400 400, 576 192" />
    </Canvas.Resources>

    <Path Stroke="Black" Data="{StaticResource path}" />
    <Button Name="btn">Button</Button>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard TargetName="btn">
                    <DoubleAnimationUsingPath 
                        Storyboard.TargetProperty="(Canvas.Left)"
                        Duration="0:0:2.5" 
                        AutoReverse="True"
                        RepeatBehavior="Forever"
                        PathGeometry="{StaticResource path}"
                        Source="X" />

                    <DoubleAnimationUsingPath 
                        Storyboard.TargetProperty="(Canvas.Top)"
                        Duration="0:0:2.5" 
                        AutoReverse="True"
                        RepeatBehavior="Forever"
                        PathGeometry="{StaticResource path}"
                        Source="Y" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

   
    
    
     


Squaring The Circle


   
   

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        RenderTransform="2 0 0 -2 300 300">

    <Path StrokeThickness="3" Stroke="Blue" Fill="AliceBlue">
        <Path.Data>
            <PathGeometry>
                <PathFigure x:Name="bez1" IsClosed="True">
                    <BezierSegment x:Name="bez2" />
                </PathFigure>
                <PathGeometry.Transform>
                    <RotateTransform Angle="45" />
                </PathGeometry.Transform>
            </PathGeometry>
        </Path.Data>
    </Path>

    <Canvas.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever" AutoReverse="True" >
                    <PointAnimation Storyboard.TargetName="bez1"
                                    Storyboard.TargetProperty="StartPoint"
                                    From="0 100" To="0 125" />

                    <PointAnimation Storyboard.TargetName="bez2"
                                    Storyboard.TargetProperty="Point1"
                                    From="55 100" To="62.5 62.5" />

                    <PointAnimation Storyboard.TargetName="bez2"
                                    Storyboard.TargetProperty="Point2"
                                    From="100 55" To="62.5 62.5" />

                    <PointAnimation Storyboard.TargetName="bez2"
                                    Storyboard.TargetProperty="Point3"
                                    From="100 0" To="125 0" />


                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Canvas.Triggers>
</Canvas>

   
    
    
     


Single Bezier


   
   

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Path Fill="Red" Stroke="Blue" StrokeThickness="3">
        <Path.Data>
            <GeometryGroup>
                <PathGeometry>
                    <PathFigure x:Name="fig" 
                                StartPoint="50 150" IsFilled="False" >
                        <BezierSegment 
                            Point1="25 25" Point2="400 300" Point3="450 150" />
                    </PathFigure>
                </PathGeometry>
    
                <EllipseGeometry Center="{Binding ElementName=fig, 
                                                  Path=StartPoint}" 
                                 RadiusX="5" RadiusY="5" />

                <EllipseGeometry Center="{Binding ElementName=fig, 
                                                  Path=Segments&#91;0&#93;.Point1}" 
                                 RadiusX="5" RadiusY="5" />

                <EllipseGeometry Center="{Binding ElementName=fig, 
                                                  Path=Segments&#91;0&#93;.Point2}" 
                                 RadiusX="5" RadiusY="5" />

                <EllipseGeometry Center="{Binding ElementName=fig, 
                                                  Path=Segments&#91;0&#93;.Point3}" 
                                 RadiusX="5" RadiusY="5" />
            </GeometryGroup>
        </Path.Data>
    </Path>
</Canvas>

   
    
    
     


Overlapping Stars


   
   
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Path Fill="Aqua" Stroke="Maroon" StrokeThickness="3">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="144 72" IsClosed="True">
                    <PolyLineSegment Points="200 246, 53 138, 235 138, 88 246" />
                </PathFigure>
                <PathFigure StartPoint="168 96" IsClosed="True">
                    <PolyLineSegment Points="224 260, 77 162, 259 162, 112 270" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

   
    
    
     


Overlapping Rectangles


   
   

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Path Fill="Gold" Stroke="Red" StrokeThickness="3">
        <Path.Data>
            <RectangleGeometry Rect="96 96 192 192" />
        </Path.Data>
    </Path>

    <Path Fill="Blue" Stroke="Red" StrokeThickness="3">
        <Path.Data>
            <RectangleGeometry Rect="192 192 192 192" />
        </Path.Data>
    </Path>

    <Path Fill="Red" Stroke="Red" StrokeThickness="3">
        <Path.Data>
            <GeometryGroup>
                <RectangleGeometry Rect="480 96 192 192" />
                <RectangleGeometry Rect="576 192 192 192" />
            </GeometryGroup>
        </Path.Data>
    </Path>

</Canvas>

   
    
    
     


Multiple Line Segments


   
   

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Path Fill="Aqua" Stroke="Maroon" StrokeThickness="3">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="144 72">
                    <LineSegment Point="200 246" />
                    <LineSegment Point="53 138" />
                    <LineSegment Point="235 138" />
                    <LineSegment Point="88 246" />
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>