#566 – Setting Properties of an Effect in Blend

Like other elements, you can set various properties of an effect in Blend using the Properties panel.

In the example below, we’ve added a DropShadowEffect to a Label.  If you select the effect in the XAML editor or the Objects and Timeline panel, you’ll see several properties that we can set for this effect.

For example, we can increase the ShadowDepth, so that the shadow appears further away from the Label.

Advertisements

#565 – Workaround for Inability to Scroll ScrollViewer in Design Mode in Blend

When you’re working in Blend and have some scrollable content in a ScrollViewer, you won’t be able to see all of the content at design time because Blend doesn’t let you scroll the ScrollViewer.

This can be frustrating, since you want to see your content at design time.  In the example above, I have a series of Image controls in a vertical StackPanel, but I can only see the first couple.

The trick to working around this limitation is to put your content into a UserControl and then put that UserControl into the ScrollViewer.  You can then scroll the contents of the UserControl on the artboard.

Create a UserControl.

Move your content into the new UserControl.

Remove design-time width and height.

Go back to the window that contains your ScrollViewer.  Find the UserControl in the Assets panel and drag it into the ScrollViewer.

You can now scroll at design time.

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

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