WPF c# XAML ismouseover animation

137 views Asked by At

In my project when program starts polygon is moving on set path What should I change to stop polygon moving, when the mouse cursor on it (when mouse cursor out of polygon, polygon must continue it's moving)

<Window x:Class="aqua3.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:aqua3"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <PathGeometry x:Key="pathg">
        <PathFigure IsClosed="True">
            <PolyLineSegment Points="0,0 200,0 200,80 0,80" />
        </PathFigure>
    </PathGeometry>
</Window.Resources>
<Grid Background="LightBlue">
    <Canvas Margin="10" Background="LightBlue">
        <Path Stroke="Red" Data="{StaticResource pathg}" Canvas.Top="10" Canvas.Left="10" />
        <Polygon Name="polygon1" Stroke="Yellow" Fill="Yellow"  Points="100,150 120,140 120,120 165,150 120,180 120,160 ">
            <Polygon.Triggers>
                <EventTrigger RoutedEvent="Window.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Top)"
                                   Duration="0:0:15" RepeatBehavior="Forever"
                                   PathGeometry="{StaticResource pathg}" Source="Y" >
                            </DoubleAnimationUsingPath>
                            <DoubleAnimationUsingPath Storyboard.TargetProperty="(Canvas.Left)"
                                   Duration="0:0:15" RepeatBehavior="Forever"
                                   PathGeometry="{StaticResource pathg}" Source="X" >
                            </DoubleAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Polygon.Triggers>
        </Polygon>
    </Canvas>
</Grid>

1

There are 1 answers

0
AnjumSKhan On
  1. Assign a name to your BeginStoryboard

    <BeginStoryboard x:Name="Move">
    
  2. To pause, add this

    <EventTrigger RoutedEvent="MouseEnter">
         <PauseStoryboard BeginStoryboardName="Move"/>
    </EventTrigger>
    
  3. To resume, add this

    <EventTrigger RoutedEvent="MouseLeave">
         <ResumeStoryboard BeginStoryboardName="Move"/>
    </EventTrigger>