Content Index Search
 

Appearance overview

Changing the visual look of an object is a fundamental task in Microsoft® Expression Blend™. By using the properties under Appearance and Brushes in the Properties panel, you can change the stroke color, fill color, opacity, and visibility of a selected object. Depending on what type of object you select in your Expression Blend project, the properties of the Appearance and Brushes categories dynamically adjust to the object's content in order to reflect the appropriate visual attributes.

Common appearance properties

Much of changing an object's appearance has to do with applying brushes to specific properties. The following table describes these properties.

Property Description
Fill Sets the brush that is applied to the interior of a shape or path.
Stroke Sets the brush that is applied to the outline (border) of a shape or path.
Background Sets the brush that is applied to the background of an object. Controls like the button control are typically affected by this property.
Foreground Sets the brush that is applied to the foreground of an object. Controls like the text box control are typically affected by this property.
BorderBrush Sets the brush that is applied to the border on certain controls.
Opacity Sets the entire object's opacity.
Visibility Determines whether an object is visible or hidden at run time. Child objects can also be affected by the parent element's visibility.
OpacityMask Sets a brush whose color is ignored and whose opacity is transferred to the masked object. Wherever the opacity mask is opaque, the masked object will be opaque; wherever the opacity mask is transparent, the masked object will be transparent.

Brushes

Brushes are used to set the visual appearance of an object on the artboard. For example, you can use a solid blue brush for the fill of a rectangle (as in the first image below). Brushes come in several forms, from simple solid color or gradient brushes to more complex tile brushes. The following table describes the brushes that are available in Expression Blend. Additionally, you can also use the No brush tab to not paint the selected property, for example to intentionally apply no fill or stroke to an object.

Brush type Description
Solid color brush Composed of a single color.
Linear gradient brush Composed of a linear color gradation.
Radial gradient brush Composed of a radial color gradation.
Image brush Created from an image. From left to right as shown here: the initial image brush, the image brush tiled, and the image brush flipped.
Drawing brush Created from a vector drawing. From left to right as shown here: the initial drawing brush, the drawing brush tiled, and the drawing brush flipped.
Visual brush Created from a control such as a button. From left to right as shown here: the initial button, and the brush with a Tile mode set to Tile. Note that visual brushes can potentially degrade the performance of the running application, due to the complexity of the control that is used to create the visual brush.

Brush Resources

After you create a brush on an object, you can convert the brush to a resource that you can then apply to other objects. You can also create resource dictionaries for your brushes so that you can reuse them throughout your project, or even in other projects. For more information, see Create a brush or color resource. For information about resources, see Resources overview.

Color and color spaces

