#557 – Using an Image As an Opacity Mask

May 14, 2012 1 Comment

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.

Filed under Brushes Tagged with , , , ,

#556 – Clipping to a Border Using an Opacity Mask

May 11, 2012 1 Comment

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!

Filed under Brushes Tagged with , , , ,

#555 – Creating a Radial Opacity Mask

May 10, 2012 Leave a comment

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.

Filed under Blend Tagged with , , , , ,

#554 – Using an Opacity Mask

May 9, 2012 2 Comments

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

Filed under Blend Tagged with , , ,

#553 – Setting an Alpha Value in Blend

May 8, 2012 Leave a comment

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.

Filed under Blend Tagged with , , , , ,

#552 – Setting a Property to Use an Existing Resource

May 7, 2012 Leave a comment

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.

Filed under Blend Tagged with , ,

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

May 4, 2012 Leave a comment

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.

Filed under Blend Tagged with , ,

#550 – Converting a Brush into a Resource in Blend

May 3, 2012 4 Comments

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.

Filed under Blend Tagged with , , ,

#549 – More Colors Than You Know What to Do With

May 2, 2012 Leave a comment

Pantone provides a color matching system that includes a list of 2,058 colors (the Pantone Goe system) that you can select from when selecting colors for print or for online applications.

Below is the full set of Pantone Goe colors.  To use any of these colors in a WPF application, simply use the color eyedropper tool in Blend to select the color that you want.

Filed under Miscellaneous Tagged with , ,

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

May 1, 2012 Leave a comment

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.

Filed under Blend Tagged with , , ,

← Older posts

Newer posts →

Follow

Get every new post delivered to your Inbox.

Join 129 other followers