Click here to Skip to main content
Click here to Skip to main content

VisiblityControl – An Alternative to Converters

, 15 Oct 2012
Rate this:
Please Sign up or sign in to vote.
If you are interested in exploring alternatives to the BooleanToVisibiltyConverter, then this post is for you.

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

Untitled

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:

  1. Open your application in Visual Studio
  2. Select Manage NuGet Packages from the Project menu.
  3. 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/

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

John Michael Hauck
Software Developer (Senior) LECO Corporation
United States United States
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.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 15 Oct 2012
Article Copyright 2012 by John Michael Hauck
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid