After you taste Data Templates in Silverlight and WPF, you won’t want to go back to your old way of building user interfaces. I mean seriously, do you like the idea of building a user interface by custom drawing a list box using various owner-drawn techniques like exist in Win32? I certainly don’t. Admittedly, there’s a certain amount of excitement and energy when the list box finally looks the way you wanted, after 20 hours of tweaking! :)

So, I was experimenting with some HTML and JavaScript the other day and really wanted something like a Data Template. Nothing as powerful — but just the concept that if I just bring up the data, why can’t I easily specify the look and feel with a reusable block of HTML-like syntax?

Now, certainly I could have used one of the many ASP.NET techniques for creating a user interface template on the server — building all of the HTML and sending it to the client. That’s so old school! I wanted the server to send just the framework/shell, and send the data independently — unformatted, so that it could be both programmatically accessed and converted to a user interface. I could have used XSLT I suppose, if I again wanted to learn it, and I was comfortable retrieving data from the web server as XML. However, I didn’t want to relearn XSLT and I wanted JSON objects from the web server.

My templates were born.

There are a few pieces to creating a working system. First, a template file is needed:

<div style=""font-size: 80%">
  <h1>
    <%{Path:"Name"} %>    
  </h1>
  <div style="margin-left:20px;">
    <%{Path:"Folders", Template:"Folder"} %>  
  </div>  
  <ol>
    <%{Path:"Files", Template:"File"} %>
  </ol>
</div>

Simple enough. The syntax should be roughly familiar to those of you with Silverlight or WPF data binding experience. Within the <% and %> a JSON object is constructed that maps to the property (name) and any sub-templates that should be applied to a property (for endless and potentially recursive fun!).

These files, by default are placed in the App_Data folder in ASP.NET and are named TEMPLATENAME.template. By setting the default file type handler for these files to HTML, you can even edit them with Intellisense!

Then, to power the template functionality, the templates must be downloaded and the JavaScript object must be downloaded:

<asp:ScriptManager ID="ScriptManager1" runat="server">   
    <Scripts>
        <asp:ScriptReference Path="~/DataTemplate.js" />
        <asp:ScriptReference Path="~/DataTemplateDefinition.ashx?ID=folder,file" />
    </Scripts>
</asp:ScriptManager>

The second ScriptReference automatically downloads a JavaScript file containing the code necessary to construct the data templates.  By default, they’re automatically set to be cached (you could change the code as needed).

Finally, to construct the HTML…

var templating = new WiredPrairie.Data.Template();                        
var output = templating.toHTML(sampleData, "Folder");

var dd = $get("dyndata");
dd.innerHTML = output;

The sample web page has an empty DIV element with an ID of dyndata — although it could be anything you want.

    <div id="dyndata">
    
    </div>

The code has been tested in Firefox 3.0 and IE 7. It requires the Microsoft ASP.NET Ajax JavaScript libraries.

Download here.

I’ve discussed how to locate the UIElement associated with an animation’s Completed event a while back for WPF.

Here’s an update for how I do the same thing in Silverlight 2.0. The technique could be used in WPF with a few minor tweaks. I like this method rather than relying on a Storyboard (as I have better control over the completion of individual animations this way). Here’s a page on MSDN that describes various ways to work with animations programmatically in Silverlight.

The Completed event is raised when the animation timeline has ended. The event unfortunately passes only a reference to the sender (which is the Timeline). The EventArgs is empty.

Here’s a chunk of code that sets up an animation programmatically:

BitmapImage bmimg = sender as BitmapImage;

Game.Dispatcher.BeginInvoke(delegate()
{
    DoubleAnimation animation = new DoubleAnimation();
    animation.To = 0.0;
    animation.From = 1.0;
    animation.Duration = new Duration(TimeSpan.FromSeconds(2 + Game.Randomizer.Next(5)));
    animation.SetValue(Page.ImageProperty, bmimg);
    animation.Completed += new EventHandler(animation_Completed);

    Image img = bmimg.GetValue(Page.ImageProperty) as Image;
    Storyboard sb = new Storyboard();
    sb.Children.Add(animation);
    Storyboard.SetTarget(animation, img);
    Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity"));
    sb.Begin();
});
}

The significant line above is the animation SetValue. Here, I’m using the power of the Dependency Object. I can attach new properties to the animation directly!

public static readonly DependencyProperty ImageProperty =
    DependencyProperty.RegisterAttached("Image", typeof(DependencyObject), typeof(Page), null);

I’ve created a new DependencyProperty (as an attached property) called ImageProperty. There’s not much meaning to the name — other than it makes sense in the context in which I’m using it in the larger application.

void animation_Completed(object sender, EventArgs e)
{
    Timeline t = sender as Timeline;   
    if (t != null)
    {
        BitmapImage img = t.GetValue(Page.ImageProperty) as BitmapImage;
        if (img != null)
        {
            // do something here...
        }
    }
}  

In the completed event, I retrieve the attached property’s value from the animation (which I’ve cast to one of the base types, a Timeline). Then, you could do whatever you want….