#560 – Using a Radial Gradient to Create a 3D Effect

You can use a radial gradient in WPF to create a 3D effect on a shape.  In the example below, we set up a gradient on a circle (Ellipse shape) to make the circle look like a 3D sphere.

Start by drawing a simple circle (Ellipse).

Now specify a radial gradient for the Fill property.

Next, click on the Gradient tool and then slide the radial gradient off-center, relative to the ellipse.

Finally, adjust the gradient so that the center starts out white and fades to a darker color at the edge of the gradient.  You can also enlarge the gradient so that its outer edge lines up with the outer edge of the ellipse.

Here’s the final result:

#559 – Drawing a Masked Gradient in Blend

You can use an opacity mask with simple shapes along with a gradient to get a style that looks like a gradient applied to a paper cutout.  For example, you might want the following cloud-like effect.

To do this, start with a Rectangle and use a linear gradient for its Fill property.

    	<Rectangle Height="400" Stroke="Black" Width="600">
    	    <Rectangle.Fill>
    	        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    		    <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
    		    <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
    		    <GradientStop Color="#FF6EB5F5" Offset="1"/>
    		</LinearGradientBrush>
 	    </Rectangle.Fill>
        </Rectangle>

Now create an image with the shape of the clouds, using an opaque foreground (black in this example) and a transparent background (shown as checkerboard here).

Finally, use the new clouds image as an ImageBrush for the OpacityMask of the Rectangle.

<Rectangle Height="400" Stroke="Black" Width="600">
    <Rectangle.Fill>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFBFBFB" Offset="0.504"/>
            <GradientStop Color="#FF6EB5F5" Offset="1"/>
            <GradientStop Color="#FFD6E1EA" Offset="0.734"/>
        </LinearGradientBrush>
    </Rectangle.Fill>
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="Images\CloudsMask.png"/>
    </Rectangle.OpacityMask>
</Rectangle>

#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">
			<Button.Background>
				<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
					<GradientStop Color="White" Offset="0"/>
					<GradientStop Color="Pink" Offset="0.75"/>
					<GradientStop Color="Blue" Offset="1"/>
				</LinearGradientBrush>
			</Button.Background>
		</Button>


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">
			<Button.Background>
				<LinearGradientBrush StartPoint="0,0" EndPoint="0,1" >
					<GradientStop Color="White" Offset="1"/>
					<GradientStop Color="Pink" Offset="0.25"/>
					<GradientStop Color="Blue"/>
				</LinearGradientBrush>
			</Button.Background>
		</Button>

#557 – Using an Image As an Opacity Mask

You’ll typically use a gradient brush as an opacity mask, to change the opacity of a control gradually.

You can also use an image as an opacity brush, making various regions of the target control opaque or transparent depending on the opacity at the same spot in the image.

Below, I’ve created a smiley face image in Paint.NET.  I’ve made the background of the image transparent (shown in Paint.NET as a checkerboard).

Next I create a WPF project with a simple Image control.

    <Image Source="Images\Rocks2Small.jpg" Width="400"/>

Now we specify an OpacityMask for this Image.  But instead of using a LinearGradientBrush or RadialGradientBrush, we use an ImageBrush–a brush created from an image.

<Image Source="Images\Rocks2Small.jpg" Width="400">
    <Image.OpacityMask>
        <ImageBrush ImageSource="Images\FaceMask.png"/>
    </Image.OpacityMask>
</Image>

Using the second image as the opacity mask for the first means–the first image will be transparent wherever the second image is transparent.

#556 – Clipping to a Border Using an Opacity Mask

When you specify a border radius for a Border element, the content within the Border is not automatically clipped to the new rounded interior.

<Border BorderBrush="Black" BorderThickness="3" Margin="10"
        Width="400" Height="267" CornerRadius="40" >
    <Image Source="Images\Rocks2Small.jpg"/>
</Border>


If you want to clip against the Border, you can specify an opacity mask that is a visual brush bound to the visual of a second Border element that overlays the Image control.  This will cause any portion of the Image control that falls outside the boundaries of the inner Border to use an opacity of 0.0.

<Border BorderBrush="Black" BorderThickness="3" Margin="10" Width="400" Height="267"
	CornerRadius="40" >
    <Grid>
        <Border	Name="myBorder" CornerRadius="40" Background="White" Margin="1"/>
	<Image Source="Images\Rocks2Small.jpg" Margin="1">
	    <Image.OpacityMask>
	        <VisualBrush Visual="{Binding ElementName=myBorder}"/>
	    </Image.OpacityMask>
	</Image>
    </Grid>
</Border>


Thanks to fellow Minnesotan, Chris Cavanagh, for an explanation of how to do this!

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