Can't catch Ellipse.MouseEnter in an EventTrigger element

Question

Hi there,

I want to have an animation that starts playing on the MouseEnter event of an Ellipse object.  If I use the following XAML then the animation starts playing immediately:

<Ellipse x:Name="circle" Height="116" Width="116" Canvas.Left="12" Canvas.Top="12" Stretch="Fill">
  <Ellipse.Fill>
    <SolidColorBrush Color="Blue" />
  </Ellipse.Fill>
  <!-- Animations -->
  <Ellipse.Triggers>
    <EventTrigger RoutedEvent="Ellipse.MouseEnter">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation 
                        Storyboard.TargetName="circle" 
                        Storyboard.TargetProperty="Opacity"
                        From="0.0"
                        To="0.5"
                        Duration="0:0:0.5" 
                        AutoReverse="True"
                        RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Ellipse.Triggers>
</Ellipse>

What am I doing wrong?

Note that I am able to get the desired effect through sufficient scripting (i.e. stop the animation on startup, grab the MouseEnter event and there call the Begin() method on the animation) but I'd like to find the XAML equivalent.

Cheers,
John Rayner

Answer 1

You just need to add a BeginTime="1" to the <Storyboard>

This tells it to wait a day before it begins...

Cheers

Ben

Answer 2

That certainly does stop the animation from starting when the XAML loads up, but it doesn't help with getting the animation to start on the MouseEnter event.

[To reiterate: I know I can control the animation through script, but I'm hoping to find a XAML solution]

Answer 3

I don't think it is possible at the moment,  all samples seem to be driven by javascript.

Sorry

 

Answer 4

Hmmm ... all the samples I've seen are driven by JavaScript too, but none of the docs indicates that the XAML approach doesn't work at the moment.  The Microsoft guys are normally quite good at publishing limitations of CTP code.  Does anyone have an official line on this?

Answer 5

WPF/E does not currently support RoutedEvents other than Loaded.  In order to do this, you'll need to write code start the animation on MouseEnter.  First you'll need to change the storyboard to the following:

    <Storyboard x:Name="sb" BeginTime="5:0:0">

Then add handlers for mouse enter and leave on the Ellipse:

  <Ellipse x:Name="circle" Height="116" Width="116" Canvas.Left="12" Canvas.Top="12" Stretch="Fill" MouseEnter="javascript:beginAnimation" MouseLeave="javascript:endAnimation">

 And finally add the event handlers to your .html file:

      function beginAnimation(sender) {
        var sb = sender.findName("sb");
        if (sb) { sb.begin(); }
      }
     
      function endAnimation(sender) {
        var sb = sender.findName("sb");
        if (sb) { sb.stop(); }
      }

Joe