UIElement Visibility vs. UIElement Element Opacity: When To Use Each And Why

When building apps for Windows Phone, there are two properties you can use to hide and/or reveal UI elements:

  • UIElement.Visibility
  • UIElement.Opacity

It is important to note the performance implications of each, and when and why to use one over the other.

UIElement.Visibility

The most important thing to know about the Visibility property, is that it handled exclusively by the UI thread. When you set an element’s Visibility property to Collapsed, the entire visual element tree must be redrawn.However, the silver lining is that when you collapse an element’s Visibility, the element is removed from the visual element tree and thus removed from visual memory thereby decreasing the overall memory usage of your app.

UIElement.Opacity

The Opacity property works very differently than Visibility. Using the Opacity property allows the element to be bitmap cached. Bitmap caching is storing and element as a bitmap image after the first render pass. Doing so makes the composition thread responsible for drawing the bitmap image thus freeing up the rendering system (which is on the UI thread.)

With that said, you should always use bitmap caching when manipulating the UIElement.Opacity property. To enable bitmap caching, set the element’s CacheMode property to BitmapCache like so:

<path CaceMode="BitmapCache" ... />

Conclusion: UIElement.Visibility vs.UIElement.Opacity

In my opinion  the Opacity property is the one you should use most of the time. I would consider using the Visibility property if my app was already using an excessive amount of memory or, perhaps, if I were targeting low-end devices where less memory is available.

Additional Information

Much of this information came from the following book. I would strongly suggest anyone interested in Windows Phone app development add it to their library:

Windows Phone 8 Unleashed, Daniel Vaughn

Leave a comment