Combines two geometries using the intersect combine mode

image_pdfimage_print


   
   

<Window  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.SampleViewer"
    Title="  Examples" >

   <Canvas> 
        <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
          <Path.Data>
            <CombinedGeometry GeometryCombineMode="Intersect">
              <CombinedGeometry.Geometry1>
                <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
              </CombinedGeometry.Geometry1>
              <CombinedGeometry.Geometry2>
                <EllipseGeometry RadiusX="50" RadiusY="50" Center="125,75" />
              </CombinedGeometry.Geometry2>
            </CombinedGeometry>
          </Path.Data>
        </Path>

   </Canvas> 


</Window>

   
    
    
     


Transform Path defined in Resource

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

   
    
    
     


Difference between CounterClockwise and Clockwise

image_pdfimage_print


   
   

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

   
    
    
     


Path gradient and Bezier

image_pdfimage_print


   
   

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