Building a Modern User Interface with Expression Design, Blend and WPF

Recently I attended Microsoft’s Re-mix 08 in Melbourne, and one of the goodies they gave me as a reward for filling out a survey was $1000 worth of Microsoft Expression designer products.  So I felt it would be kind of wasteful not to be using this software despite the fact that I’m not a designer by trade, I’m a software developer through and through.

I have, however, been wanting to create a user interface that totally broke away from the boring business forms of my day-to-day and create something funky, something cool, something I would love to use, and (secretly) love showing off to my friends.

And so, starting with Expression Design, here’s what I came up with:

Muse Layout

Now looking at this you might think this is a media player of some kind, and you’d be right… sort of… It’s actually going to be a music learning tool for myself. My memory is notoriously bad when it comes to remember chords for playing songs on guitar, (a fact which everyone in the band I play in would quite strongly attest to). Some of the problem is a lack of motivation, and a lot of it is just plain poor memory. So I thought a funky app to play along with might up the effort.

(Insert comment here about irony in wasting time creating the app (and writing this blog about it) instead of practicing)

The idea is that I have MP3 files of the songs I need to learn and TAB or CRD files I’ve downloaded off the Internet. What I want is to have the application prompt me with chords as I play along to the track, perhaps even shoving a few lyrics in my face at the same time to really get the brain-association flowing. What I need, however, is a way to sync the music and the chords, this is where the Record button comes in. I simply click record, and using the keyboard or mouse, tap away the chords as the music plays and the timing gets saved away for the next time I hit play on that song.

Anyway now that I have the concept done, and I have a design sort of figured out (and yes I drew those buttons myself by hand), on with development of the app.  This brings me to a common problem, I’ve used Expression Design (which is basically MS’s attempt at a sort of cut-down Adobe Illustrator). But Expression Design doesn’t do User interfaces it does illustrations… or does it… If I select File / Export…

File \ Export... 

and change my Export format to XAML…

Change Export Format to XAML Canvas

Click Export All and BAM!! A User interface… man this is scarily easy… and what’s really scary is how good the output looks in Expression Blend 2.

image

I now have an exact replica of my design in a WPF application… "Yeah sure" I hear you say. "But it’s still just pretty pictures, they don’t actually do anything".

Well that’s pretty easily rectified… Select my play button for starters… select Tools / Make Button

image

Click ok and now it’s a button that works… of course I need to make it glow when hover over it and stuff but it’s all so much easier than it used to be (and so much more powerful than CSS and Html). I’m in heaven…

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: