In WPF, how do I set a button's click event to change a grid's visibility?

Question

I'm trying to set a button's event to change a grid's visibility using just XAML. I'm pretty sure I should be using an EventTrigger, but I couldn't get that to work so my most recent attempt is to create a DataTrigger that is bound to a field in the view-model:

<Style x:Key="PersonalInfoGridStyle" TargetType="{x:Type Grid}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=PersonalInfoGridVisibility}" Value="Collapsed">
            <Setter Property="Grid.Visibility" Value="Collapsed"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

The above code isn't working, but that matters less to me that achieving the whole thing in just XAML (without using the view-model or code-behind).

Can someone explain how I should go about this or if it's even possible? :) THANKS AHEAD

Answer 1

Can you use a toggle button?

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <BooleanToVisibilityConverter x:Key="boolConverter" />
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ToggleButton Content="Click Me" x:Name="toggleMe" Grid.Row="0" />
        <Grid Grid.Row="1" Background="Black" Visibility="{Binding ElementName=toggleMe, Path=IsChecked, Converter={StaticResource boolConverter}}">

        </Grid>
    </Grid>
</Window>

Answer 2

Okay I figured out how I'm going to do this (using the view-model). I created an object in the view-model of type Visibility (NOT STRING), then I used the Binding attribute in the Grid to bind the Visibility attribute in the grid to the Visibility object in the view-model.

Now all I needed to do was have the button's event change the visibility object (ONE LINE!) to visible like so:

<Grid Visibility="{Binding Path=GridVisibility">
    [content here]
</Grid>

And in the view model:

private Visibility _gridVisibility = Visibility.Visible;
public Visibility GridVisibility
{
    get
    {
        return _gridVisibility;
    }
}

Use your MVVM method to set the property yourself (I left that out purposefully).

And finally just bind you button's click event to a method that simply changes the value of GridVisibility to Visibility.Hidden or Visibility.Collapsed.