Expression Blend Using Brushes and Brush Resources

Editing properties is something you will do extensively in Expression Blend. In this article, based on Chapter 3 of Expression Blend in Action, author Joel Cochran guides you through a specific section of the Properties panel, the Brushes section.

This article is taken from the book Expression Blend in Action., by Joel Cochran. It is being reproduced here by permission from Manning Publications. Manning Early Access Program (MEAP) books and ebooks are sold exclusively through Manning. Visit the book's page for more information. Softbound print: Fall 2011 | 425 pages ISBN: 9781617290299
You can get an instant 40% discount on this MEAP edition by simply clicking on the link above, and use promo code egghead40

The Brush Manager is one of Blend's finest features. It's also one of the most noticeable because of its prominent location and vibrant color palette. The Brush Manager is very powerful and has many options packed into a relatively small space. This is one place in my opinion where Blend far outshines Adobe's products.

Before we get into the details, I want to provide my fellow developers a little assurance: this topic is not overly artistic even though I just mentioned Adobe. You will find that you use Brushes on a very high percentage of elements. Working with colors and brushes is a fundamental skill, and Blend makes it very easy.

The Brush properties you can edit will vary based on the type of element, but some typical brushes include Background, Foreground, Fill, Stroke, and OpacityMask. While the selection of Brushes changes, the method for working with them is the same, which is what we will focus on in this article.

Below the brush list is a horizontal list of tabs: you can set any brush to No Brush by clicking the first tab. We'll cover the rest of these in this article: the solid color brush, the gradient brush, and brush resources. The exception is the Tile Brush tab. Add a Rectangle anywhere on your Artboard and select it so you can follow along in Blend.

Solid Color Brush

The Solid Color Brush is a brush that represents a single color. This is probably the brush you'll use the most often, especially for things like Text Foreground Brush, BorderBrush, and so on. Solid Color Brush is the basic go-to
Brush.

It's important to note that we have so far mentioned brushes and not colors. When you want to set the Background property of an element you do not set it to a Color, you set it to a Brush. A Color (or Colors in the case of a gradient) is an integral part of a Brush, so you will use Colors constantly to define Brushes.

In this article, we're going to discuss how to capture and define colors. We'll look at the Color Palette, the Eyedropper, RGBA values, Hex values, and Color Resources. I'll be doing this in the context of a Solid Color Brush but everything in this section will also apply to Gradient Brushes. Figure 1 shows the Brush Manager for a Solid Color Brush with the various sections annotated.

Figure 1 The Brush Manager with sections annotated: A - The Color palette, B - The Color Eyedropper, C - RGBA Values, D - Hex Values, and E - Convert to Color Resource button

 

Color palette

The Color palette, annotated by the letter A in the diagram, is a very intuitive interface for selecting a specific color. To change the selected color, you simply drag the circle around inside the color palette. As you drag the circle around, the Brush will be changed in real time, meaning you can see the results of your selection on the Artboard as you edit. This saves you an enormous amount of time and encourages experimentation.

In terms of the Hue-Saturation-Value (HSV) model, Hue (the base color), is shown in a vertical bar to the right of the palette. To change from reds to yellows, greens, blues, and so on, drag the indicator up and down the spectrum. Doing so will change the range of color shown in the palette. Saturation (the intensity of a color) is on the horizontal axis of the palette and the Value (the amount of light in a color) is on the vertical axis.

Don't worry if this is a little more on the designer side of things than you are comfortable with. Honestly, I don't pay any attention to those details: I just drag the mouse to where the color looks like what I want. I am confident that, with a little experimentation, this will quickly make sense to you.

Color eyedropper

The Color Eyedropper, annotated with the letter B in the diagram, is not to be confused with the Eyedropper tool on the Toolbar. With the Color Eyedropper, you can select any color you can see anywhere on the screen. If you wish to capture the blue in the Microsoftâ„¢ Word logo, you can do so: again, if you can see the color on the screen, you can capture it with the Color Eyedropper.

Click on the eyedropper to activate it. The cursor will change to an eyedropper icon. Now move your mouse anywhere on your screen, even outside of Blend, and every color you pass over will be shown in the Color Palette. To capture the color you just need to click and it will become the selected color.

RGBA values

Once a color is selected, its Red-Green-Blue-Alpha (RGBA) channel values will be shown to the right of the Color Palette as indicated by the letter C in the diagram. RGBA is an industry standard so you may also receive these numbers from a different source. You may enter the values directly in any of these boxes to change the selected color. The mouse-drag editing feature discussed previously is also supported in all of these fields. The Alpha channel is the amount of transparency for this color.

Hex value

The Hex Value of a color is the hexadecimal representation of RGBA. If you've ever worked with colors on the web then you are probably already familiar with using Hex Values to represent colors. The Hex Value box, annotated by the letter D in the diagram, will allow you to either retrieve or enter the Hex Value for the selected color. If you are inserting traditional Hex  Values with no Alpha channel a value of FF for 100% opacity will be inserted automatically.

Convert to color resource

