Opacity property
Collapse the table of content
Expand the table of content

UIElement.Opacity property

Gets or sets the degree of the object's opacity.


public double Opacity { get; set; }

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

Property value

Type: System.Double [.NET] | float64 [C++]

A value between 0 and 1.0 that declares the opacity factor, with 1.0 meaning full opacity and 0 meaning transparent. The default value is 1.0.


When Opacity is set on objects that are nested, the effective opacity for rendering is the product of all applicable opacity factors. For example, if an object that has Opacity=0.5 is contained in a Canvas that is also Opacity=0.5, the effective Opacity value for rendering is 0.25. Opacity values greater than 1.0 are treated as 1.0 when the value is used, although obtaining the property value will still give you the original greater-than-one value. Opacity values set as less than 0 are treated as 0 when the value is used. In the factoring logic, setting an Opacity to 2 to cancel out the effects of being contained by an object with 0.5 Opacity does not work; the 2 value is treated as 1.0 even before the nested-object factoring is calculated.

Opacity is a property that's sometimes animated in visual state storyboards, with zero duration. For example, the focus rectangle for "FocusStates" visual states is set with Opacity="0" in the original control template, because you don't want this rectangle to appear in a default non-focused states. But the visual states define a zero-duration "Focused" state that sets Opacity to 1 when the control using these templates and states has detected that it's keyboard-focused. For more info on this usage of Opacity, see Storyboarded animations for visual states.

Opacity and hit-testing

An Opacity value of 0 does not exclude an object from hit testing. This behavior can be useful for creating imagemap-style overlays that are drawn on top of the rest of the UI. For example, you can use a Canvas that has two children: a Rectangle that has a Height, a Width and an Opacity of 0, and the layout root of the rest of the UI that should draw underneath. By default children of a Canvas draw on top of each other in the same absolute coordinate system. Make sure that the ZIndex value of the Rectangle is higher than the other element's ZIndex (or declare the Rectangle after the other element in XAML element order to get the same result.) Wire your hit-testing logic (combines PointerRoutedEventArgs.GetCurrentPoint and VisualTreeHelper.FindElementsInHostCoordinates) to the PointerPressed event for the Rectangle.

Alternatively, in order to exclude an object from hit testing, you should set IsHitTestVisible to false, rather than using Opacity.


This example uses a Storyboard and DoubleAnimation to target Opacity. This animates the Opacity to create an app-specific decorative fade-in animation over a one second duration.

  <UserControl x:Class="animation_ovw_intro.Page"
  Width="400" Height="300">

      <!-- Animates the rectangle's opacity. -->
      <Storyboard x:Name="myStoryboard">
          From="1.0" To="0.0" Duration="0:0:1" 
    <TextBlock Margin="10">Click on the rectangle to start the animation.</TextBlock>

    <Rectangle PointerPressed="Item_Clicked"
      Width="100" Height="100" Fill="Blue" />


Requirements (Windows 10 device family)

Device family

Universal, introduced version 10.0.10240.0

API contract

Windows.Foundation.UniversalApiContract, introduced version 1.0


Windows::UI::Xaml [C++]



Requirements (Windows 8.x and Windows Phone 8.x)

Minimum supported client

Windows 8

Minimum supported server

Windows Server 2012

Minimum supported phone

Windows Phone 8.1 [Windows Runtime apps only]


Windows::UI::Xaml [C++]



See also

Events and routed events overview



© 2016 Microsoft