Modify the appearance of a object

Article
07/10/2013

You can change the appearance of the objects that you draw on the artboard by applying a brush and then modifying the Fill and Stroke of the brush.

Brushes appear in the Brush category of the Properties panel. The Fill property refers to the appearance of the inside of the rectangle object. The Stroke property refers to the border around the rectangle, and the Opacity property can be used to make rectangle object transparent. The properties displayed in the Brush category change depending on the type of object selected.

To modify the fill of a rectangle

Click Selection in the Tools panel and then click the rectangle on the artboard.

Tip

You can also select the rectangle by selecting the Rectangle object in the Objects and Timeline panel.
In the Properties panel, under Brush, select Fill.
Under Brush, select Solid color brush .
In the color Editor, select the color that you want to apply to the rectangle. You can use the RGB value, the 16-bit hexadecimal color code, or the color picker to choose the color that you want.

To modify the stroke of a rectangle

Click Selection in the Tools panel and then click the rectangle on the artboard.

Tip

You can also select the rectangle by selecting the Rectangle object in the Objects and Timeline panel.
In the Properties panel, under Brush, select Stroke.
Under Brush, select Solid color brush .
In the color Editor, select the color that you want to apply to the stroke. You can use the RGB value, the 16-bit hexadecimal color code, or the color picker to choose the color that you want.
In the Appearance category, modify the StrokeThickness.

For more information, see Apply a brush to an object's fill or stroke.

You can also modify the corners of the stroke by adjusting the Stroke properties.

For more information, see the "Strokes" section of Setting colors, brushes, and masks (Blend for Visual Studio).

To add a gradient to a rectangle

Click Selection in the Tools panel and then click the rectangle on the artboard.
In the Properties panel, under Brush, select Fill or Stroke.
Under Brush, select Gradient brush .
In the Editor, you can change the color of each of the gradient stops on the color bar by selecting the gradient stop, and then clicking the color that you want inside the color picker.

A gradient brush applied to the Fill property of a rectangle

You can add other gradient stops by clicking the gradient bar. You can also swap the gradient stops by clicking Reverse gradient stop button.

To remove gradient stops, drag them off the gradient bar.

Tip

When Gradient brush is selected, the Color eyedropper in the color Editor becomes a Gradient eyedropper . 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.

To modify a gradient applied to a rectangle

With the Fill or Stroke property of the rectangle object still selected, select Gradient in the Tools panel.

Tip

With the object selected on the artboard, press G to select the Gradient tool. The pointer changes to the Gradient tool when you hover over the selected object on the artboard.

A blue arrow appears on the artboard showing the direction of the gradient brush and its endpoints.

Note

If you do not see a blue arrow, you might not have the rectangle object selected, or you might not have a brush property selected.
Use your mouse to move the endpoints of the blue arrow to modify the gradient. You can lengthen or shorten the arrow, rotate the arrow, or move the center point of the arrow to modify the gradient.

Modify a gradient
In the Properties panel, under Brush, click the gradient bar to add more gradient stops and change their colors. You can also click the blue arrow on the artboard to add gradient stops or double-click to edit the gradient.

To transform a brush applied to an object

With the rectangle selected on the artboard, select Brush Transform in the Tools panel.

Tip

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

A blue arrow adorner appears around the rectangle on the artboard.
With the Brush Transform tool selected, do one or more of the following:
- To move a brush, drag anywhere inside the object.
- 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 .
- 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.
- To skew a brush, put your pointer outside a side handle and drag when your pointer changes to skew handles ..

The Brush Transform tool Brush Transform tool can also be used with the Tile brush JJ154962.14623a18-70ab-450f-af01-ae9902d60e4d(en-us,VS.110).png .

Next Steps

You can design the user interface of your application by adding more objects to the main document (typically MainPage.xaml).

For more information, see Add or modify an object (Blend for Visual Studio), Draw a free-form path (Blend for Visual Studio), Draw a curve (Blend for Visual Studio), and Insert an image file into the active document (Blend for Visual Studio).
You can reuse a brush or other property value by converting it to a resource and applying it to another property.

For more information, see Create a brush or color resource (Blend for Visual Studio).
You can move, rotate, scale, and perform other transformations on objects on the artboard.

For more information, see Reposition or translate an object (Blend for Visual Studio), Resize or scale an object (Blend for Visual Studio), Rotate an object (Blend for Visual Studio), Skew an object (Blend for Visual Studio), Flip an object (Blend for Visual Studio), or Change the center point of an object (Blend for Visual Studio).
You can animate your objects.

For more information, see Create a simple animation (Blend for Visual Studio), Animate the points on a path or clipping path (Blend for Visual Studio).