Archive for June, 2008

Making a Glass Ball act like a Glass Button using Expression Blend and WPF

After converting my classy (or should I say glassy) mockup from Expression Design to Expression Blend, and making my Glass Ball into a Button I had to do a little bit of cleanup in the layout to get it scaling just how I wanted:

image image

Here you can see I’ve used a grid with three rows to layout my button, the background ellipse is set to stretch Horizontally and Vertically with RowSpan=2 and I’ve locked the first two rows so that the sphere won’t actually resize. The first row is for the Specular Highlight geometry to stretch to. I’ve also made the grid a fixed width so that nothing stretches horizontally either. The third row just the drop shadow aligned to the bottom so if you resize the top of the button the drop shadow stays in place but the ball moves up and down (desired for some bouncy ball animation I intend to do with some buttons). The ContentPresenter is also set to RowSpan=2 so the button’s content will always be centered in the ball.

So having made this into a resource I could apply to any Button, my next step was to figure out, how to make it act like a button (It is pretty lifeless at the moment).

The first step to give it life is to add Hover state. At first I thought I’d simply animate the background  to become a little bit lighter and that would be that. but then I realised that because the Fill brush of the ButtonBackground ellipse was a resource I couldn’t animate it… Hmmm…

After a little out of the box thinking I realised I could have two ButtonBackground ellipses one layered on top of the other, with the Normal brush applied to the one underneath and the Hovered brush applied to the one on top. Then I would simply animate the Opacity of the Hovered ellipse in and out when the IsMouseOver=true property is Activated and Deactivated.

Q: Why go to this trouble? Why not just convert the brush to a local value and animate the fill?

A: I was doing this originally, but I wanted to be able re-use this resource and simply apply styles to get different coloured buttons that act exactly the same. This way another button could easily have a "Red" style applied to point to different Brush resources, and all the animation would work the same.

So with the hover state working nicely my next step was to make it look like it was pressed down. The process for this was almost identical, simply add another ellipse but this time with a darker background instead of a lighter one.

I was initially animating at 100ms to the pressed state but I was finding even this wasn’t as snappy as I’d like and so I simply set moved the keyframes to 0ms for the pressed state.

This leads me a to a problem… Having a key frame at 0ms disables all subsequent animationsimage. So once you’ve pressed the button it doesn’t hover anymore… bugger.  The reason this is happening is because the Pressed animation is continuing to play while the Mouse over attempts to also, but is getting overridden. The way to overcome it is to add a Stop action for the storyboards that are continuing to play (Any storyboard with a Keyframe at 0ms).

I did a state for IsEnabled=false by setting almost all of the background and highlights to 50% opacity, the effect is the transparent ball (to the right).

When I’m happy with these buttons I might post the Xaml, let me know if you’re interested.

Leave a comment

Creating a Windows Installer Project in Visual Studio 2008

1 Comment

Use of the flux capacitor causes ‘ASP.NET Ajax client-side framework failed to load.’

Our company is preparing for a move of hosting companies from Brisbane to the U.S. Whilst working with the Beta server I hit a snag… ASP.NET Ajax kept giving me a JavaScript error on one of our apps. I knew this was an issue with loading the ScriptResource.axd files from the server, but what was confusing me was that another application in another virtual directory of the same web site was using this AJAX stuff and working perfectly.

After using Fiddler2 to see the real problem with loading the ScriptResource.axd, i saw that the response contained this error message:

Specified argument was out of the range of valid values. Parameter name: utcDate

So after a lot of Googling dead-ends I finally found an article titled ScriptResource.axd and assemblies built in the future which explains the issue. Essentially my mistake was that I had incorrectly been using the Flux capacitor as a part of my build process and had been building the binaries about 20 hours in the future, my bad…

The way I resolved this issue was to not Zip up my binaries before FTP’ing them up to the server so that the FTP server would reset the created and modified dates. Issue fixed…

Leave a comment

Awesome Keynote by Mark Pesce at Re-mix 08

Just thought I’d quickly mention that probably my favourite part of Re-mix 08 was a keynote by Mark Pesce on why Web 2.0 is important and what the future is for this social networking stuff… Thankfully Nick Hodge has put it up on his blog, Definitely worth checking out…

Leave a comment

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.


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


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…