Microsoft Expression Interactive Designer ("Sparkle") Is Here!!!

It's gone midnight Pacific time, so it's safe for me to write a post that I've been wanting to write for many months.

Microsoft Expression Interactive Designer (the product formerly known as "Sparkle") is finally available in the form of its first CTP! This build runs on the December 05 and January 06 CTPs. We finally have preview tools available for both developers ("Cider") and designers ("Sparkle") to start to build integrated application projects. We first showed Expression publicly at the PDC, and it was the most popular hands-on lab there. Here's a quick set of steps to show off one nice feature of Expression very quickly:

  1. Create a new scene 
  2. Make sure the Data tool window is open (View / Data)
  3. Select Add XML Data Source...
  4. For the URL, add https://blogs.msdn.com/tims/rss.aspx (or a blog RSS feed of your choice)
  5. Now drill down the treeview in the data window: rss -> channel -> item[n]
  6. Drag item[n] to the main window and choose ListBox as the style
  7. Use ItemsSource as the binding
  8. In the dialog that appears, choose to create a new data template and deselect everything except item[n] and title
  9. Click OK
  10. You've created a data-bound listbox that connects to a live RSS feed without writing a line of code!

At any time you can check out the XAML code tab to see or edit the generated code. The projects that Expression creates are standard MSBuild .proj files, so you can simply double-click on one to open it in Visual Studio and do additional work with it.

Experiment and have fun! Just two points to remember:

  • Firstly, this is an early build of Expression - there are known bugs that could cause the app to crash. Save often and make backups if you're doing anything beyond basic experimentation;
  • Secondly, this is a designer tool, not a developer tool - as such, this isn't intended to look or feel like Visual Studio. If you have colleagues that are in to graphical design, share it with them and get their verdict too - perhaps you can rope some new colleagues into your latest coding project!

Expression Interactive Designer is just one of a suite of design tools that we're working on right now. Expression Graphic Designer is a companion tool that enables creation of vector graphics. Once you're done, simply choose File / Export to XAML to create a XAML rendering that can be imported directly into Expression Interactive Designer or any other WPF project.

Lastly, here are a few additional resources to check out:

[Update: Note that this build Expression Interactive Designer does not execute successfully on 64-bit editions of Windows. There are also some issues on non-Pentium architectures - please check the notes on the download page before installing.]

Have fun!