UIElement.Opacity Property

Gets or sets the opacity factor applied to the entire UIElement when it is rendered in the user interface (UI). This is a dependency property.

Namespace:  System.Windows
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

[<LocalizabilityAttribute(LocalizationCategory.None, Readability = Readability.Unreadable)>]
member Opacity : float with get, set

<object Opacity="double" .../>

Property Value

Type: System.Double
The opacity factor. Default opacity is 1.0. Expected values are between 0.0 and 1.0.

Identifier field

OpacityProperty

Metadata properties set to true

None

The 1.0 default value is the default provided by the initial metadata of this dependency property on the UIElement class. Other derived classes may potentially change this default value by overriding the metadata from within their class constructor.

The value of Opacity won't be applied to actual layout unless the element is also visible (IsVisible is true).

Opacity is applied from parent elements on down the element tree to child elements, but the visible effects of the nested opacity settings aren't indicated in the property value of individual child elements. For instance, if a list has a 50% (0.5) opacity and one of its list items has its own opacity set to 20% (0.2), the net visible opacity for that list item will be rendered as if it were 10% (0.1), but the property value of the list item Opacity property would still be 0.2 when queried.

Even if the declared or evaluated opacity is 0, an element still participates in input events and commands, and is potentially focusable. This aspect can be useful, for instance you can use an opacity-zero object (such as a shape) for masking underlying objects with transparent elements. The opacity-zero object can then handle all the input event processing for an underlying area. However, the Background or Fill of the object or shape should be set to a value, even if it is Transparent, otherwise hit testing is not enabled, and no events are received.

This example shows how to make a UIElement transparent or semi-transparent. To make an element transparent or semi-transparent, you set its Opacity property. A value of 0.0 makes the element completely transparent, while a value of 1.0 makes the element completely opaque. A value of 0.5 makes the element 50% opaque, and so on. An element's Opacity is set to 1.0 by default.

The following example sets the Opacity of a button to 0.25, making it and its contents (in this case, the button's text) 25% opaque.


<!-- Both the button and its text are made 25% opaque. -->
<Button Opacity="0.25">A Button</Button>


No code example is currently available or this language may not be supported.

If an element's contents have their own Opacity settings, those values are multiplied against the containing elements Opacity.

The following example sets a button's Opacity to 0.25, and the Opacity of an Image control contained with in the button to 0.5. As a result, the image appears 12.5% opaque: 0.25 * 0.5 = 0.125.


<!-- The image contained within this button has an effective
     opacity of 0.125 (0.25 * 0.5 = 0.125). -->
<Button Opacity="0.25">
  <StackPanel Orientation="Horizontal">
    <TextBlock VerticalAlignment="Center" Margin="10">A Button</TextBlock>
    <Image Source="sampleImages\berries.jpg" Width="50" Height="50"
      Opacity="0.5"/>
  </StackPanel>
</Button>


No code example is currently available or this language may not be supported.

Another way to control the opacity of an element is to set the opacity of the Brush that paints the element. This approach enables you to selectively alter the opacity of portions of an element, and provides performance benefits over using the element's Opacity property. The following example sets the Opacity of a SolidColorBrush used to paint the button's Background is set to 0.25. As a result, the brush's background is 25% opaque, but its contents (the button's text) remain 100% opaque.


<!-- This button's background is made 25% opaque, but its
     text remains 100% opaque. -->
<Button>
  <Button.Background>
    <SolidColorBrush Color="Gray" Opacity="0.25" />
  </Button.Background>
  A Button
</Button>


No code example is currently available or this language may not be supported.

You may also control the opacity of individual colors within a brush. For more information about colors and brushes, see Painting with Solid Colors and Gradients Overview. For an example showing how to animate an element's opacity, see How to: Animate the Opacity of an Element or Brush.

More Code

How to: Animate the Opacity of an Element or BrushTo make a framework element fade in and out of view, you can animate its Opacity property or you can animate the Opacity property of the Brush (or brushes) used to paint it. Animating the element's opacity makes it and its children fade in and out of view, but animating the brush used to paint the element enables you to be more selective about which portion of the element fades. For example, you could animate the opacity of a brush used to paint a button's background. This would cause the button's background to fade in and out of view, while leaving its text fully opaque.

.NET Framework

Supported in: 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft