Many (but not all) of the wide range of properties that you can set on the standard WPF controls are also available for these shapes. I thought it would be an interesting exercise to include a shape in this first project as it is something that is currently not available in Visual Studio 2005.
(This may however become available as a Power Pack at some time in the future)

  Because they are not full-blown controls they are not available from the Toolbox. To create an Ellipse, select the XAML Pane and insert the cursor inside the opening and closing tags of the Grid. Type in the opening and closing tags for an Ellipse as shown in the screenshot below. Intellisense will help you as you type.

  To position this Ellipse in the bottom right corner of the Grid, set the value of the Grid.Column attached property to "1" and the Grid.Row value to "2". All that will happen at this point is that the cell will turn a light grey to indicate that there is a place marker for the element there, but WPF doesn't have enough detail to create a graphical representation of what that something is.

 As with many elements, (sometime less obvious than an Ellipse), you have to describe the fill color before WPF will be able to offer you a version in the Design Pane. The required property is therefore the Fill property and you set this to a Color. (In fact, under the covers you are setting it to a Brush of that Color, but for now you can just think of it as setting the color.) For this example project I have set it to Yellow.

 By default, the Stretch property of the Ellipse will be set "Fill". (Not to be confused with the Fill Property just mentioned.) This "Fill" is one of four settings that decree how an element will stretch within its bounding container. The choices are:

• None
  
• Fill
  
• Uniform
  
• UniformToFill

 If we look at the screenshot of the story so far, you'll see that the Ellipse is stretched so that it fills the grid cell. In my example this makes it an oval shape, because the grid is a rectangle, not a square.

  In keeping with what we have done with the other controls, we can also set the MaxWidth value of the Ellipse. There is no need to set the MaxHeight in this case because we have already constrained them to be the same value.

  I want to have this circle/ellipse placed centrally inside the grid cell. You would think then that I could use the HorizontalContentAlignment and VerticalContentAlignment properties, as we did with the Label earlier, setting these both to Center, Unfortunately those properties aren't available for this lightweight control, but as always there are easy workarounds. In this case I simply set the Margins so that they have equal values horizontally and vertically. You can see this in the next screenshot.

 Finally, I thought the ellipse might benefit from having a border. And even if it doesn't, it gives me a reason to explain how to create one some time in the future.

You may be looking for something like a Line property or BorderColor or something similar. However, in keeping with the approach used for the Fill, the outer line is created by means of a brush again and this brush is encapsulated in the "Stroke" property of the Ellipse. So, you set the Stroke to a color of your choice and this is converted to a brush which is used to draw the line around the ellipse.

If you only set the Stroke value (i.e. the color) then this line will have a thickness value of "1". This may be fine for what you need. If not, you need to set another property - the "StrokeThickness" property which takes a value of type Double. I have to confess that I was a bit sceptical whether setting this value to anything other than integer values would have any visible effect on the line; my scepticism was unfounded - the difference between a setting of 2.1 and 2.9 for example was quite clear when I tried it out.

  Those are the only properties I want to deal with at this stage. Hopefully they are enough to help you see how easy it is to create shapes and that you can change colors, proportions, sizes, relative positions, etc, with minimum effort in WPF.

 The following screenshot shows the property settings covered in this section:-

 In the next part of this article we will take a look at how to turn the solid color ellipse into a gradient filled one, and how relatively easy it is to create a 3D effect in the process...