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>

   
    
    
     


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

image_pdfimage_print


   
   

<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

image_pdfimage_print


   
   

<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

image_pdfimage_print


   
   
<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

image_pdfimage_print


   
   

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