Setting colors, brushes, and masks

Changing the visual look of an object is a fundamental task in Blend for Visual Studio 2012. By using the properties under both 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 Blend project, the properties of the Appearance and Brushes categories dynamically adjust to the content of the object to reflect the appropriate visual attributes.

Common appearance properties

Much of changing the appearance of an object relates to 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. This property is typically applied to the background of controls that display text, such as the Button or TextBlock control.
Foreground	Sets the brush that is applied to the foreground of an object. This property is typically applied to the text that is displayed in controls, such as the Button or TextBlock control.
BorderBrush	Sets the brush that is applied to the border on certain controls.
Opacity	Sets the opacity of the whole object.
Visibility	Determines whether an object is visible or hidden at run time. Child objects can also be affected by the visibility of the parent object.
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 that follows). 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 Blend. Additionally, you can use No brush to remove all color from the selected property. For example, to create an outline of a rectangle, you could set the Fill of the rectangle to No brush, and set the Stroke to a Solid color brush.

Brush	Appearance			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 decrease the performance of the running application, because of 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.

Brush resources are not restricted to single brush or color properties. You can create a brush resource by using several objects on the artboard. You can even create a brush called a VisualBrush that updates its appearance during runtime if the objects that it was created from change during runtime.

You can 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 resource or color resource and Modify the appearance of an object by using brushes.

For information about resources, see Creating reusable resources.

Color and color spaces

