Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The reason is that you specify a <code>From</code> on your <code>DoubleAnimation</code>s.</p> <p>If the radius is anything less than 100 when <code>MouseLeave</code> happens, the <code>From</code> property will make it jump up to 100 and likely cause a <code>MouseEnter</code>. Then, you have two competing animations and the mouse events go crazy as the ellipse radius flickers underneath the cursor.</p> <p>The solution is to just omit the <code>From</code> properties, this will cause the animation to start from wherever the current radius is:</p> <pre><code>&lt;Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1"&gt; &lt;Canvas&gt; &lt;Path Margin="15,15,15,15" Fill="Blue"&gt; &lt;Path.Data&gt; &lt;!-- Describes an ellipse. --&gt; &lt;EllipseGeometry x:Name="MyAnimatedEllipseGeometry" Center="200,100" RadiusX="15" RadiusY="15"/&gt; &lt;/Path.Data&gt; &lt;Path.Triggers&gt; &lt;EventTrigger RoutedEvent="UIElement.MouseEnter"&gt; &lt;BeginStoryboard&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="100"/&gt; &lt;DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="100"/&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/EventTrigger&gt; &lt;EventTrigger RoutedEvent="UIElement.MouseLeave"&gt; &lt;BeginStoryboard&gt; &lt;Storyboard&gt; &lt;DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusX" To="15"/&gt; &lt;DoubleAnimation Storyboard.TargetName="MyAnimatedEllipseGeometry" Duration="0:0:.5" Storyboard.TargetProperty="RadiusY" To="15"/&gt; &lt;/Storyboard&gt; &lt;/BeginStoryboard&gt; &lt;/EventTrigger&gt; &lt;/Path.Triggers&gt; &lt;/Path&gt; &lt;/Canvas&gt; &lt;/Page&gt; </code></pre> <p>On an unrelated note, when you set <code>Storyboard.Duration</code>, it won't speed up your child animations, it will just end the <code>Storyboard</code> prematurely. You really want to set <code>Duration</code> on your child <code>DoubleAnimation</code>s - I've modified the XAML above to do this.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload