#284 – Making an Image Translucent Using the Opacity Property

Since the Image control inherits (indirectly) from UIElement, it has an Opacity property.  The Opacity property allows content behind the image to show through the image.  Its value ranges from 0.0 to 1.0, with 0.0 indicating that the image is fully transparent (doesn’t appear at all) and 1.0 indicating that the image is fully opaque (nothing shows through).

In the example below, we bind a Slider‘s Value property to the Opacity of an Image, so that we can easily change the opacity.  We also set the window background to a gradient fill.

When the Opacity is 1.0, the image is fully opaque and the gradient doesn’t show through the image at all.

When Opacity is 0.0, the image is transparent and we just see the gradient.

When the Opacity is between 0.0 and 1.0 (e.g. 0.2), the image is translucent and the background gradient shows through.

About Sean
Software developer in the Twin Cities area, passionate about .NET technologies. Equally passionate about my own personal projects related to family history and preservation of family stories and photos.

One Response to #284 – Making an Image Translucent Using the Opacity Property

  1. Pingback: #554 – Using an Opacity Mask « 2,000 Things You Should Know About WPF

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: