Fade in AND fade out on using WPF animations

Question

I need something that does this.

1: click a toolbar button, fade in a panel by the button. 2: if you click the toolbar button again while the panel is displayed - it should fade out at the same duration 3: if you mouse out of the panel a couple seconds will pass and it will hide by itself

I have it working where the panel shows/hides okay - if I add a show animation - it fades in as expected, however fading the panel back out again is not working as expected.

I found a couple examples - one using an ExitAction - which does not work and one using a second trigger that is run when the IsVisible property changes to false (this also does not work right).

Here is a snippet of my XAML for implementing the fade in AND fade out (fade out happens when you mouse out of the grid - and only after continuing to display itself for a few seconds before going away).

`<Grid Visibility="{Binding Path=DriverFilterPanel.IsDisplayed, Converter={StaticResource BooleanToVisibilityConverter}}" Panel.ZIndex="10" Margin="10 20 0 0" Grid.ColumnSpan="2" Width="610" Height="120" VerticalAlignment="Top" HorizontalAlignment="Left">
    <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=DriverFilterPanel.IsDisplayed}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.35" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.35" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>
    <Border Grid.ColumnSpan="2" Grid.Row="1" Style="{StaticResource PDSDialog}" Padding="10">
        <ContentControl Grid.Row="1" Name="DriverFilterPanel"/>
    </Border>
</Grid>`

And just to show the other thing I tried to do - this does not work either for whatever reason - in my head - the property is getting set to false - it should then run the other DataTrigger - but nothing... (see below)

      <Grid Visibility="{Binding Path=DriverFilterPanel.IsDisplayed, Converter={StaticResource BooleanToVisibilityConverter}}" Panel.ZIndex="10" Margin="10 20 0 0" Grid.ColumnSpan="2" Width="610" Height="120" VerticalAlignment="Top" HorizontalAlignment="Left">
            <Grid.Style>
                <Style TargetType="{x:Type Grid}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Path=DriverFilterPanel.IsDisplayed}" Value="True">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" Duration="0:0:0.35" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Path=DriverFilterPanel.IsDisplayed}" Value="False">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetProperty="Opactiy" From="1.0" To="0.0" Duration="0:0:0.35" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <Border Grid.ColumnSpan="2" Grid.Row="1" Style="{StaticResource PDSDialog}" Padding="10">
                <ContentControl Grid.Row="1" Name="DriverFilterPanel"/>
            </Border>
        </Grid>

So the process is this - click a button - Panel fades in at .35 seconds. If you click the button again - it should fade out, except it just disappears as if no animation is there) - Another way it hides is if you mouse off and stay off for a couple seconds (I have a dispatcher timer that responds to the mouse out event after a couple seconds and from a boolean viewmodel property.

I already know I can probably use event triggers on my toolbar button to fade-in/fade-out the panel by clicking the toolbar button - but I am using a dispatchertimer in my codebehind to track how long someone is outside the bounds of the panel before hiding itself after a couple seconds - so I am setting the IsDisplayed property to false in the viewmodel which causes it to disappear without an animation - but because of the first one - this one refuses to work.

What am I (a WPF animation greenhorn) doing wrong here?