 |
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.