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>

   
    
    
     


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>

   
    
    
     


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>

   
    
    
     


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>

   
    
    
     


Path gradient and Bezier


   
   

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

    <Path Canvas.Left="150" Canvas.Top="150" StrokeThickness="25">
        <Path.Stroke>
            <LinearGradientBrush>
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.00" Color="Red" />
                    <GradientStop Offset="0.84" Color="Red" />
                    <GradientStop Offset="1.00" Color="Violet" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Path.Stroke>
        <Path.Data>
            <PathGeometry>
                <PathGeometry.Figures>
                    <PathFigure StartPoint="0 -100">
                        <PolyBezierSegment 
                            Points=" -55 -100, -100  -55, -100    0,
                                    -100   55,  -55  100,    0  100,
                                     100  -50,   55 -100,    0 -100" />
                    </PathFigure>
                </PathGeometry.Figures>
            </PathGeometry>
        </Path.Data>
    </Path>
</Canvas>

   
    
    
     


Difference between CounterClockwise and Clockwise


   
   

<Window x:Class="WpfApplication1.ShapesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShapesWindow" Height="160" Width="400">
    <Canvas>
        <Path Stroke="Black" StrokeThickness="3" Fill="Yellow" Canvas.Left="21" Canvas.Top="188" >
            <Path.Data>
                <PathGeometry>
                    <PathGeometry.Figures>
                        <PathFigure StartPoint="0,0">
                            <PathFigure.Segments>
                                <LineSegment Point="20 30"/>
                                <ArcSegment Size="30,30" IsLargeArc="False" SweepDirection="CounterClockwise" Point="50,40" />
                                <ArcSegment Size="10,10" IsLargeArc="False" SweepDirection="Clockwise" Point="10,0" />
                            </PathFigure.Segments>
                        </PathFigure>
                    </PathGeometry.Figures>
                </PathGeometry>
            </Path.Data>
        </Path>
 
    </Canvas>
</Window>

   
    
    
     


Transform Path defined in Resource

   
   
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Background="White">
    <Viewbox>
        <Canvas Width="200" Height="200" RenderTransform="1 0 0 -1 100 100" >
            <Canvas.Resources>
                <Style TargetType="{x:Type Path}" x:Key="petal">
                    <Setter Property="Stroke" Value="Black" />
                    <Setter Property="Fill" Value="Red" />
                    <Setter Property="Data" 
                            Value="M 10 10 C 2.5 112.5, 417.5 2.5, 60 0 C 47.5 -112.5, 12.5 -2.5, 0 0 Z" />
                </Style>
            </Canvas.Resources>
            <Path Stroke="Green" StrokeThickness="5" Data="M -10 -10 C -10 -50, -50 50, 0 0">
            </Path>
            <Path Style="{StaticResource petal}" />

            <Path Style="{StaticResource petal}" RenderTransform="1.7 -1.7 .7 .7 0 0" />

            <Path Fill="Yellow" Stroke="Black">
                <Path.Data>
                    <EllipseGeometry Center="0 0" RadiusX="15" RadiusY="15" />
                </Path.Data>
            </Path>
        </Canvas>
    </Viewbox>
</Page>