Multiple Storyboards

Silverlight (formerly WPF/E) Developer Issues

Lee Brimelow

I'm trying to create a simple rectangle which has a MouseEnter and MouseLeave event. These events trigger a corresponding storyboard. The first time I roll onto it the MouseEnter storyboard plays fine. When I roll out it runs the other storyboard fine too. But after that it never triggers the enter storyboard again. Below is my XAML and JS..

<Canvas x:Name="home" Canvas.Top="114" Width="144.692" Height="36">
<Canvas.Triggers>
<EventTrigger>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="1" x:Name="in">
<DoubleAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Rectangle.Opacity)" From="0.1" To="1" Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard BeginTime="1" x:Name="out">
<DoubleAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Rectangle.Opacity)" From="1" To="0.1" Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Rectangle Opacity="0.1" Fill="#5DCECECE" Width="144.692" Height="36" StrokeThickness="0.5" x:Name="rectangle" />
<Rectangle Fill="#FF1A1A1A" StrokeThickness="1" Width="0.5" Height="34" Canvas.Left="142.716" Canvas.Top="2"/>
<Rectangle Fill="#FF8A8A8A" StrokeThickness="1" Width="0.5" Height="34" Canvas.Left="143.696" Canvas.Top="2"/>
</Canvas>

--------------------------------------------------------------

function loaded(sender, args)
{
var home = sender.findName("home");
home.mouseEnter = homeEnter"
home.mouseLeave = homeLeave"
}

function homeEnter(sender, args)
{
var wpf = document.getElementById("wpfeControl1");
wpf.findName("in").begin();
}

function homeLeave(sender, args)
{
var wpf2 = document.getElementById("wpfeControl1");
wpf2.findName("out").begin();
}


Top

Re: Silverlight (formerly WPF/E) Developer Issues Multiple Storyboards

ben2004uk

You need to stop the storyboard before you play the next one.

function handleMouseEnter(sender, eventArgs) {
var wpf = document.getElementById("wpfeControl1");
wpf.findName("out").stop();
wpf.findName("in").begin();
}

function handleMouseLeave(sender, eventArgs) {
var wpf = document.getElementById("wpfeControl1");
wpf.findName("in").stop();
wpf.findName("out").begin();
}

Hope this helps,

Ben





Top

Re: Silverlight (formerly WPF/E) Developer Issues Multiple Storyboards

Lee Brimelow

Worked perfectly!

Thanks Ben





Top

Re: Silverlight (formerly WPF/E) Developer Issues Multiple Storyboards

Ed Maia MSFT

Please note that you don't have to specify both a "From" and a "To" value in your example above. This will deal with the cases where the user mouses out in the middle of the transition. Also note that you need to change your JS slightly: you basically need to make sure you begin your new animation before stopping the old one. In future CTPs, you should not be required to Stop the old animation

<Canvas x:Name="home" Canvas.Top="114" Width="144.692" Height="36">
<Canvas.Triggers>
<EventTrigger>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime="1" x:Name="in">
<DoubleAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Rectangle.Opacity)" To="1" Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
<BeginStoryboard>
<Storyboard BeginTime="1" x:Name="out">
<DoubleAnimation Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Rectangle.Opacity)" To="0.1" Duration="0:0:0.15" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<Rectangle Opacity="0.1" Fill="#5DCECECE" Width="144.692" Height="36" StrokeThickness="0.5" x:Name="rectangle" />
<Rectangle Fill="#FF1A1A1A" StrokeThickness="1" Width="0.5" Height="34" Canvas.Left="142.716" Canvas.Top="2"/>
<Rectangle Fill="#FF8A8A8A" StrokeThickness="1" Width="0.5" Height="34" Canvas.Left="143.696" Canvas.Top="2"/>
</Canvas>


--------------------------------------------------------------

function loaded(sender, args)
{
var home = sender.findName("home");
home.mouseEnter = homeEnter"
home.mouseLeave = homeLeave"
}

function homeEnter(sender, args)
{
var wpf = document.getElementById("wpfeControl1");
wpf.findName("in").begin();
wpf.findName("out").stop();
}

function homeLeave(sender, args)
{
var wpf2 = document.getElementById("wpfeControl1");
wpf2.findName("out").begin();
wpf2.findName("in").stop();
}

Just thought I'd share the info out. Our SDK has samples that do this.

Ed Maia
WPF/E Program Manager


Top

Re: Silverlight (formerly WPF/E) Developer Issues Multiple Storyboards

Simon Allardice

Ah, this was driving me insane. I was being puzzled even more as I would get the "completed" event being fired after the right amount of time had elapsed even though the subsequent animation didn't play.

Although Ed - is there any reason the subsequent animations should be started before the previous ones are stopped That seems vaguely counter-intuitive, and it seems to work fine either way (in my examples, at least).


Top