Shapes | Professional C# 2005 with .NET 3.0

Shapes are the core elements of WPF. With shapes you can draw 2D graphics using rectangles, lines, ellipses, paths, polygons, and polylines that are represented by classes derived from the abstract base class Shape. Shapes are defined in the namespace System.Windows.Shapes.

The following XAML example draws a yellow face with legs, consisting from an ellipse for the face, two ellipses for the eyes, a path for the mouth, and four lines for the legs:

  <Window x:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="WPF Samples" Height="260" Width="230">   <Canvas>     <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100"         Stroke="Blue" StrokeThickness="4" Fill="Yellow" />     <Ellipse Canvas.Left="60" Canvas.Top="65" Width="25" Height="25"         Stroke="Blue" StrokeThickness="3" Fill="White" />     <Ellipse Canvas.Left="70" Canvas.Top="75" Width="5" Height="5" Fill="Black" />     <Path Stroke="Blue" StrokeThickness="4" Data="M 62,125 Q 95,122 102,108" />     <Line X1="124" X2="132" Y1="144" Y2="166" Stroke="Blue" StrokeThickness="4" />     <Line X1="114" X2="133" Y1="169" Y2="166" Stroke="Blue" StrokeThickness="4" />     <Line X1="92" X2="82" Y1="146" Y2="168" Stroke="Blue" StrokeThickness="4" />     <Line X1="68" X2="83" Y1="160" Y2="168" Stroke="Blue" StrokeThickness="4" />   </Canvas> </Window>

Figure 31-5 shows the result from the XAML code.

image from book
Figure 31-5

Because everything is now vector-based, you can resize everything. Here a resize transformation by two is done, and in Figure 31-6 you can see the graphics two times bigger.

  <Canvas.LayoutTransform>   <ScaleTransform ScaleX="2" ScaleY="2" /> </Canvas.LayoutTransform>

image from book
Figure 31-6

All these WPF elements can be accessed programmatically, no matter if they are buttons or shapes such as lines or rectangles. Setting the Name property with the Path element to mouth allows you to access this element programmatically with the variable name mouth:

  <Path Name="mouth" Stroke="Blue" StrokeThickness="4"     Data="M 62,125 Q 95,122 102,108" />

In the code-behind Data property of the Path element, mouth is set to a new geometry. For setting the path, the Path class supports PathGeometry with path markup syntax. The letter M defines the starting point for the path; the letter Q specifies a control point and an endpoint for a quadratic Bezier curve. Running the application, you can see a window, as shown in Figure 31-7.

  public Window1() {    InitializeComponent();    mouth.Data = Geometry.Parse("M 62,125 Q 95,122 102,128"); }

image from book
Figure 31-7

Earlier in this chapter, you learned that a button can have any content. Making a small change to the XAML code and adding the Button element as content to the window causes the graphic to be displayed inside a button (see Figure 31-8).

 <Window x:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Title="ShapesDemo" Height="260" Width="230">   <Button>     <Canvas Height="260" Width="230">       <Ellipse Canvas.Left="50" Canvas.Top="50" Width="100" Height="100"           Stroke="Blue" StrokeThickness="4" Fill="Yellow" />       <Ellipse Canvas.Left="60" Canvas.Top="65" Width="25" Height="25"           Stroke="Blue" StrokeThickness="3" Fill="White" />       <Ellipse Canvas.Left="70" Canvas.Top="75" Width="5" Height="5" Fill="Black" />       <Path Name="mouth" Stroke="Blue" StrokeThickness="4"           Data="M 62,125 Q 95,122 102,108" />       <Line X1="124" X2="132" Y1="144" Y2="166" Stroke="Blue" StrokeThickness="4" />       <Line X1="114" X2="133" Y1="169" Y2="166" Stroke="Blue" StrokeThickness="4" />       <Line X1="92" X2="82" Y1="146" Y2="168" Stroke="Blue" StrokeThickness="4" />       <Line X1="68" X2="83" Y1="160" Y2="168" Stroke="Blue" StrokeThickness="4" />     </Canvas>   </Button> </Window>

image from book
Figure 31-8

Following are the shapes available in the namespace System.Windows.Shapes.

Open table as spreadsheet

Shape Class	Description
Line	You can draw a line from the coordinates X1.Y1 to X2.Y2.
Rectangle	With the Rectangle class, you can draw a rectangle by specifying Width and Height.
Ellipse	With the Ellipse class, you can draw an ellipse.
Path	You can use the Path class to draw a series of lines and curves. The Data property is of type Geometry. You can do the drawing by using classes that derive from the base class Geometry, or you can use the path markup syntax to define geometry.
Polygon	You can draw a closed shape containing from connected lines with the Polygon class. The polygon is defined by a series of Point objects assigned to the Points property.
Polyline	Similarly to the Polygon class, you can draw connected lines with the Polyline. The difference to a polygon is that the polyline does not need to be a closed shape.