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.

Answer 3

You can do it in pure xaml using EventTrigger.

<Window x:Class="WpfApp3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<StackPanel Width="64" VerticalAlignment="Center">
    <Grid x:Name="grd" Background="Black" Height="48"/>
    <Button Height="48" Content="Hide Grid">
        <Button.Triggers>
            <EventTrigger RoutedEvent="Button.Click">
                <BeginStoryboard>
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="grd" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Button.Triggers>
    </Button>
</StackPanel>