CODEWITHSUNDEEP
wpfxamlmvvm
SNS
SNS

Reputation: 405

How to hide/show Stack panel in wpf mvvm

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?

Upvotes: 10

Views: 19886

Answers (3)

Marc
Marc

Reputation: 13184

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}}" />

Upvotes: 19

Omri Btian
Omri Btian

Reputation: 6547

Say you have a boolean property in your ViewModel that determines whether or not to show the control

public bool DisplayControl { get; set; }

Bind the visibiilty of your StackPanel using a BooleanToVisibiltyConverter

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

And your control:

<StackPanel Visibility="{Binding DisplayControl, Converter={StaticResource visibilityConverter}}"/>

Upvotes: 1

Thomas Levesque
Thomas Levesque

Reputation: 292405

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");
    }
}

Upvotes: 6

Related Questions