WPF / Silverlight tutorial: Visibility property and binding
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:
And XAML for this layout is:
[codesyntax lang="xml"]
<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>
[/codesyntax]
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?
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:
8. Select the btnHidden and set its Visibility property to Hidden. What do you notice in this case?
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:
[codesyntax lang="xml"]
<Button Visibility="Collapsed"/>
[/codesyntax]
Or through, let’s say C #code:
[codesyntax lang="csharp"]
btnCollapsed.Visibility = System.Windows.Visibility.Collapsed;
[/codesyntax]
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:
[codesyntax lang="csharp"]
...Visibility="{Binding Path=IsControlVisible}”...[/codesyntax]
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:
[codesyntax lang="xml"]
<BooleanToVisibilityConverter x:Key="MyBooleanToVisibilityConverter" />
[/codesyntax]
And then do the binding like this:
[codesyntax lang="xml"]
... Visibility="{Binding Path=IsControlVisible, Converter={StaticResource MyBooleanToVisibilityConverter}}" ...[/codesyntax]
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!
26 Responses to “ WPF / Silverlight tutorial: Visibility property and binding ”
Trackbacks
- Vibor Cipan
- Larry King
- Larry King
- WPF / Silverlight tutorial: Visibility property and binding Silverlight Blog
- Tweets that mention WPF / Silverlight tutorial: Visibility property and binding -- Topsy.com
- WPF / Silverlight tutorial: Visibility property and binding iSilverlight
- Kelps Leite de Sousa
- victorgaudioso
- codenenterp
- Cynergy Systems
- brian_henderson
- uberVU - social comments
- Sara Silva
- Eriawan Kusumawardho
- Eriawan
- Silverlight News
- Vibor Cipan
- Tonči Jukić
- Rod Falanga
- brian_henderson
- Al Pascual
- faisalhossain
- victorgaudioso
- Kunal Chowdhury
- Links (1/14/2010) « Steve Pietrek-Everything SharePoint/Silverlight
- C#たん