Dashed Lines and Transforming Shapes in WPF

In this article, we will discuss how to create dashed lines in Path Geometrics in WPF and how we create Transforming shapes In WPF.

Dashed line

Now we create a dashed line in WPF. For this follow these steps:

Step1: First we create a Path tag:

<Path Stroke="Red" StrokeThickness="2"> </Path>

Here we set its color Red and set its thickness to "2".

Step 2: After that we create a <PathGeometry> and <PathFigure> tag in it.

 <Path Stroke="Red" StrokeThickness="2">

            <Path.Data>
                <PathGeometry>
                    <PathFigure StartPoint="0,90" >
                        <LineSegment Point="10,90" />

                    </PathFigure>

                    <PathFigure StartPoint="15,90" >
                        <LineSegment Point="30,90" />
                    </PathFigure>

                    <PathFigure StartPoint="35,90" >
                        <LineSegment Point="50,90" />
                    </PathFigure>
                    <PathFigure StartPoint="55,90" >
                        <LineSegment Point="70,90" />
                    </PathFigure>
                    <PathFigure StartPoint="45,90" >
                        <LineSegment Point="50,90" />
                    </PathFigure>

                </PathGeometry>
            </Path.Data>
        </Path>

Here we use LineSegment to create the line. And set the StartPoint of the <PathFigure> tag.

The Output will be:

WPF1.jpg

Transforming Shapes in WPF

Now we take an example of Transforming Shapes In WPF. For this follow these steps:

Step 1: First we create a PolyLine tag like this and set the RotateTransform tag in it and set its value in it:

<Polyline Points="5,25 0,50 25,75 50,50 25,25 25,0"
  Stroke="Red" StrokeThickness="10"
  Canvas.Left="105" Canvas.Top="50" Margin="6,125,0,40" HorizontalAlignment="Left" Width="113">
            <Polyline.RenderTransform>
                <RotateTransform CenterX="50" CenterY="50" Angle="45" />
            </Polyline.RenderTransform>
        </Polyline>


Output:

WPF2.jpg

Step 2: Now we change the angle:

<Polyline
  Points="5,25 0,50 25,75 50,50 25,25 25,0"
  Stroke="Red" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5" Height="86" VerticalAlignment="Bottom" Margin="63,0,66,36">
            <Polyline.RenderTransform>
                <RotateTransform Angle="90" />
            </Polyline.RenderTransform>
        </Polyline>

Output:

WPF3.jpg

Again we change the angle:

<Polyline
  Points="5,25 0,50 25,75 50,50 25,25 25,0"
  Stroke="Red" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5" Margin="109,87,20,89">
            <Polyline.RenderTransform>
                <RotateTransform Angle="180" />
            </Polyline.RenderTransform>
        </Polyline>


WPF4.jpg

<Polyline
  Points="5,25 0,50 25,75 50,50 25,25 25,0"
  Stroke="Red" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5" Margin="13,132,116,44">
            <Polyline.RenderTransform>
                <RotateTransform Angle="280" />
            </Polyline.RenderTransform>
        </Polyline>

Output:

WPF5.jpg

<Polyline
  Points="5,25 0,50 25,75 50,50 25,25 25,0"
  Stroke="Red" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5" Margin="0,0,-45,-22" Height="110" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="161">
            <Polyline.RenderTransform>
                <RotateTransform Angle="360" />
            </Polyline.RenderTransform>
        </Polyline>

Output:

WPF6.jpg

Output of the Whole Program

WPF7.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all