How to hide/show Stack panel in wpf mvvm

Question

In a MVVM scenario, I want to show/hide a user control based on a hyper link click or image click. How can this be achieved in XAML?

Answer 1

Use a toggle button and bind the visibility of your UserControl using a BooleanToVisibilityConverter:

Define a resource:

<BooleanToVisibilityConverter x:Key="BoolToVisibility" />

The toggle button:

<ToggleButton x:Name="VisibilityToggle>
    <Image Source="..." />
</ToggleButton>

The user control:

<MyControl Visibility="{Binding IsChecked, ElementName=VisibilityToggle, Converter={StaticResource BoolToVisibility}}" />

Answer 2

Bind the Visibility property to a bool property of the ViewModel, using a BooleanToVisibilityConverter

<Window.Resources>
    <BooleanToVisibilityConverter x:Key="visibilityConverter" />
</Window.Resources>

...

<MyUserControl Visibility="{Binding IsMyUserControlVisible, Converter={StaticResource visibilityConverter}}" />

ViewModel:

private bool _isMyUserControlVisible;
public bool IsMyUserControlVisible
{
    get { return _isMyUserControlVisible; }
    set
    {
        _isMyUserControlVisible = value;
        OnPropertyChanged("IsMyUserControlVisible");
    }
}