Question

I’m doing a simple animation that works as expected until i put a border around my grid. As soon as i do this then the animation flickers when i mouse click the frame. I’m trying to achieve a menu that “slides” into view. I have included my code below. Its almost like somehow my mouse click is causing an infinite animation loop.

<Border  BorderBrush="YellowGreen" CornerRadius="8" BorderThickness="10" Background="Black">
        <Grid MouseLeftButtonDown="DragWindow">
            <Grid.Resources>
                    <Style TargetType="Frame" x:Key="GrowingFrameStyle">
                        <Setter Property="Foreground" Value="#505050"/>
                        <Setter Property="Background" Value="Black" />
                        <Setter Property="Height" Value="20" />
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="LightGray" />
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="SteelBlue" />
                                            <DoubleAnimation Storyboard.TargetProperty="Height" From="20" To="50" Duration="0:0:.3" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Foreground.Color" To="#505050" />
                                            <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="Background.Color" To="Black" />
                                            <DoubleAnimation Storyboard.TargetProperty="Height" From="50" To="20" Duration="0:0:.3" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
            </Grid.Resources>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="50"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="20"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Label Grid.Row="1" Grid.ColumnSpan="2" Background="Black"/>
            <Frame Grid.RowSpan="2" Grid.ColumnSpan="2" Background="SlateBlue" VerticalAlignment="Top" Style="{StaticResource GrowingFrameStyle}"/>        
        </Grid>
    </Border>

Only method in the code behind

private void DragWindow(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
  DragMove();
}

Answer 1

It’s caused by clicking on an expanded area of the Frame.

The MouseUp event seems to be firing a MouseLeave/MouseEnter event. The MouseLeave is trigging the animation to shrink the frame, which queues a Shrink storyboard event, and the MouseEnter is queuing the animation to expand the frame, which queues an Expand storyboard event. By shrinking/expanding the frame, the MouseEnter/MouseLeave get fired again and the animations both get run again. These two keep firing endlessly until you move the mouse out of the magical area that is only occupied when the Frame is expanded.

You can view the delay in slow-motion by adding BeginTime="00:00:02" to your Storyboards to add a 2-second delay, and you can verify the MouseEnter/MouseLeave events by attaching a method which writes a line to output in the MouseEnter/MouseLeave events of the Frame.

As for fixing it, I’m not sure the best way to do that. Perhaps try using the MouseEnter/MouseLeave events to trigger the events manually after a 1-second delay providing the event should still process.

For example, if the MouseUp event triggers MouseLeave and MouseEnter events, then the MouseLeave should queue the collapse animation, but delay a second and check if the Mouse is actually over the object a second later. If not, cancel the collapse event. This would cause the MouseLeave event not to fire its animation, which means it won’t queue animations endlessly until the mouse is moved off the expanded Frame’s area.