If you are interested in exploring alternatives to the BooleanToVisibiltyConverter
, then this post is for you. Suppose you have two user interface elements. You want to display the first if a boolean value is true, and the second if the boolean value is false.
Posts in this series:
The Old Way
The standard way of doing this is to use a
BooleanToVisibilityConverter
as shown here:
OldWay.xaml
<UserControl
x:Class="VisibilityDemoApp.OldWay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vcl="using:VisibilityControlLibrary">
<UserControl.Resources>
<vcl:BooleanToVisibilityConverter
x:Key="BooleanToVisibilityConverter" />
<vcl:BooleanToInvisibilityConverter
x:Key="BooleanToInvisibilityConverter" />
</UserControl.Resources>
<StackPanel>
<CheckBox
x:Name="MyCheckBox"
Content="MyCheckBox" />
<StackPanel
Orientation="Vertical"
Visibility="{Binding ElementName=MyCheckBox, Path=IsChecked, Converter={StaticResource BooleanToInvisibilityConverter}}">
<TextBlock
Text="This is the false content" />
<TextBox
Text="FALSE" />
</StackPanel>
<StackPanel
Orientation="Vertical"
Visibility="{Binding ElementName=MyCheckBox, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock
Text="This is the true content" />
<TextBox
Text="TRUE" />
</StackPanel>
</StackPanel>
</UserControl>
Notice that both the “true” content and the “false
” content are bound separately using the
BooleanToVisibility
and the BooleanToInvisibility
converters.
The New Way
I am offering an alternative to this by introducing a custom control called
VisibilityControl
.
Install VisibilityControl
from NuGet.org and add to your existing Windows 8 application:
- Open your application in Visual Studio
- Select Manage NuGet Packages from the Project menu.
- Click Online. Search for
VisibilityControl
. Click Install.
Once the VisibilityControl library is added to your project, you can re-write the XAML to look like this:
NewWay.xaml
<UserControl
x:Class="VisibilityDemoApp.NewWay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vcl="using:VisibilityControlLibrary">
<StackPanel>
<CheckBox
x:Name="MyCheckBox"
Content="MyCheckBox" />
<vcl:VisibilityItemsControl
IsTrue="{Binding ElementName=MyCheckBox, Path=IsChecked}">
<StackPanel
Orientation="Vertical">
<TextBlock
Text="This is the false content" />
<TextBox
Text="FALSE" />
</StackPanel>
<StackPanel
Orientation="Vertical">
<TextBlock
Text="This is the true content" />
<TextBox
Text="TRUE" />
</StackPanel>
</vcl:VisibilityItemsControl>
</StackPanel>
</UserControl>
Notice that the only binding is to the IsTrue
dependency property of the
VisibilityControl
. The first user interface element in the items control will be displayed if the boolean value is false, otherwise the second user interface element will be displayed.
That’s it!
Is It Better?
Well, I would not have written this post if I did not think so – at least in some situations. If you prefer the old way, well, that’s fine by me. I can see advantages of both ways. Of course, there is always method of using VisualStates – with its own list of advantages and disadvantages.
Source and Binaries
VisibilityItemsControl binaries reside here: http://nuget.org/packages/visibilitycontrol/
VisibilityItemsControl source resides here: http://visibilitycontrol.codeplex.com/
John Hauck has been developing software professionally since 1981, and focused on Windows-based development since 1988. For the past 17 years John has been working at LECO, a scientific laboratory instrument company, where he manages software development. John also served as the manager of software development at Zenith Data Systems, as the Vice President of software development at TechSmith, as the lead medical records developer at Instrument Makar, as the MSU student who developed the time and attendance system for Dart container, and as the high school kid who wrote the manufacturing control system at Wohlert. John loves the Lord, his wife, their three kids, and sailing on Lake Michigan.