Skip to main content
Home Forums Silverlight Programming Programming with JavaScript AG_E_RUNTIME_SETVALUE : Storyboard.TargetName
7 replies. Latest Post by jhofker on June 2, 2007.
(0)
RussD
Member
16 points
5 Posts
05-25-2007 5:45 PM |
I have a MouseOver event that calls this and a bunch of squares that have their color set dynamically. On the first MouseOver it works fine, but on the next one it bombs.Any help?
// var startNum = sender.name.lastIndexOf('r');// var endNum = sender.name.length;// var lbgNum = sender.name.substring(startNum +1, endNum);// // Retrieve a reference to the control.// var hostControl = sender.getHost();
// // Retrieve a reference to the specified object.// var storyboard = hostControl.content.findName('Rect_Enter');// var linearBrush = hostControl.content.findName('lgb'+lbgNum);// // if (storyboard)// {// if(storyboard["Storyboard.TargetName"] != linearBrush.Name)// {// storyboard["Storyboard.TargetName"] = linearBrush.Name;// storyboard.begin();// }// }
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Loaded="onLoaded"> <Canvas.Resources> <Storyboard x:Name="Rect_Enter"> <DoubleAnimation BeginTime="0" Storyboard.TargetProperty="Opacity" From="0" To="0.5" Duration="0:0:0.5" /> </Storyboard> <Storyboard x:Name="Rect_Leave"> <DoubleAnimation BeginTime="0" Storyboard.TargetProperty="Opacity" From="0.5" To="0" Duration="0:0:0.5" /> </Storyboard> </Canvas.Resources> <Canvas Canvas.Left="0" Canvas.Top="0" Height="134" Width="206" Name="c0" Loaded="onLoaded"> <Rectangle Height="134" Width="206" Name="r0" StrokeThickness="1" Stroke="White" MouseEnter="onMouseEnter" MouseLeave="onMouseLeave" RadiusX="5.0" RadiusY="5.0"> <Rectangle.Fill> <LinearGradientBrush x:Name="lgb0" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#8470ff" Offset="0" /> <GradientStop Color="#C3C3FF" Offset=".5" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Name="tb0" Text="e mails" Visibility="Hidden" /> </Canvas> <Canvas Canvas.Left="206" Canvas.Top="0" Height="134" Width="143" Name="c1" Loaded="onLoaded"> <Rectangle Height="134" Width="143" Name="r1" StrokeThickness="1" Stroke="White" MouseEnter="onMouseEnter" MouseLeave="onMouseLeave" RadiusX="5.0" RadiusY="5.0"> <Rectangle.Fill> <LinearGradientBrush x:Name="lgb1" StartPoint="0.5,0" EndPoint="0.5,1"> <GradientStop Color="#8470ff" Offset="0" /> <GradientStop Color="#BEBEFF" Offset=".5" /> </LinearGradientBrush> </Rectangle.Fill> </Rectangle> <TextBlock Name="tb1" Text="address list mailing book addresses" Visibility="Hidden" /> </Canvas>
WynApse
Star
8456 points
342 Posts
05-26-2007 12:48 AM |
Russ...
I looked at this earlier this afternoon, and was wondering what the MouseLeave code did...
but just now I looked at it again, and I'm wondering if the issue might be the BeginTime=0?
since you're kicking that off with a message, I'm wondering if that's needed?
Just a thought...
-Dave
jhofker
10 points
05-31-2007 12:36 PM |
I'm having the same problem that Russ is having. However, my storyboards don't have a begintime - they only have a duration.
function cnvInfo_MouseEnter(sender, args) { var sb = sender.findName("MouseEnter"); sb["Storyboard.TargetName"] = "elInfo"; sb.begin(); }
<Storyboard x:Name="MouseLeave" Storyboard.TargetProperty="(Canvas.Left)"> <DoubleAnimation Duration="00:00:00.2" To="60"/></Storyboard>
I haven't extracted out a lot of the stuff, as I'm just trying this out, but the mouseover (err, mouseenter) only works once, and then breaks. If a have a mouseleave set as well, it breaks the first time and throws up two little alerts.
What are we doing wrong?
05-31-2007 2:01 PM |
I remembered something from the 'old' WPF/E days... and put together a really simple html/xml pair.
Here's the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <title>Single Storyboard Test</title> <script src="Silverlight.js" type="text/javascript"></script></head>
<script type="text/javascript">var fDone = 1;
function MoveIt(sender, args){ if (fDone == 1) { fDone = 0; var sWhich = sender.Name.toString(); sender.findName("MoveIt")["Storyboard.TargetName"]=sWhich; sender.findName("MoveIt").Begin(); }}
function MoveDone(sender, args){ sender.findName("MoveIt").stop(); fDone = 1;}</script>
<body bgcolor="white">
Click on one of the two balls to animate it. When it's complete, click either to repeat.
<br /> <center> <div id="Ag1Host" style="background:#FFFFFF"> <script type="text/javascript"> var pe1 = document.getElementById("Ag1Host"); </script> </div> </center>
<script>Sys.Silverlight.createObjectEx({source: 'SingleStoryBoardTest.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'100', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});</script> <br />
</body></html>
and the xaml:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse x:Name="BlueEllipse" Height="20" Width="20" Canvas.Left="0" Canvas.Top="10" MouseLeftButtonUp="MoveIt" Fill="Blue" />
<Ellipse x:Name="RedEllipse" Height="20" Width="20" Canvas.Left="0" Canvas.Top="50" MouseLeftButtonUp="MoveIt" Fill="Red" />
<Canvas> <Canvas.Resources> <Storyboard x:Name="MoveIt" Completed="MoveDone"> <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="300" Duration="0:0:1" /> </Storyboard> </Canvas.Resources> </Canvas>
</Canvas>
Notice that in the Completed script, I 'stop' the animation, even though we all know it is stopped anyway... that's the sleight of hand that makes you be able to set the target again.
I added an additional flag to avoid crashes if you clicked the other ball while the one was still moving.
05-31-2007 8:32 PM |
Ah, so really, we need to either just stop the animation first, or we need to check if it's going and then stop it.
Thanks for the tip! I'll check it out tomorrow.
06-01-2007 6:38 PM |
Well, that kinda works! I just added a .stop() call before I set the targetname. Unfortunately, this leads to some choppiness in the animations at times.
I'll try the Completed event later - I just wanted to see if stopping the animation would keep it from breaking all of the time.
Edit: I tried the Completed event. Unfortunately, calling .stop() on the storyboard when it completes causes whatever end result I had planned to go away.
06-01-2007 7:17 PM |
That sucks, and the thought had crossed my mind that depending upon the animation, you may or may not want that to happen.
Given that ... the only way I can see to retain the end point is to set it in the Completed function probably after calling stop();
06-02-2007 4:19 PM |
Yeah, that's what I figured. I didn't want to do that, though, because it seemed like it should be unnecessary.
I feel like I'm writing an entire button class. :-/
AG_E_RUNTIME_SETVALUE : Storyboard.TargetName