Shapes in Windows Presentation Foundation (WPF)

Introduction

The .NET Framework architecture got a drastic change with the invention of Windows Presentation Foundation (WPF).

Before we delve into WPF shapes, we need to define an important aspect of WPF elements--the UIElement. The UIElement is the core base class for building presentations on WPF. UIElements define the key rendering behavior of presentation elements. They also support a rich-set of events.

A shape in WPF is only a type of UIElement. It enables you to draw different UIElements to be arranged on a screen to obtain a shape object. Note that since these are event driven, you can make these shapes rich and user-interactive.

WPF provides us a rich set of such shape classes such as, Path, Polygon, Rectangle, Ellipse and many more. It also provides 3D shapes.

The key properties of a shape Object are:

  1. Stroke - Stroke represents the Color of the UIElement that comprises the respective shape object
  2. Stroke Thickness - Stroke Thickness - represents the thickness of the Stroke UIElement
  3. Transformation - Specifies the measure for the transformation. Read on MSDN for a view on this

Now to begin drawing shapes, let us begin with the Line object. The Line class derives from the shape class. The Line is a connector between a series of points. The Line object is controlled through the X & Y attributes. The sample XAML code below shows you how:

<Grid>
	<Line X1="12"  Y1="12" X2="89" Y2="89" Stroke="#D87A79" 			    		StrokeThickness="3" />
</Grid>

This is how the Line object is rendered.


Figure 1

The Rectangle class also derives from the shape class. The Rectangle class gives you a rectangular object of specified width and height. Look below at the sample code:

<Grid Height="110" Width="158">
       <Line X1="29"  Y1="7" X2="129" Y2="101" Stroke="#D87A79" 						StrokeThickness="3" />
       <Rectangle Width="100" Height="100" Stroke="Red" StrokeThickness="3"/>
</Grid>

This is how the Rectangle object is rendered.


Figure 2

We can also mark the shape objects with some more attributes and make it colorful. The first attribute that helps us in this regard is the Fill property of the Rectangle class. The fill property type is color and applies the color to the entire rectangle object. The radius attributes are the other ones which help us to change the corners of the rectangle object.

The below sample code shows you how to apply the fill, radius attributes.

<Grid Height="110" Width="158">
      <Rectangle Fill="Blue"  Width="100" Height="100" Stroke="Red" 			StrokeThickness="3" RadiusX="10" RadiusY="10" />
</Grid>


Figure 3

Other interesting built- shape objects in WPF include the Ellipse and the Path.



Shapes in Windows Presentation Foundation (WPF)

The Ellipse object is also similar to the rectangle object and is built using the width, height attributes and can be made colorful using the stroke, stroke thickness and the fill attributes.

<Grid Height="110" Width="158">
        <Line X1="29"  Y1="7" X2="129" Y2="101" Stroke="#D87A79" 					StrokeThickness="3" />
        <Rectangle Fill="Blue"  Width="100" Height="100" Stroke="Green" 			StrokeThickness="3" />
        <Ellipse   Width="100" Height="50" Stroke="Red" StrokeThickness="3"  			Fill="Yellow"/>
</Grid>

We get the Ellipse shape like below:

[render4.jpg]
Figure 4

The path object draws a defined path as the name suggests. Path is often termed to be a collection of points, curve shapes, lines and more. It is a collection of points and is non-linear as would be expected.

This link from MSDN on the geometry object throws more light onto the subject. As that link says, we can draw path objects using the StreamGeometry or the PathFigureCollection. The XAML for both the cases look something like the code below:

<Path Stroke="Black" Fill="Gray" Data="M 0,2 C 10,300 300,-200 				300,100" Margin="29,5,77,5" />

Stream Geometry

<Path Stroke="Black" Fill="Red" Data="M 0,2 C 10,300 300,-200 					300,100" Margin="29,5,77,5" />
<Path Stroke="Black" Fill="Green" Margin="79,5,29,0">
   <Path.Data>
       <PathGeometry Figures="M 0,2 C 10,300 300,-200 300,100" />
   </Path.Data>
</Path>

PathFigureCollection

Enclosing these path objects with the rectangle from the previous code samples, gives us what appears below:

[render5.jpg]
Figure 5

The complete PATH Markup syntax can be found in this MSDN article. The following table lists the most commonly used Path attributes.

[render6.jpg]
PATH Table

Merging/Combining of two shapes is also possible with an easier approach. The WPF framework provides the CombinedGeometry class to do this. The CombinedGeometry class combines the two shapes with the mode specified and generates a single object.

<Path Stroke="Gray" Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <PathGeometry>
                            <PathGeometry.Figures >
                                <PathFigure StartPoint="0,0" IsClosed="True">
                                    <ArcSegment Point="50, 50" />
                                    <ArcSegment Point="50, 100" />
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2 >
                        <PathGeometry >
                            <PathGeometry.Figures>
                                <PathFigure StartPoint="0,0" IsClosed="True">
                                    <ArcSegment Point="125, 50" />
                                    <ArcSegment Point="125, 100" />
                                </PathFigure>
                            </PathGeometry.Figures>
                        </PathGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
</Path>

See figure 5 below below to see CombinedGeometry in action:

[render7.jpg]
Figure 6

In the future articles, I would continue this topic with other broader possiblities in shapes.

Resources

Windows Presentation Foundation
UIElement
CombinedGeometry
Shapes overview in WPF
Wikipedia on Windows Presentation Foundation

Related Articles





About the Author

Srinath M S

I would love to leave a footprint in this flat world

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Where the business performance of their mobile app portfolios are concerned, most companies are flying blind. While traditional application portfolios are held to all kinds of ROI measure, the investment plan for mobile apps -- increasingly the more crucial bet -- is made by guesswork and dart-throwing. This interactive e-book investigates how mobile is driving the need for app and portfolio measures unlike any we saw in the days of web. Good mobile analytics must deliver leading indicators of user experience …

  • Protecting business operations means shifting the priorities around availability from disaster recovery to business continuity. Enterprises are shifting their focus from recovery from a disaster to preventing the disaster in the first place. With this change in mindset, disaster recovery is no longer the first line of defense; the organizations with a smarter business continuity practice are less impacted when disasters strike. This SmartSelect will provide insight to help guide your enterprise toward better …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds