Video: Viewing Albums with WPF/E and ASP.NET AJAX (Updated)

-- Updated for ASP.NET AJAX Final Release and for the February WPF/E CTP.  Live version now available --

So many technologies and so little time!  It's hard to keep up with all of the great new technologies being released but over the holiday break I made some time to play around with the February CTP of WPF/E from Microsoft.  I was really interested in WPF/E when I first heard about it since it's based upon XML (more specifically, it's based upon XAML) and I've worked a lot with XML over the years.  While there was definitely a learning curve, I was able to put together an album viewer application that leverages the following technologies:

  • WPF/E and XAML
  • JavaScript
  • ASP.NET AJAX
  • Web Services

A screen-shot of the application is shown below.  It allows a user to type in a recording artist and then returns albums associated with the artist from Amazon.com and displays them in a nice 3D-style view.  Originally I was going to lay the albums out on the screen in a 2D grid format but after seeing the excellent videos on Flash programming from Lee Brimelow I decided to go with the carousel approach he put together for Flash.
 

The album information returned from the Amazon.com Web Service is converted into XAML and queried using ASP.NET AJAX.  JavaScript then converts the XAML into WPF/E objects and adds them into the canvas.  It was quite a bit of work to get it to its current stage, but I learned a lot along the way fortunately.  I wanted to make the albums spin in a carousel style but that proved a bit difficult to do right since WPF/E doesn't support Z-Index in the December CTP.  I'm hoping to add that feature in the future and update the application as the technology continues to mature.

A video of the application in action as well as a "nutshell" version of how it works can be viewed at the link below.  The code can be downloaded here.  To run the application you'll need .NET 2.0, ASP.NET AJAX (final release) and the WPF/E viewer.

View the Video

 

 
Thanks to Orcsweb for hosting my website (http://www.xmlforasp.net) and for giving me space to host videos!  If you're looking for a host I highly recommend them.  You won't find better service anywhere.

comments powered by Disqus

9 Comments

  • Thanks for sharing this great example, Dan!
    At first it didn't work on my PC, because my regional settings are Dutch. After changing all the .ToString() in BAL.cs to .ToString(CultureInfo.InvariantCulture), it runs perfectly!

  • Glad you liked it Dion. I'll update the code with your change so that others won't have to worry about regional settings and things. If there are other areas that you find yourself changing due to regional settings please let me know.

  • Also, I really like your video. It's just the information I need as a developer! Thanks for the clear explanation.

    To get your example working on FireFox, do a Math.Round (with precision 2) of the 'scale' variable in BAL.cs. Somehow the FireFox version of WPF/E doesn't like scaling a Canvas with too much precision.

    Also, the WPF/E version for FireFox totally craches on those bad album-images from Amazon. To fix this, I used 'a.ImageUrlSmall' instead of 'a.ImageUrlMedium' in the BAL.cs file. It seems like all the small images are OK :-)

  • Hi Dan, I found one more regional settings issue: both the Decimal.Parse() and Int32.Parse() in DAL.cs should use System.Globalization.CultureInfo.InvariantCulture as IFormatProvider. I'm pretty sure this is the last regional issue :)

  • It's cool. I guess you used to build the reflection effect. However, if you change the ScaleY to "-0.75", maybe it looks better? :)

  • Hi,

    sure seems like a nice demo. But do you also have the updated bits for the RTM version?

    Grz, Kris.

  • I updated the code for the final ASP.NET AJAX release right after it came out but forgot to update my blog unfortunately. But, things are updated now. :-)

  • Does it also work on the February 2007 CTP of WPF/E?

    http://www.microsoft.com/downloads/details.aspx?FamilyId=E63992D3-CCF5-40B9-B98A-D16BCA57467C&displaylang=en

  • The code has been updated for the February CTP now (and ASP.NET AJAX 1.0).

Comments have been disabled for this content.