A Resource is a defined item that can be reused later. I want to show you how to save a Color definition for future use. Once you get the selected color you wish to reuse, push the Convert to color resource button inside the Hex Value box annotated by the letter E in the diagram. This will open the Create Color Resource dialog box, as shown in figure 2.

Figure 2 The Create Color Resource dialog box.

Check out the section in the middle of the dialog box labeled Define in. This indicates at what scope the resource will be available. What it really comes down to is in what XAML file the resource definition is going to be stored. The default is This document, meaning that only other elements in this XAML file will be able to find and use this resource. Application means it will be written to the App.xaml file and that every XAML file in this project will be able to find and use the resource. The last option, Resource Dictionary, will store the resource definition in an independent XAML file that can be used in many applications.

For now, you can use the default value of This document. Give the resource a name, such as MyRedColor, and press OK. Now that you've saved your color as a resource, it is available in the Color resources tab, which you can find next to the Editor tab above the Color Palette. Figure 3 shows the Color resources, including the new MyRedColor resource you've just created.

Figure 3 The Color Resources tab. Local color resources like the one we created called MyRedColor appear at the top. In WPF, the traditional System color resources are listed at the bottom.

Creating color resources makes it very easy to keep colors consistent throughout a view, an application, or even a suite of applications.

Gradient brush

The next tab in the Brush Manager is the Gradient brush tab. Selecting it will change the display slightly to something like figure 4.

Figure 4 the Gradient brush manager shares the color management features with the Solid color brush manager.

 

You'll see immediately that the core of the tool is the same as the Solid color brush manager. A section at the bottom has been added to work specifically with gradients. This section is highlighted in figure 5.

Figure 5 The Gradient stop panel with several parts annotated: A - Linear Gradient button, B - Radial Gradient button, C - Reverse Stops button, and D - the Selected Stop.

Gradients are collections of colors, called Stops. A gradient brush fills in all the space between the stops by mathematically calculating all of the transitional colors in order to smoothly progress from one stop to another. While there is a lot of heavy lifting going on in the background, all you need to concern yourself with is defining and working with these stops.

Linear Gradients apply stops and transitions in a straight line. Radial Gradients apply them in a series of concentric circles, spreading outward from the point of origin like ripples in a pool of water. You can change any gradient you are working on to either Linear or Radial by using the Linear gradient or Radial gradient buttons, annotated on the diagram A and B, respectively. You can reverse or flip a gradient quickly by pressing the Reverse gradient stops button annotated with the letter C on the diagram.

Working with gradients ultimately means working with stops. The default gradient has two stops, a black stop on one end and a white stop on the other. You can have as many stops as you want on a gradient. The selected stop, letter D on the diagram, is currently reflected in the Color manager.

To add a new stop, you can click anywhere on the stop panel. The default color for the stop will be whatever calculated color was at that position. To edit a stop you select the stop by clicking on it (which will turn its border black) and change the color in the Color editor using any of the methods previously described. You can move a stop's position by dragging it along the stop panel. You can even move the end stops inward, which will make the gradient from the end to the first stop a solid color. Finally, to delete a stop, grab it and drag it away from the stop panel and drop it.

You can also edit gradients by using the Gradient brush tool on the Toolbar. I frequently do this when working with gradients after I've added all of the stops I want. Figure 6 shows the Gradient brush tool on a rectangle with a 2 stop Radial Gradient brush.

Figure 6 The Gradient brush tool working with a simple 2 stop radial gradient as the Fill brush of a Rectangle.

The circles along the arrow represent the gradient stops. Using this tool you can quickly edit the gradient by moving the stops, moving the arrows, and changing the size of the radius using the blue selection handles. You can even add and delete stops along the arrow. As always I encourage you to experiment: not only can you create some amazing results very quickly, if you're like me you'll find it fun too!

Brush resources

The last tab in the Brush Manager is Brush Resources to the far right. This option is only enabled if Brush Resources are available. In WPF, this will be all the time because WPF has access to the System Brush Resources, but in Silverlight the option will only become available once you have created or referenced Brush resources. Let's walk through how to create a Brush Resource.

First, create a brush you wish to reuse. In figure 7, you can see I've created a gradient with several stops. To save it as a resource, I'm going to click on the Advanced options button next to the Brush I want to save. This will pop up the Advanced options window: from there, I will take the Convert to New Resource… option as seen in figure 7.

Figure 7 The Advanced Options pop-up selected from a Brush. Select the Convert to New Resource option to create a new Brush
resource.

This will open the Create Brush Resource dialog as seen in figure 8.

Figure 8 The Create Brush Resource dialog allows you to name and save a Brush as a resource for future us.

 

Supply a name and select the desired scope and press OK. Now your Brush resource has been created and you can see it in the Brush Resources section of the Brush Manager as shown in figure 9.

Figure 9 The Brush resource we created is now available in Brush Resources.

You can now select the Brush Resource from here to populate any Brush property on any element.

Summary

Learning the ins and outs of the Properties panel is a core skill. Editing element properties is significantly faster using the Properties panel than in XAML thanks to the helpers Blend provides.

By Peter Bromberg   Popularity  (2102 Views)