As odd as it may seem to those new to WPF and Silverlight development, ?brushes? are a key aspect of these programming APIs. These seemingly uneventful objects serve as building blocks for interactive geometries, custom styles, custom control templates, resource items and whatnot.

If you require a simple solid colored brush (say, a ?red? brush to fill in the background of a widget), your job could not be any easier. Simply assign a string value to a brush-compatible property:

<Ellipse x:Name="myCircle" Fill="LightGreen"
         Stroke="DarkGreen"
         StrokeThickness="4"
         Height="50" Width="50"/>

Here, the Stroke and Fill properties have been assigned to string values that map to a built in set of known colors. Behind the scenes, these string objects are transformed into a corresponding SolidColorBrush object using a built-in type converter.

Now, if you require a more exotic brush (such as a LinearGradientBrush or RadialGradientBrush), typing in the required markup is much more taxing. Consider the following update to our Ellipse object, now making use of a RadialGradientBrush object, containing a set of gradient stops.

<Ellipse x:Name="myCircle"
 Stroke="DarkGreen"
 StrokeThickness="4"
 Height="50" Width="50">
    <Ellipse.Fill>
        <RadialGradientBrush GradientOrigin="0.65,0.61">
            <GradientStop Color="#FF83D688" Offset="0"/>
            <GradientStop Color="#FF74D47B" Offset="1"/>
            <GradientStop Color="#FF14721A" Offset="0.491"/>
        </RadialGradientBrush>
    </Ellipse.Fill>
</Ellipse>

As you might imagine, it would be a massive pain in the neck to type in GradientStop object data manually using Visual Studio (even with this relatively simple RadialGradientBrush):

Thankfully, Expression Blend has a wonderful brush editing experience. Using the Properties window, you are able to easily add, remove and configure GradientStop objects using a dedicated editor. Assume you have added an Ellipse object to the Blend designer surface. Once you have selected this item, you will find the following editor.

Notice the location of the mouse cursor in the previous screen shot. This row of buttons allows you to select which brush category you are interested in working with (no brush, solid colored brush, gradient brush, etc). Beyond the ?no brush? option, the remaining options allow you to use the color editor (located below the ?brush selection row? area) to select ARGB values.

When you select the ?Gradient brush? option, the brush editor changes just a tad. Most specifically, you have a new area below the color editor, which allows you to add, remove and configure GradientStop objects.

By default, you will be given two ?thumbs? that represent your first two gradient stop settings, which are set to the colors black and white. Below this editor, you will find a few small buttons on the lower left which allow you to toggle between radial or linear gradient brushes:

When you click on either of the gradient stop thumbs, you can change the underlying color (and the generated HEX value in the related markup). Likewise, if you slide these thumbs on the gradient editor, you are able to control the Offset property of the current GradientStop.

If you wish to add additional gradient stops, simply click within a blank area on the gradient stop strip. Removing a gradient stop you no longer require is a bit unintuitive (if you ask me?); you cannot ?right click? on a thumb to activate a ?delete? menu option. Rather, you simply drag a given thumb off the gradient strip editor. Once you have done so, it will vanish from view (and markup).

Once you have defined your gradient stops, you may then wish to change GradientOrigin property of the RadialGradientStop (or LinearGradientStop) object, which controls when the color blending will begin rendering. To do so, you will move off the brush editor itself, back to the designer surface. Ensuring the item using your brush is selected (the Ellipse in this example), press the G key (not Ctrl+G mind you, just G). This will add a gradient origin editor to the surface, which can be moved around to control the starting point:

Last but not least, Blend makes it very easy to store that ?perfect? brush as an application object resource. You?ll notice on the Brush editor of the Properties window, a button which reads ?+ Brush?. Once you click on this option, you are able to specify a new named resource, and the location you wish to store it (application level, resource file, etc).

That wraps up this (long overdue) blog entry. Hope you have gained a bit of insight regarding very useful (and often mysterious) Blend IDE.