Blend includes a color editor under Brushes in the Properties panel. The color editor also appears if you modify a brush resource in the Resources panel. The color editor has the following four color spaces, in addition to a hexadecimal mode (#AARRGGBB):

• RGB   Red (0-255), Green (0-255), Blue (0-255).

• HLS   Hue (360-degree color wheel), Lightness (0 to 100 percent), Saturation (0 to 100 percent).

• HSB   Hue (360-degree color wheel), Saturation (0 to 100 percent), Brightness (0 to 100 percent).

• CMYK   Cyan (0 to 100 percent), Magenta (0 to 100 percent), Yellow (0 to 100 percent), Black (0 to 100 percent).

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

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

• Brushes   Foreground, Background, Border Brush, Fill, Stroke, and Opacity Mask

• Appearance   Opacity, Stroke Thickness, Stroke Miter Limit, Stroke Start Line Cap, Stroke End Line Cap, Stroke Line Join, and Stroke Dash Cap

• Text   Font Family, Font Size, Font Weight, Font Style, Text Decorations, Line Height, Text Indent, and Text Alignment

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

For more information about the Eyedropper and Paint Bucket tools, see Copy or apply attributes to an object.

A Color eyedropper  also appears in the lower-right corner of the color Editor when you modify a Solid color brush  or a gradient stop on a Gradient brush . With this eyedropper selected, you can grab a color sample from anywhere on your desktop and apply it to the selected brush. You can press the ESC key at any time to cancel out of the eyedropper.

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.

Click Gradient brush  under Brushes in the Properties panel to create a gradient. Click Linear Gradient Brush  and Radial gradient  under the color Editor 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 object that has a Background property.

When Gradient brush is selected, the Color eyedropper in the color Editor becomes a Gradient eyedropper . When you hover over a color inside Expression Blend or on the desktop while the Gradient eyedropper is selected, the color appears as a preview in the selected color stop. When you click on a color using the Gradient eyedropper, the color is applied to the selected gradient stop. In addition, you can drag the Gradient eyedropper over an existing gradient, either inside Expression Blend or on the desktop, to apply the gradient to the existing object.

Dragging the Gradient eyedropper across an existing gradient duplicates the gradient in Expression Blend

When you apply a gradient to an object, gradient stop icons appear. You can change the color of each gradient stop, and add as many stops as you want to the gradient slider by just clicking the gradient slider. Conversely, you can easily remove stops that you no longer need by dragging them off the bottom of the gradient slider (dragging off the sides or top of the slider will not remove the stops). You can also modify the offset value for a selected gradient stop by either dragging the stops along the gradient line, or by modifying the value in the Selected gradient stop offset field.

To reverse a gradient, click Reverse gradient stops . You can go to the previous and next gradient stops by using the Select previous gradient stop and Select next gradient stop arrows .

To apply a gradient to multiple objects, select all of the objects that you want to apply the gradient to, and then apply the gradient.

Click Show advanced properties  to view additional properties that can be modified directly in the Properties panel.

For linear gradient brush properties, you can modify the following properties in the Properties panel:

• StartPoint   Specifies the coordinates of the start point of the linear gradient.

• EndPoint   Specifies the coordinates of the end point of the linear gradient.

• MappingMode   Specifies whether the gradient brush is absolutely positioned or positioned relative to the bounding box.

• SpreadMethod   Specifies how to draw a gradient that starts or ends inside the bounding box. Pad extends the colors of the outermost gradient stops to the edges of the object. Reflect mirrors the gradient fill. Repeat repeats the gradient fill.

• Opacity   Specifies the opacity of the gradient brush.

For radial gradient brush properties, you can modify the following properties in the Properties panel:

• GradientOrigin   Specifies the coordinates for the beginning of a gradient.

• Center   Specifies the outermost radial gradient.

• RadiusX   Specifies the horizontal radius of the outermost circle of the radial gradient.

• RadiusY   Specifies the vertical radius of the outermost circle of the radial gradient.

• MappingMode   Specifies whether the gradient brush is absolutely positioned or positioned relative to the bounding box.

• SpreadMethod   Specifies how to draw a gradient that starts or ends inside the bounding box. Pad extends the colors of the outermost gradient stops to the edges of the object. Reflect mirrors the gradient fill. Repeat repeats the gradient fill.

• Opacity   Specifies the opacity of the gradient brush.

For both types of gradient brushes, you can also modify the RelativeTransform property in the Properties panel by clicking the following tabs in the RelativeTransform box and then modifying the associated values:

• Translate

• Rotate

• Scale

• Skew

• Flip

You can also modify both linear and radial gradient brushes on the artboard by using the Gradient tool  or the Brush Transform tool . For more information, see the "Gradient tool" and "Brush Transform tool" sections that follow.

Gradient tool

To modify the fill, stroke, or opacity mask of a gradient brush that is applied to an object directly on the artboard, select the brush property in the Properties panel, and then select the Gradient tool in the Tools panel.

Tipp
With the object selected on the artboard, press G to select the Gradient tool.

An arrow appears on the artboard that you can use to modify the gradient. The start point and end point of the arrow correspond to the gradient stops at either end of the color bar. The gradient stops are indicated by circles with blue borders and interior fills that are the same as the gradient.

Linear gradient arrow

Radial gradient arrow

Clicking a gradient stop selects it, and the selection is indicated by a bold blue border. Double-clicking the gradient stop displays the color picker, from which you can modify the color of the selected gradient stop.

You can add a gradient stop by clicking at any point on the arrow. You can remove a gradient stop by clicking the circle that indicates a gradient stop and dragging it away from the arrow.

You can also modify the gradient properties in the following ways:

• Hold down the SHIFT key when you drag either the start point or the end point to constrain the movement along the straight line between the start point and the end point.

• Hold down the SHIFT key when you move the whole arrow to constrain the movement to the X or the Y plane.

• Hold down the SHIFT key when you rotate a start point or end point to snap every 15 degrees.

• Hold down the ALT key when you drag a start point or end point to move both endpoints at the same time, maintaining the position of the center point.

Brush transform tool

The Brush Transform tool  modifies the RelativeTransform property of a brush resource, including the RelativeTransform for both linear and radial gradients. The Brush Transform tool modifies the brush that is selected in the Brushes panel and applied to the object that is selected on the artboard.

To modify the transform of a brush that is applied to an object directly on the artboard, select the brush property in the Properties panel, and then select the Brush Transform tool  in the Tools panel.

Tipp
With the object selected on the artboard, press B to select the Brush Transform tool.

An adorner (a blue border) appears around the object. With the object selected with the Brush Transform tool, you can now modify the selected object in the following ways:

• To move a brush, drag anywhere inside the object. This corresponds to the Transform tab on the RelativeTransform box in the Properties panel.

• To rotate a brush, put your pointer outside any corner of the bounding outline around the object and drag when your pointer changes to a rotation handle . This corresponds to the Rotate tab on the RelativeTransform box in the Properties panel.

• To rescale either a tile brush or radial gradient brush, put your pointer on any handle on the side or corner of the object, and then drag. This corresponds to the Scale tab on the RelativeTransform box in the Properties panel.

• To skew a brush, put your pointer outside a side handle and drag when your pointer changes to skew handles . This corresponds to the Skew tab on the RelativeTransform box in the Properties panel.

You can also flip a transform. In the Properties panel, in the Brushes category, click Show advanced options . In the RelativeTransform box, click the Flip tab, and then click Flip X axis or Flip Y axis.

Clipping

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

• Clear the check box for the ClipToBounds property under Appearance in the Properties panel.

• Use the properties in the LayoutTransform category instead of RenderTransform under Transform in the Properties panel. This is especially useful when you transform a visual brush.

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, in addition to 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. Select one of the following:

• Stroke width   The width of a stroke on an object is measured in pixels (or, device-independent units, which are approximately 1/96 inch) and can have a value ranging from 0 to up to half of the width or height of the shape. In general, after the stroke thickness reaches half of the width and height of the shape, the stroke covers the whole fill. You can set the stroke width value by using the StrokeThickness property under Appearance in the Properties panel.

• Corner joins   For objects that have sharp corners, such as rectangles, you can change the way the stroke appears at each corner point by applying one of three corner join styles: Miter Join, Round Join, and Bevel Join. You can set the corner join style by using the StrokeLineJoin property under Appearance in the Properties panel.

  

• Miter limit   The miter limit controls how long the corner point of a miter join can get before it is automatically squared off into a bevel join. You can set the miter limit by using the StrokeMiterLimit property under Appearance in the Properties panel. The following image displays three angles with a StrokeThickness of 40, and a StrokeMiterLimit of 1 , 2.2 , and 4 . The size of the angle and the stroke thickness determine the visual effect of the miter limit.

  

• End caps   For paths that contain unconnected ends, such as lines, you can change the way the stroke appears at each end by applying one of four end-cap styles: Flat Cap , Round Cap , Square Cap , and Triangle Cap . You can set the end-cap style by using the StrokeEndLineCap or StrokeStartLineCap property under Appearance in the Properties panel.

  

• StrokeDashArray   StrokeDashArray is a stroke with a pattern of dashes and gaps. StrokeDashCap and StrokeDashOffset are properties that apply specifically to StrokeDashArray.

  The following image displays a single rectangle with a StrokeDashArray value of 5 4 (the first value specifies the length of the dash and the second value specifies the length of the gap), a StrokeDashCap value of Round, and a StrokeDashOffset (the distance within the dash pattern where a dash begins ) of 2.

Opacity and visibility

When you decrease the opacity of an object, you increase its transparency, so that 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. The following table describes three methods that you can select from to change the opacity of the object.

Method	Results
Opacity   Changes the transparency of the whole object, including all the visual attributes of the object. The image to the right shows the opacity value set at 60 percent.
Transparency   Sets the alpha value (A) of an individual brush attribute for an object, 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 do not 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 previous two images in this table is now set as Hidden.

Siehe auch

Konzepte

Applying effects