Given that all the .NET Framework classes are available to us, via XAML or in code behind, I personally don't see a lot of point in working out how to use XAML for event code in many cases. But when it comes to Window/Form layout or complex graphics representations then I think the WPF learning curve may be worth the struggle.

  Although I haven't used a great deal of XML in the past, I can already agree with the contention that XAML is reasonably human readable. Easier than VB in many cases; easier than C# too. So in a situation where you are nesting a series of instructions to create a gradient, for example, I think that XAML certainly does make the task easier to achieve and the code is easier to understand.

So, with this in mind I thought as a next step we would alter that relatively plain, solid colored ellipse with a gradient. This is something that is very easy to create and refine in WPF. Although at this stage we will simply add a radial gradient fill to the ellipse, as we will see in later articles it is fairly easy in WPF to create controls, such as buttons, that completely take the shape and color characteristics of such an ellipse.

The Layout So Far

 As you can see from the screenshot, I have added another column and another row to the grid. In the central row of the new column I have redrawn the Ellipse shape. Of course I didn't actually redraw it - I simply changed the Grid.Column and Grid.Row attached property values to move the original one: -

  Even though it wasn't created from the Toolbox, you can still drag and drop it around the grid in the way you can with standard controls.

  However, I have found that the effects of dragging and dropping in general when using the WPF Design Pane can take quite a lot of getting used to. I am still finding that I don't always get the result I expect.  Sometimes, for example, you think you have dragged a standard control into a container, but when you check out the XAML you see that it has been placed outside the closing tag of the container you thought you were dragging it into. I am already beginning to rethink my comment that you will use the Toolbox more than XAML for creating instances of controls. If you type in the name of the control type inside the tags for the container you want to use, you are certain of getting the result you want. You can then type in the property attributes or nested elements you want, or of course make changes to default property settings via the Properties Window. (And then, of course, there is always the option of using Expression Blend for the complicated stuff, a subject that we probably won't go into here).

Radial Gradient

  "Radial Gradient" is possibly a misleading header for this section. Not totally inaccurate, but less helpful than it could be. The reason is that, as mentioned earlier, all Fill properties are actioned not with a color or a gradient color, but with a brush. In this case it will be a GradientBrush. Specifically a type RadialGradientBrush.

  Because the Fill is more complex, it is no longer possible to use the Fill="Some Color Name" syntax. We will break the requirements down - and this is where the XAML layout helps make things clearer because you can see each sub-section displayed line by line.

 First we will create the basic ellipse, set the column and row, give it a size, Margins, Stroke(outer edge), StrokeThickness and Stretch property values.

 If you add this code to your grid, The bright orange ellipse seen above will be replaced by a very faint outer line and no fill. We will work on the gradient fill next.

  Although I chose to display the properties on a number of different lines, they could of course all have been lumped into one line. As mentioned earlier, the separate line approach does make the XAML easier to read (I think).

However, when we move on to the next stage where we are dealing with complex properties, it does become necessary to enter each property attribute on a separate line. It can become quite complicated, but we will take it a step at a time.

 So far we have an ellipse of fixed size, with a LightBlue border, placed inside Column 2, Row 1 of the Grid. In order to declare the Fill we desire, we need to create the details of the Ellipse's Fill property:

 As mentioned earlier, you need to use a GradientBrush to create a gradient effect.

 A GradientBrush (obviously) contains two or more colors. In order to have the color changes take place at the desired places the GradientBrush uses GradientBrush Stops properties. This is a value that declares the color to be used and at what point between start and finish that color begins. (It seems a bit perverse to call them Stops, it seems, when they are more accurately "Starts"!).

 So this is next section of XAML code to be added:

  (NB. Because the GradientStops collection is the default property of the RadialGradientBrush it isn't strictly necessary to include the start and end tags as shown above. However I thought it might help clarify each step of the process if I did so.)

 In general terms, the overall start point of a complete gradient is given the value of 0 and the overall end point is given a value of 1. Individual colors in the gradient are assigned an Offset value (usually although not necessarily between those values of 0 and 1). The start point of each individual color is ruled by this Offset value. So to take a simple example with a two color gradient, Offset values of 0 and 1 would cause the colors to be evenly spread across the area of the gradient.

 The following code snippet will create the gradient filled ellipse shown above:

 There is a mind-boggling range of choices you can make to tweak this radial gradient. For instance you can create sophisticated lighting effects by changing properties such as the RadiusX, RadiusY, Center and GradientOrigin properties. The following amended version of the above code skews the values to create the effect of light being shone on the ellipse from the top right.

 The result of those few minor edits transforms the ellipse so that it looks like this:

  If you try changing the values of the properties covered so far, you will be able to create many other effects. Don't forget also that you are not limited to just two colors.

 You may also recall from previous parts that if you want to wire up this ellipse to the code-behind file, you need to assign it a name. You could then, for example, write code to react to a mouse click on the ellipse. (Tip: Use the MouseDown event for this). However I have not covered this in this article because there are much better ways of using shaped designs like this one as templates for built in controls such as the button. We will cover this later.

 Before we get too deeply involved in all this eye candy, in the next section we will come back to more basic requirements - specifically, how to access multiple windows in a project and along the way we will look a bit deeper into the XAML code that is automatically generated for us at the top of those WPF Window files.