I have am writing a xaml project with an ellipse drawn inside a grid. Currently, I am animating the length and width of the ellipse repeatedly once the grid is loaded. I want to make the following changes:

I want the animation to begin and repeat itself while the mouse is over the grid. When the mouse leaves the grid, I want the animation to complete its current cycle and then stop when finished.

Here is the repeat-forever version of my code:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Woo_Loo"
        mc:Ignorable="d"
        Title="Main Window" Height="115" Width="115" Background="Transparent" WindowStyle="None">
    <Grid>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="Elips" TargetProperty="Width">
                        <DoubleAnimation From="100" To="0" Duration="0:0:0.25"
                            AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimation.EasingFunction>
                                    <SineEase EasingMode="EaseIn"/>
                                </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard TargetName="Elips" TargetProperty="Height">
                        <DoubleAnimation From="0" To="100" Duration="0:0:0.25"
                            AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimation.EasingFunction>
                                    <SineEase EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <Ellipse Name="Elips" StrokeThickness="10" Stroke="Red" Fill="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="0" />
    </Grid>
</Window>

I’m not sure whether to use event triggers to modify the repeatbehavior properties, or somehow use a mouseover property to change the repeatbehavior property, or letting the repeatbehavior to be conditional, or what. I’m a beginner at xaml. I want to avoid using code-behind if possible.