Apologies to my readers, but my blog has a been little quiet of late. Hopefully I'll be able to share the reasons for this with everyone soon! In the meantime, here's a WPF/E sample I've been meaning to post for some time.
Essentially it's a button that looks like it's made of glass. The button pulsates when you hover over it and glows when it's pressed. A picture is worth a thousand words so here it is:
I couldn't get a reasonable screen capture of the hover-over effect, so you'll have to take my word for it (or download and run the attached files).
There are a number of XAML elements which go into making up the button. They are clearly commented in the XAML but the list is as follows:
- Drop-shadow: an ellipse with a radial gradient of black fading to tranparent
- Button surround: a white ellipse slightly bigger than the green one
- Black button background: only visible round the edges of the green when the button is pressed
- Main button colour: the green (or whatever color you want) of the button. This ellipse is clipped to its initial outline, thus allowing us to move the ellipse slightly for the button press without it overlapping the button surround
- Top glow: an ellipse with a linear gradient background of white (at the top) fading to transparent. Smaller than the main button colour and positioned so that the tops are the same
- Bottom glow: an ellipse the same size as the main button colour but with a linear gradient background of white (at the bottom) fading to transparent. This is also clipped as per the main button colour.
- Hover-over glow: an ellipse the same size as the main button colour with a radial gradient background of white (at the centre of the ellipse) fading to transparent. This is initially transparent.
- Transparent element for catching mouse events: on top of all of this is a transparent ellipse the same size as the white button surround for catching MouseEnter, MouseLeave, MouseLeftButtonDown and MouseLeftButtonUp events. This element also contains the Storyboard for the pulsating hover-over effect (although this could be in any XAML element).
Who would've thought a button could be so complex? I am quite proud of the fact that the actual button colour only appears once in all of the above XAML elements. So it's a single change if you fancy a red button rather than a green one.
Now all of this is in a canvas and the Loaded event of the canvas calls a JavaScript function. The other mouse handlers are attached through script. The script itself is pretty straightforward, but a bit fiddly in places. The MouseEnter and MouseLeave event handlers just call Begin() and Stop() methods on the Storyboard. The MouseLeftButtonDown handler has to adjust the position of a number of elements, as well as moving the clipping geometry on a couple of elements so that the clip geometry doesn't move with the element. The MouseLeftButtonUp handler reverses these effects.
If you want to make this into a proper button (i.e. one that actually does something) then you need to add some script into the MouseLeftButtonUp event handler. This script could call other script (for client-side actions), make an ASP.Net postback (for server-side actions), trigger an AJAX call (for AJAX apps) or doing anything else you fancy.
Issues I hit: It's not possible to use the RoutedEvent on an EventTrigger to catch anything other than a Loaded event (confirmed by Joe Stegman in the forums). This is why I need script to call the Begin and Stop methods on my Storyboard. As a result of this, animations tend to start running as soon as everything is loaded. This is why one of the first things I do is to stop the animation.
Future enhancements: It's fiddly to put more than one of these on a Canvas. They can share the script, but not the XAML. The way forward here may be for the script to create the XAML elements, but this sort of code always looks ugly. It's also a bit poor that you need to hack an event handler to get the button to do anything. It would be much better to be able to pass a JavaScript function into the object constructor and have this called appropriately.
As ever, it would be great to hear from anyone who uses this code.
[PS. I had wanted to post this as a sample you could run, but our blogging software is preventing me from doing this. Sorry but you'll have to download and run this in order to see it in action. As I mentioned previously, IE users need to ensure that load this via HTTP and not directly from the filesystem.]