#558 – Reversing a Gradient Using Blend

When defining a gradient fill in Blend, the Offset property of each gradient stop indicates the location of the gradient stop along the gradient line, from StartPoint to EndPoint.

In the example below, the gradient runs from white at the top of the control to blue at the bottom.

		<Button Content="Gradient Fill" HorizontalAlignment="Center"
		        Padding="15,10" Margin="20">
				<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
					<GradientStop Color="White" Offset="0"/>
					<GradientStop Color="Pink" Offset="0.75"/>
					<GradientStop Color="Blue" Offset="1"/>

You can easily reverse the order of the gradient stops by clicking on a button in Blend. The button is located on the color editing panel.

If we reverse the gradient stops for the example above, the offsets are reversed and the gradient flips upside down.

		<Button Content="Gradient Fill" HorizontalAlignment="Center"
		        Padding="15,10" Margin="20">
				<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
					<GradientStop Color="White" Offset="1"/>
					<GradientStop Color="Pink" Offset="0.25"/>
					<GradientStop Color="Blue"/>

#555 – Creating a Radial Opacity Mask

You can define an opacity mask on a user interface element to cause the opacity to change across the element, depending on the mask.  The opacity mask is a brush, where the alpha channel at each point in the brush is used to define the opacity at each point on the element.

You will typically use either a linear or a radial gradient for an opacity mask, since a gradient brush allows you to create a range of alpha values across the brush.

You can use a radial gradient brush as the opacity mask to fade out the edges of a user interface element.  To start with, select a gradient brush for the OpacityMask property.

Change the gradient to be a radial gradient.

Select the outer gradient stop and set its alpha value to be transparent.

Finally, adjust the gradient stops to get the effect that you want.

#554 – Using an Opacity Mask

An Opacity Mask allows you to set an opacity for a user interface element that is based on a brush, rather being a single opacity value that is applied to the entire element.

For example, instead of setting a single value for the Opacity of an Image control, you can use a gradient brush as its opacity mask, so that one side of the picture fades out.

We start with a simple Image with a default Opacity (100%).

We then select the OpacityMask property of the Image and select a gradient brush.

We then set the alpha channel of the ending gradient stop to 0 (fully transparent).  Now we have a gradient that goes from solid black to fully transparent.

You’ll see that the Image now starts out solid at its top and fades out at the bottom

#553 – Setting an Alpha Value in Blend

Colors in WPF consist of 8 bytes–2 bytes each for the alpha, red, green and blue channels.  The alpha channel dictates the transparency/opacity of a color (255 or #FF = fully opaque, 0 = fully transparent).

You can set the alpha value for a color in the color editor in Blend by setting the value of the field labeled A (0-100%) or by explicitly setting the first two bytes of the hex value for the color (#00-#FF).

In the example below, the Alpha value is at 100%, or #FF, indicating that the color is fully opaque.

If you set the Alpha value to 50%, you’ll see that the first two bytes in the color value are now #7F (127).

In the example below, we’ve set the the Foreground color of the label to Black, with an alpha value of 50% so that we can see through the label to the GUI behind it.

#552 – Setting a Property to Use an Existing Resource

You can use Blend to create resources for objects (e.g. brushes) that you want to use in several places in your user interface.  Once you’ve defined a resource, you can use it as a value for a property on a control.

Let’s say that you’ve defined several resources within the resource dictionary for a Window.  Below, we’ve defined a couple linear gradient brushes and a couple solid color brushes.

Now let’s say that you’re trying to pick a brush to use for the Background property of a Button.  You can select the Button and then find its Background property on the properties panel.

Now set the Background to use an existing resource by clicking on the small square at the right side of the property and selecting a resource from the Local Resource submenu.  Under this menu, you’ll see all of your resources listed.

#551 – Resources Are Listed under the Resources Tab in Blend

When you convert an object to a resource using Blend, the definition of the object is moved from the control where it was defined into a resource dictionary and given a unique name.

In the XAML fragment below, the resource dictionary defined for the Window contains a single entry with the key “BrushBlueFade”.  The Label control then uses this brush by name for its Background property.

In Blend, you can see all of the resources that you’ve defined by clicking on the Resources tab.  Below, we can see the “BrushBlueFade” resource under the Window object, as well as a preview of the resource.

You can modify a resource directly from this panel by left-clicking on it.  In this case, we get the normal palette for editing a gradient brush.

You can also view the XAML for the resource by right-clicking and selecting View XAML.

#550 – Converting a Brush into a Resource in Blend

Once you spend some time creating a Brush in Blend, e.g. specifying the different colors in a gradient brush, it’s likely that you’ll want to use the same brush in several different spots in your user interface.  You could just copy/paste the definition of the brush in XAML.  But the easier way to reuse a brush is to convert it to a resource and then to reference the resource by name wherever you use it.

To start with, assume that we have a linear gradient brush defined for a Label control’s Background.

Start by clicking on the white square (Advanced Options) to the right of the brush-related property.

On the menu that comes up, select Convert to New Resource.

Specify a name for the new resource.

Notice that the XAML now defines the brush as a resource and then references it from the Label.

#548 – Change the Offset of a Gradient Stop in Blend

Once you’ve added one or more gradient stops to a gradient brush, you can use the mouse to drag any of the gradient stops left or right.  Dragging a gradient stop changes the value of its Offset, which dictates where along the gradient line the specified color is achieved for the gradient.

For example, let’s say that we start with a simple gradient that goes from Blue at the top of a control to white at the bottom of a control.  The gradient line runs from the top of the control (Y=0) to the bottom (Y=1).  The first gradient is at an offset of 0 (top of control) and the second gradient is at an offset of 1 (bottom of control).

You can now move one of the gradient stops by sliding it.  This will change the value of its Offset, changing where on the gradient line that color is reached.

#547 – Specifying Colors by Name in Blend

When you are specifying color values for a color-valued property in Blend, there are several different ways to specify a color.  You can select a color by selecting it from the palette, use the eyedropper tool, or enter RGB values directly.

You can also specify a color by entering a color value by name in the text field that initially displays the color as a hex value.

Below is a list of all predefined colors, which you can reference by name.


#546 – Adding Gradient Stops in Blend

A gradient fill can have a number of different stopspositions within the gradient that should take on a color value that you specify.

To add or remove stops for a gradient, start by selecting the control containing a property that you’ll set to a gradient.  (E.g. The Background property of a Label).

In the Brushes area of the Properties panel, click the icon for a Gradient brush.

Now we have a gradient with two gradient stops, going from all black at the top of the control to all white at the bottom.

You can click anywhere within the gradient line to add a gradient stop.  Once added, click on the gradient that you want to change and then select a color for the gradient on the color palette.

We can continue adding as many gradient stops as we like.