Expression Blend includes a color editor under Brushes in the Properties panel. The color editor also appears if you edit a brush resource in the Resources panel. The color editor has the following four color spaces, as well as a hex mode (#AARRGGBB):

To change between color spaces, click one of the underlined letters in the current color space to see a pop-up menu of the alternative color spaces.

Eyedropper and Paint Bucket tools

Expression Blend provides two tools that are specifically designed to copy and apply attributes to and from objects. The following properties are copied or applied during Eyedropper and Paint Bucket actions:

 
Eyedropper Copies the appearance of another object to the currently selected object or objects.
Paint Bucket Copies the appearance of the currently selected object or objects to another object.

Gradients

Gradients enable you to apply a graduated blend of colors to an object, to create a smooth color gradation and to give that object more depth. Perhaps you want to use that object as a background where the left side of the object contains a solid color that gradually fades to white on the right side of the object. This enables you to create two distinguishable areas from an otherwise flat object. You might then create a navigation on the left side of the object and add some paragraphs of text on the right side of the object.

Click Linear Gradient Brush and Radial Gradient Brush under Brushes in the Properties panel to switch between the two gradient brush types. 

You can use the two types of gradient brushes to create gradient fills, gradient strokes, text that has a gradient for its Foreground property, or gradient backgrounds for any element that has a Background property. When you apply a gradient to an appearance property, notice that small icons , known as stops, appear on the gradient slider. You can change the color of each gradient stop, and add as many stops as you want to the gradient slider simply by clicking on the gradient slider. Conversely, you can easily remove stops that you no longer need by simply dragging them off the bottom of the gradient slider (dragging off the sides or top of the slider will not remove the stops).

There are also some options that you can set when using a gradient brush (Options). These options work on both linear and radial gradients when you use Brush Transform on the Toolbox. For more information, see Brush transform tool below.

Here, you can select to set the gradient mode to Pad, Reflect (which mirrors the gradient fill), or Repeat (which repeats the gradient fill).

Brush transform tool

To transform the fill, stroke, opacity mask, or other brush that is applied to an object, select the brush property in the Properties panel, and then select the Brush Transform tool on the Toolbox. A brush transform arrow will appear on the artboard that you can modify with your mouse pointer. If you are using a gradient brush, the endpoints of the transform arrow correspond to the gradient stops at either end of the color bar. The following images demonstrate the appearance of a rectangle object after various transformations are applied to the gradient brush of the Fill property.

Transformations applied to the fill of a rectangle: linear gradient brush (top), and radial gradient brush (bottom)

You can optionally set the properties that appear when you click the Options button under Brushes in the Properties panel. In the preceding image, the Pad option is selected. If you selected the Reflect or Repeat option, and then made the transform arrow shorter than the object, you would see a corrugated effect.

You can transform brush types other than gradient brushes. For more information about brush transforms, see Transform a gradient or tile brush.

Clipping

Sometimes, when you transform a brush, parts of the object will be clipped (that is, parts will disappear outside of the bounding box). You can fix clipping problems in the following ways:

Strokes

Strokes are the borders on objects. You can change the applied brush (solid, gradient, or tile), opacity, width, and miter limit of the stroke on an object, as well as the corner join and end-cap styles. The stroke on an object is always applied on top of a fill, even if you have no fill applied to that object. To make any changes to the stroke of an object, you must have Stroke selected in the list under Brushes in the Properties panel.

Opacity and visibility

You can change the opacity of an object by using the Opacity property under Appearance in the Properties panel. When you decrease the opacity of an object, you increase its transparency, so you can see other objects that are behind it. Opacity is controlled by an alpha channel that stores all the transparency information for an object, gradient, or opacity mask.

Property Description
Opacity   Changes the transparency of an entire object, including all of the object's visual attributes. The image to the right shows the opacity value set at 60 percent.
Transparency   Sets the alpha value of an object's attribute, such as the fill or stroke, slightly transparent without having to change all attributes on a single object. The image to the right shows that only the fill for the ellipse is more transparent, because the alpha value for the fill is set to 50 percent. The stroke for the ellipse remains at 100 percent.
Visibility   Enables you to hide or show an object at different times. This is especially effective in animation when you don't want to remove an object completely from the artboard. In the image to the right, the left object that has a blue fill and a thick black stroke and that is part of the preceding two images in this table is now set as Hidden.

Bitmap effects

Bitmap effects are simple pixel processing operations.

Note In Windows Presentation Foundation (WPF) applications (like those created with Expression Blend), pixels refer to device independent pixels or device independent units which are equivalent to the size of a pixel on a monitor that is set to a screen resolution of 96 DPI. Each unit is approximately 1/96 inch, regardless of monitor size or screen resolution.

The following table describes each bitmap effect in Expression Blend. Each bitmap effect exposes properties that can control the filtering properties, such as the radius, of BlurBitmapEffect. Bitmap effects can be set as properties on live objects, such as a button or text box. The pixel processing is applied and rendered at run time. Because bitmap effects are rendered in software mode, any object that applies an effect will also be rendered in software mode. You should not apply bitmap effects to large visuals or animations, because this can degrade the performance of your application.

Effect Description
None

Button without a bitmap effect applied.
Blur

Button with blur effect

 Simulates looking at an object through an out-of-focus lens.
Outer glow

Button with outer glow effect

 Creates a halo of color around the perimeter of an object.
Drop shadow

Button with drop shadow effect

 Creates a shadow behind an object.
Bevel

Button with bevel effect

 Creates a bevel that raises the surface of an image according to a specified curve.
Emboss

Button with emboss effect

 Creates a bump mapping of a visual to give the impression of depth and texture from an artificial light source.