WPF: Finished the Expression Design / Expression Blend hands-on lab

.NET, Blend, Silverlight, Technical stuff, WPF
See comments

Update: Removed the IFRAME, because of annoying “download” effect in Firefox. Added a link to the XAML page instead.

Excellent lab!! I finished today the lab I started yesterday about Expression Design, Expression Blend and their collaboration.

Actually, it’s still not really a collaboration, to be honest. You export XAML from Design, and you add the exported file to the project in Blend. If you choose to modify the icons in Design, however, you must reimport and then make sure that the changes appear in Blend. Expression Design is, by Microsoft’s own admittance, still not ripe.

Nonetheless, it’s really neat to create icons in Design and then use them in Blend, and to know that you can scale them to infinite, apply effects to them, all the goodness that vector graphics and WPF give you.

After creating a new mouse icon in Design yesterday, I integrated it in a custom Button today. To create the button, the lab lets you make a copy of the standard template, and pretty much remove everything from it, so you start from scratch. To be noted, the whole of the work happens in Blend, with no C# code at all, and nothing to tweak in the XAML either. The result (I changed the lab a little to extend my button’s look&feel) is a control with 4 states: Disabled, Normal, Mouseover and Clicked.

For the Clicked state, I chose to rotate the content slightly, which is easy to do since the content is added to a ContentProvider. Since that’s a FrameworkElement, you can transform it. And the transform applies, of course, to the whole content’s hierarchy. And since the content is pure XAML, it works without any glitch (but in fact it would work if the content was a rasterized image (or even a video) too, the WPF framework takes care of that for you).

Just for fun, I put the XAML I created in a WPF Page and I put that on my website. Unfortunately, that will only work on Internet Explorer, and only if you installed the .NET 3.0 runtime. Sorry for the other folks reading this, I cannot put the result in Silverlight, because Silverlight doesn’t support templates yet (but it will eventually). If you prefer, you can also right-click the hyperlink and choose “Save as”. Then, run the XAML in KaXaml for example.

Here’s a serie of screenshots with the button’s different states:

Button design

Previous entry | Next blog entry

Comments for WPF: Finished the Expression Design / Expression Blend hands-on lab