A short post on how to show or hide a control in WPF by using a BooleanToVisibilityConverter.
As a minimalist example, start by creating a new WPF project from Visual Studio:
So that our main window XAML looks as follows:
<Window x:Class="ShowHideWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="237" Width="365">
<Grid>
</Grid>
</Window>
As an example control that we wish to show or hide, modify the xaml to include a button, as follows:
<Window x:Class="ShowHideWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="237" Width="365">
<Grid>
<Button Content="Button"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"
Width="75"/>
</Grid>
</Window>
When running the program a button control is now visible:
As in a previous posting, I will use the MVVM pattern as a means of abstracting the view’s state and behaviour. Add a ViewModel class, as used in the Model-View ViewModel pattern.
In Visual Studio add a new class representing the ViewModel for our main window XAML and call it MainWindowViewModel.cs:
The ViewModel, which as you can see here is very basic, is simply used to demonstrate how the Button control can be set to visible or invisible according to the boolean value of the ShowButton property contained in the ViewModel.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace ShowHideWpf
{
public class MainWindowViewModel
{
private bool _showButton;
public MainWindowViewModel()
{
_showButton = false;
}
public bool ShowButton
{
get { return _showButton; }
}
}
}
I also modify the original XAML to add the data bindings and the BooleanToVisibilityConverter resource needed to implement this:
<Window x:Class="ShowHideWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:VM="clr-namespace:ShowHideWpf"
Title="MainWindow"
Height="237"
Width="365">
<Window.DataContext>
<VM:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
<BooleanToVisibilityConverter x:Key="Converter" />
</Window.Resources>
<Grid>
<Button Visibility="{Binding Path=ShowButton, Converter={StaticResource Converter}}"
Content="Button"
HorizontalAlignment="Left"
Margin="10,10,0,0"
VerticalAlignment="Top"
Width="75" />
</Grid>
</Window>
Given that we have set the ShowButton to boolean false in the ViewModel it is no surprise that the button now becomes invisible when we run the program:
If we now go and restore the ShowButton to boolean true, the button becomes visible again:
public MainWindowViewModel()
{
_showButton = true;
}
This concludes this tutorial on setting the visibility of WPF controls.
Example Visual Studio project available from the following link:
