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

  • As mobile devices have pushed their way into the enterprise, they have brought cloud apps along with them. This app explosion means account passwords are multiplying, which exposes corporate data and leads to help desk calls from frustrated users. This paper will discover how IT can improve user productivity, gain visibility and control over SaaS and mobile apps, and stop password sprawl. Download this white paper to learn: How you can leverage your existing AD to manage app access. Key capabilities to …

  • The first phase of API management was about realizing the business value of APIs. This next wave of API management enables the hyper-connected enterprise to drive and scale their businesses as API models become more complex and sophisticated. Today, real world product launches begin with an API program and strategy in mind. This API-first approach to development will only continue to increase, driven by an increasingly interconnected web of devices, organizations, and people. To support this rapid growth, …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds