Wow, I just came across the DesignersLove.Net blog today via Rob's post about CHATBlender which is a very cool combination of WPF/E and MSN Messenger. So I subscribed to it and since then there have been two more great posts that are worth sharing.

The first is a short tutorial about how to use Blend to do WPF/E design work. This is probably one of the top requests over in the WPF/E forums that I didn't have a good answer for and now I do. I won't spoil the read by copying any of the post since there is lots of good stuff to read over there.

Donald Burnett has an interesting piece call Poor, maligned, and misunderstood by many: WPF/E which I found to be an interesting read. He brings up two myths about WPF/E that (1) it doesn't support databinding and (2) it doesn't have any input controls. I think I've personally contributed to dispelling the first myth here and here but I haven't spent much time on the second one. I've spent a lot of time thinking about it and I've written about it in the WPF/E forums but haven't done anything beyond that.

I thought the buttons looked pretty cool and so I set out to create them in WPF/E. I decided to code them up as a server control instead of just writing plain old xaml. You can view the end result of my work here:

I wrote the code to create the server code once and now I just use an ASP.Net page to generate my Xaml. The ASPX page is very simple and looks like this:

To create the button controls I simple followed Martin's tutorial using notepad and created the WPF/E xaml. Then I wrote a server control that output the Xaml and added properties to allow the output to be formatted the way I wanted. The link to the source is below if you're interested, but really this is just a proof of concept. I think there is so much more that could be done in this area and this is just scratching the surface.

What controls would you like to see? I'm thinking a basic button, textbox, dropdown, radio, and checkbox controls would be nice to have and probably not to difficult to create. I'm hoping to finish up Part 3 of my WPF/E data grids series using a WPF/E data grid server control. Anyone interested in starting a codeplex project?

The source code for this article can be downloaded here. You can view a live sample of the grid in action here.

This article builds on Part 1 where we used ASP.Net AJAX to get a list of employees and then format then with Xaml to add them to our data grid. Please refer back to Part 1 for all the requirements to get this running since we will be using the same database and project.

A Slightly Different Approach

In Part 1 we used ASP.Net AJAX to get an array of employee objects which we then formatted as Xaml using a template after which we positioned each employee canvas on a simulated grid. This works pretty well, but I wanted to demonstrate a slightly different approach to getting the Xaml for each employee. In this article we will make use of the downloader object to download the Xaml for each employee and the formatting of the Xaml will be done on the server using XSLT.

The approach of using the downloader object is probably best suited for applications where there is a lot of Xaml or there is a lot of formatting that needs to be done to the xaml (like replacing values). In this case it might make a lot of sense to push this task down to the server instead of performing it on the client's machine. However, since this may require more data to be transferred over the wire it could potentially slow things down for clients with slower connection. So both approaches have benefits and drawbacks.

Step 1: Get the Employee IDs

Diving into the code, the first step will be getting the list of employees from the server. To do this we will make use of ASP.Net AJAX again. In the code I created another web service method called GetEmployeeIDs which simply returns an array of integers of all the employee IDs. We call this method using ASP.Net AJAX just as we called GetEmployees in the previous version. We will store this list in our javascript grid object and use it to pull the Xaml for each employee. Below is the call to get the Employee IDs:

EmployeeService.GetEmployeeIDs(delegate(this, this.loadEmployees));

The loadEmployees method of the grid object stores the list of IDs and then calls the startDownload method of the grid object.

Step 2: Download the Xaml

In order to allow the grid object to download the Xaml for each employee we need to create a HTTP handler to do the job. Instead of using a find/replace method of formatting the Xaml with the employee specific information I decided to take the XSLT route since the final result is XML. The first step, however, is to get the employee data in an XML format. To do this I created another method on the EmployeeData object that makes the following SQL Query and returns the result as a string:

Now we can run this through our XSLT to create the output Xaml that we want. You can view the XSLT here.

Our HTTP handler just takes the XML and transforms it using our XSL and then write it to the output stream. You can view the resulting Xaml here.

*Note: you might notice that I create a new downloader object for each download. I started out using the same object each time but it kept crashing IE so I think there is some kind of bug. Creating a new object each time seemed to solve the problem.

Step 3: Add the Xaml to the Canvas

Once we've download the Xaml we just add it to the canvas and set the Canvas.Left and Canvas.Top properties to position it on the grid.

The top and left properties are incremented each time using the incrementMargins method of the grid object. Next we either download the next employee or if we are done we hide the progress bar which I've added since the last example.

Next Steps

Just like last time I've left out quite a few things. Some of them I plan to implement in Part 3 which I'm working on now. But others, like mouse over effects and better images, are left for you to do. Have fun!

Administration

About

The posts on this weblog are provided "as is" with no warranties and confer no rights. The opinions expressed herin are the personal opinions of the individual authors and do not represent the views of Avanade in any way.

This blog theme was designed and copyrighted 2009, by Alexander Groß and is used with his explicit permission.