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

  • Today's agile organizations pose operations teams with a tremendous challenge: to deploy new releases to production immediately after development and testing is completed. To ensure that applications are deployed successfully, an automatic and transparent process is required. We refer to this process as Zero Touch Deployment™. This white paper reviews two approaches to Zero Touch Deployment--a script-based solution and a release automation platform. The article discusses how each can solve the key …

  • On-demand Event Event Date: December 18, 2014 The Internet of Things (IoT) incorporates physical devices into business processes using predictive analytics. While it relies heavily on existing Internet technologies, it differs by including physical devices, specialized protocols, physical analytics, and a unique partner network. To capture the real business value of IoT, the industry must move beyond customized projects to general patterns and platforms. Check out this webcast and join industry experts as …

Most Popular Programming Stories

More for Developers

RSS Feeds