I've posted the CreateFromXAML and Timer sample from my Mix talk.  You can run the sample here and get the source here.  The sample uses the downloader component to retrieve a ZIP archive that contains a set of XAML files.  To do this, in the onLoad event, I kick-off a download of the ZIP archive:


  function onLoad(sender, args, root) {       

    // Download big file sender, "assets.zip"

    download(sender, "assets.zip");



  function download(host, file) {

    var dl = host.createObject("downloader");

    dl.addEventListener("completed", downloadComplete);

    dl.open("get", file, true);




This download is asynchronous and calls the downloadComplete event when finished.  In this event I then use CreateFromXAML to instance the XAML files and then add them to the main Canvas.  I also add an animation timer but talk about that in more detail in the next paragraph:


  function downloadComplete(sender, args) {


    var main = sender.findName("main");


    cfx(main, sender.getResponseText("Camera.xaml"));

    cfx(main, sender.getResponseText("Coffee.xaml"));

    cfx(main, sender.getResponseText("Glasses.xaml"));

    cfx(main, sender.getResponseText("Grass3.xaml"));

    cfx(main, sender.getResponseText("Landscape.xaml"));

    cfx(main, sender.getResponseText("Popcan.xaml"));


    // Show first

    main.children.getItem($idx).visibility = "Visible";


    // Start timer

    var timer = sender.findName("timer");

    timer.addEventListener("completed", timerCompleted);




Finally, I setup an animation timer to cycle through the newly created instances.  The timer is creating by defining a named "dummy" animation in the main XAML file.  The key part here is the “Duration” – this defines the amount of time before the timer fires it’s completed event (e.g. times out).  I need to target some object for this animation and in this case I created a dummy Rectangle named “_timer” (shown below).  In the sample below, I’ve set the Duration to 2 seconds:


  <!-- Animation Timer -->


    <Storyboard x:Name="timer">

      <DoubleAnimation Duration="00:00:2"/>




For the animation target, I createda dummy Rectangle named "_timer" and hide it from the scene by setting it's Opacity to 0:


  <Rectangle x:Name="_timer" Opacity="0"/>


To start the timer in JavaScript, I use FindName to retrieve the Storyboard and call Begin().  After 2 seconds (the duration), this will fire the “completed” event (timerCompleted):


    // Start timer

    var timer = sender.findName("timer");

    timer.addEventListener("completed", timerCompleted);



In the timerCompleted event, I do the work to cycle through the previously added instances and then re-start the timer:


    function timerCompleted(sender, args) {

      var main = sender.findName("main");


      // Hide current

      main.children.getItem($idx).visibility = "Hidden";



      if ($idx >= main.children.count) {

        $idx = 0;



      // Show next

      main.children.getItem($idx).visibility = "Visible";


      // Restart the timer




Here's a less than fascinating screen shot:


CreateFromXAML sample