From Chris, WPF Photo Print.

The joke at work is often, “Microsoft designed WPF to fit two niches, photos, and RSS readers.”

Not that there’s anything wrong with a photo printer. WPF seems to be good at “media”, less good at line of business applications. Bil discusses this very issue here.

I love DataTemplates in WPF. The rest — ah, isn’t as interesting to me anymore. Unless I needed the media features or DataTemplate feature, I wouldn’t use WPF for a line of business application anymore. I’d do web with a rich client (as needed) or WinForms. The barrier to entry for a large LOB application in WPF is too high for most.

A neat particle generator from Robby written using Silverlight 2.0.

I share his concern about performance of Silverlight for these types of animations. I’d really like to see WPF’s OnRender method exposed (or something similar, like OnDrawTick… :) ).

Microsoft is asking whether more reference applications are needed for WPF.

Tell them what you’d like to see!

I’d like them to try a LOB application – just to see how difficult it really can be — one that does some realistic data entry, not just a few text boxes in a modal dialog box.

And please, no more photo “anything” or RSS “anything.” :)

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.