Dynamic creation of path and corresponding animation RSS

• 

  Nelsormensch

  Member

  18 Points

  10 Posts

  • Reply
  •  

  Dynamic creation of path and corresponding animation

  Oct 16, 2007 06:28 PM | LINK

  Hi all,

  I'm trying to figure out a way to dynamically create a path element and a corresponding appear animation for it.  The below code will properly create the path element, but creating the animation throws an error from createfromxaml (strangely, only in IE, not in Firefox).  Any insights into what's wrong and how I can correct it?  Thanks in advance.
   

  Code follows:

   

  //var name is a string defined above and has been confirmed as correct 

  //var rootElement is also defined above and correct 

  var xamlString = '<Path xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="' + name + '" Width="9" Height="9" Stretch="Fill" StrokeThickness="1.33319" StrokeLineJoin="Round" Stroke="#FFD69645" Data="F1 M 5.32994,0.666565C 7.40099,0.666565 9.07994,2.34549 9.07994,4.41656C 9.07994,6.48761 7.40099,8.16656 5.32994,8.16656C 3.2589,8.16656 1.57994,6.48761 1.57994,4.41656C 1.57994,2.34549 3.2589,0.666565 5.32994,0.666565 Z " Canvas.Top="0" Canvas.Left="0"><Path.Fill><LinearGradientBrush StartPoint="0.498528,0.0725177" EndPoint="0.498528,0.93338"><GradientStop Color="#FFD87F0E" Offset="0"/><GradientStop Color="#FF9D5C0A" Offset="0.995763"/></LinearGradientBrush></Path.Fill></Path>';
         
  var newDot = slHost.content.createFromXaml(xamlString);
  rootElement.findName("map").children.add(newDot);
  newDot = rootElement.findName(name);
  

  //newX/Y defined above            
  newDot["Canvas.Left"] = newX;
  newDot["Canvas.Top"] = newY;
            
  var newDotAnimationString = '<Canvas><BeginStoryboard><Storyboard xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="' + name + 'Appear"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="' + name + '" Storyboard.TargetProperty="(UIElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/><SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></Canvas>';
   

  var newDotAnimation = slHost.content.createFromXaml(newDotAnimationString);
  rootElement.children.add(newDotAnimation);
     
  var dotAppearAnimation = rootElement.findName(name + "Appear");
  dotAppearAnimation.Begin();

  JavaScript Animation createFromXaml

• 

  swirlingmass

  Participant

  1358 Points

  385 Posts

  • Reply
  •  

  Re: Dynamic creation of path and corresponding animation

  Oct 16, 2007 08:15 PM | LINK

  You need to throw in <Canvas.Triggers> and <EventTrigger> tags:

  <Canvas><Canvas.Triggers><EventTrigger><BeginStoryboard><Storyboard.......</Storyboard></BeginStoryboard></EventTrigger></Canvas.Triggers></Canvas>

• 

  Nelsormensch

  Member

  18 Points

  10 Posts

  • Reply
  •  

  Re: Dynamic creation of path and corresponding animation

  Oct 16, 2007 08:30 PM | LINK

  Gah, that's not exactly obvious.  It did work though.  Thanks!