Geeks With Blogs


What I do:

Identity Mine

MVVM Light


What I am:

Microsoft Most Valuable Professional, Client Application Development

Microsoft Certified Technology Specialist, Windows Presentation Foundation

WPF disciples


View my profile on LinkedIn

Creative Commons License
Diary of a Code Trotter by Laurent Bugnion is licensed under a Creative Commons Attribution 3.0 Unported License

All source code on this blog is licensed under the MIT license.

Copyright (c) 2006 - 2011 GalaSoft Laurent Bugnion

Laurent Bugnion (GalaSoft) Diary of a Code Trotter

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

Posted on Saturday, June 23, 2007 7:37 AM Technical stuff , .NET , WPF , Silverlight , Expression Blend | Back to top

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

Comments are closed.
Comments have been closed on this topic.
Copyright © Laurent Bugnion | Powered by: