0

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.

Improve this question
2
  • How to: Trigger an Animation When a Property Value Changes Commented May 29, 2024 at 17:13
  • Changing the start of the animation is not difficult. You just need to replace the Loaded launch event with MouseEnter. But stopping will be more difficult. The event when the cursor leaves the grid is MouseLeave. In XAML, you can stop the animation immediately. But you need to wait for the current loop to complete. I think you can’t do without Sharp code in this case. Commented May 30, 2024 at 4:28
Related questions
14
Where to find XAML namespace d="http://schemas.microsoft.com/expression/blend/2008" mapping library?
5
Could not load type 'System.Windows.Controls.Primitives.MultiSelector' from assembly PresentationFramework
2
Text orientation
Load 5 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.