Some instructions on how to bind the visibility of a XAML button control to a boolean value in a ViewModel class.
1. Create a new WPF application
2. Add the View Model class
Right click your project folder and select Add > New Item > Class.
Name your class MainWindowViewModel.cs:
In your ViewModel class include the property to get the visibility setting.
For reasons of simplicity this simply returns a value of true for now, but in your own implementations, feel free to make the getters and setters do what you like.
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Visibility { public class MainWindowViewModel { public bool ButtonVisibility { get { return true; } } } }
3. Update your MainWindow.xaml code to do the following:
– add a button
– set the DataContext property
– declare and use a BooleanToVisibilityConverter
<Window x:Class="Visibility.MainWindow" 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" mc:Ignorable="d" xmlns:local="clr-namespace:Visibility" Title="MainWindow" Height="150" Width="225"> <Window.DataContext> <local:MainWindowViewModel /> </Window.DataContext> <Window.Resources> <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" /> </Window.Resources> <Grid> <Button Content="Button" Visibility="{Binding Path=ButtonVisibility, Converter={StaticResource BooleanToVisibilityConverter} }" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10,10,0,0" Width="75"> </Button> </Grid> </Window>
4. Run the example.
With the ButtonVisibility property set to return true the XAML button control is made visible when running the program as follows:
And when the ButtonVisibility property is set to false:
public class MainWindowViewModel { public bool ButtonVisibility { get { return false; } } }
.. the button becomes hidden as shown: