WPF / Silverlight tutorial: Visibility property & binding

Dear visitor: Please keep in mind that this post is originally from Vibor Cipan's personal blog, the name of which we eventually adopted as our company name together with its conveniently-named URL. We're keeping the posts on our official company blog for all the subscribers to Vibor's blog who have read and commented on his previous posts. Please be aware that this post represents Vibor's personal thinking few years ago and doesn't necessarily represent the opinions of the UX Passion as a company today. 

Visibility property is a very powerful and yet often overlooked property available in both WPF and Silverlight. It enables you to set Visibility of certain UIElement objects to different states like: Visible, Collapsed and Hidden (not supported by Silverlight). This tutorial shows you how to use it and how to bind to Visibility property.

Introduction

Visibility is property available both for Silverlight and WPF. Completely technically speaking – Visibility property gets or sets the visibility of a UIElement – for example buttons or rectangles used in your user interface.

As a property, Visibility uses enumeration and not a Boolean. Reason for this is the fact that under WPF we can have three different values for the Visibility property: Visible (which is default value), Collapsed and Hidden. Silverlight’s Visibility property is closely related. It supports all WPF values apart from the Hidden. Since Silverlight’s architecture is somewhat modelled and based on the WPF, Visibility property under Silverlight is also using an enumeration rather than a simple Boolean.

So, to summarize…

WPF Visibility property enumeration: Visible, Collapsed and Hidden

Silverlight Visibility property enumeration: Visible and Collapsed.

What’s the difference between Visibility property values?

Easiest way to understand this is to create a really simple UI.

1. Fire up your Expression Blend (you can use Visual Studio as well, but the instructions here are based on WPF) and start a new WPF project.

2. From the Asset library draw a StackPanel control on top of your artboard. Set it’s Orientation property to Horizontal.

3. With StackPanel control selected, add three Button controls as a StackPanel’s child elements. Name them btnVisible, btnCollapsed and btnHidden. Be sure to set the Height and Width properties of the StackPanel to Auto.

4. You can also set the Content property of the buttons to match their names closely – let’s say: Visible, Collapsed and Hidden. You can set Margin values for all buttons to 3 just to have some space between them. At then you should be looking at the UI similar to this one:

Visibility property: All buttons visible

And XAML for this layout is:

<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Orientation="Horizontal">
	<Button x:Name="btnVisible" Content="Visible" Margin="3"/>
	<Button x:Name="btnCollapsed" Content="Collapsed" Margin="3"/>
	<Button x:Name="btnHidden" Content="Hidden" Margin="3"/>
</StackPanel>

5. Next step is to actually go and set different values for Visibility property. Select the btnCollapsed and set its Visibility property (Properties pane > Appearance section) to Collapsed. What do you notice now?

Visibility property: Collapsed button is not visible anymore

6. You can see that by setting the Visibility to Collapsed button completely disappears from the design surface and during the runtime.

7. Now, set the btnCollapsed’s Visibility to Visible and grab the btnHidden and position it next to btnVisible making it all look like this:

Visibility property: Moving the button around :)

8. Select the btnHidden and set its Visibility property to Hidden. What do you notice in this case?

Visibility property: Button is now hidden but its space is still reserved :)

9. Now the btnHidden is also invisible, but the space it occupies is still filled with the control itself though it is not visible during the design time and runtime.

Conclusion and few words about Visibility Binding

In the WPF architecture model, Hidden value describes the state where UIElement (control itself) is not rendered on top of the application surface but its space stays reserved. In the both Silverlight and WPF models, Collapsed completely removes the element and does not reserve space for it in UI layout. Visible simply displays the element itself.

Visibility property can be modified either through XAML:

<Button Visibility="Collapsed"/>

Or through, let’s say C #code:

btnCollapsed.Visibility = System.Windows.Visibility.Collapsed;

Visibility Binding and BooleanToVisibleConverter

Since Visibility is an enumeration (both in Silverlight and WPF), in cases where you need to do binding, simply returning the Boolean (true or false) value for IsControlVisible will not work:

...Visibility="{Binding Path=IsControlVisible}”...

Solution is, however available and you can use the BooleanToVisibleConverter out of the box. First step is to include this converter into the resources – either on the application level or in the specific resource dictionary file:

<BooleanToVisibilityConverter x:Key="MyBooleanToVisibilityConverter" />

And then do the binding like this:

... Visibility="{Binding Path=IsControlVisible, Converter={StaticResource MyBooleanToVisibilityConverter}}" ...

Existence of this BooleanToVisibleConverter is very practical and surely can save you some time while coding and allow you to focus on other, hopefully, more important things.

However, I’ve missed to mention that earlier – BooleanToVisibleComverter is not available in Silverlight. I don’t know for sure ill it be part of Silverlight 4, but currently, in the Silverlight 4 Beta it’s still not there. Thanks @brian_henderson for heads up on this!

Let’s keep in touch – You should follow me on Twitter now!

Comments (3)

  1. You could also use DependencyProperty to achieve the binding.
    The type of the DP must be System.Windows.Visibility

  2. I wrote a post that extends this post with more information.

    Binding Visibility to a bool value in WPF

    Hope it helps out readers who need a few more examples and need to do a little more customization.

  3. I could probably catch the last half hour

Trackbacks

  1. Pingback: Vibor Cipan

  2. Pingback: Larry King

  3. Pingback: Larry King

  4. Pingback: WPF / Silverlight tutorial: Visibility property and binding Silverlight Blog

  5. Pingback: Tweets that mention WPF / Silverlight tutorial: Visibility property and binding — Topsy.com

  6. Pingback: WPF / Silverlight tutorial: Visibility property and binding iSilverlight

  7. Pingback: Kelps Leite de Sousa

  8. Pingback: victorgaudioso

  9. Pingback: codenenterp

  10. Pingback: Cynergy Systems

  11. Pingback: brian_henderson

  12. Pingback: uberVU – social comments

  13. Pingback: Sara Silva

  14. Pingback: Eriawan Kusumawardho

  15. Pingback: Eriawan

  16. Pingback: Silverlight News

  17. Pingback: Vibor Cipan

  18. Pingback: Tonči Jukić

  19. Pingback: Rod Falanga

  20. Pingback: brian_henderson

  21. Pingback: Al Pascual

  22. Pingback: faisalhossain

  23. Pingback: victorgaudioso

  24. Pingback: Kunal Chowdhury

  25. Pingback: Links (1/14/2010) « Steve Pietrek-Everything SharePoint/Silverlight

  26. Pingback: C#たん

  27. Pingback: Henry Chong