Change MouseLeave animation when Grid is clicked - wpf

Question

In my WPF appliction, I have a partially visible grid at the bottom of the visible space. When you mouseover it, it slides up and everything in the grid is visible. When the mouse leaves the grid, it slides back down. There are Combo and TextBoxes in the grid that will contain info and be able to be updated by the user.
How do I make it so that if I click anywhere in the grid, the MouseLeave animation no longer goes off (the grid stays up even you if your mouse leaves)?
I have implemented my animation 2 different ways in an attempt to get it to behave the way I want, but no luck so far.
Implementation 1:
`<Grid x:Name="PopupAnimation" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="30">
<Grid.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard Name="MouseOn">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="30" To="90" Duration="0:0:.15"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<BeginStoryboard Name="MouseOff">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="90" To="30" Duration="0:0:0.15"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeftButtonDown">
<StopStoryboard BeginStoryboardName="MouseOff" />
</EventTrigger>
</Grid.Triggers>
`
Implementation 2:
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Name="MouseOn">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="30" To="90" Duration="0:0:.15"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Name="MouseOff">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Height" From="90" To="30" Duration="0:0:0.15"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
Are either of these heading down the right road? How do I disable (and enable) an animation?

Answer 1

How do I make it so that if I click anywhere in the grid, the MouseLeave animation no longer goes off (the grid stays up even you if your mouse leaves)?
Don't execute the up and down movement by style, instead subscribe to the all events in question, and with the events of mouse enter and mouse leave run the storyboards in code-behind.
Then in the final event, in code behind grid click event, set a Boolean flag which will be read by the mouse leave event and allow it to not execute the storyboard.
Here is code I have to move a window in/out in codebehind to give you an idea about the storyboards:
if (moveRight)
{
(Resources["MoveToOpen"] as Storyboard)?.Begin(this, false);
(Resources["FlipArrowClose"] as Storyboard)?.Begin(this, false);
}
else
{
if (closeWindow == false)
{
(Resources["MoveToClose"] as Storyboard)?.Begin(this, false);
(Resources["FlipArrowOpen"] as Storyboard)?.Begin(this, false);
}
}