From Expression Design to Blend: a life of a WPF button

  • Article

People are interested in learning about how they can use Expression Design and Blend together to create attractive UI components such as a great looking button. MIX University provides an excellent lab on the subject. I've included my own notes from the lab below that summerize the major steps involved. Hopefully you'll find them useful.

Creating a WPF button

In Design: create button icon

  1. Outline the icon by live tracing a photo image of a mouse
  2. Applying color and effects to the outline
  3. Exporting icon as XAML code

In Blend

  1. Importing the button icon
  2. Creating a gel button
  3. Attaching the button icon with the gel button
  4. Animating the gel button when mouseover