WPF: Creating a Pop Up Button Style


WPF: Creating a Pop Up Button Style

So I’ve been getting pretty fancy with my GUI development, and today I wanted to design a button that would appear as just flat text until you hovered over it with the mouse, at which point it would “pop up” and look like an actual button.

Regular Button

'Flat' Button

The following solution only works when run on a system with a Windows Vista/7 theme enabled, such as Aero or Basic. It will not work when run with the Windows Classic theme.

The ‘Flat’ Pop Up Button was achieved by simply setting the background and border to transparent. Here’s the XAML:

<Button Content="Click Me!" Background="Transparent" BorderBrush="Transparent"/>

The next step was to make it so that when the mouse hovers over the button it “pops up” visually and looks like your standard button. At first I tried several methods for accomplishing this using triggers to set the style of the button which were all turning out to be pretty messy since I’m not the best graphical designer.

But silly me, I didn’t realize that in this case I didn’t have to do anything special at all! I could just leave the button as it is in the XAML above and the baked in triggers for the Button would still kick in and change the appearance when the mouse hovered over it.

Here’s what that looks like:

Pop Up Button

It looks pretty cool in spots where you want a nice, Aero style button, but if the user isn’t interacting with it you don’t want all those pixels distracting from the clean whiteness that is your polished application.

About the author

Mel administrator

3 Comments so far

ADTCPosted on12:41 pm - Jan 11, 2012

Ok, I just tested it more, and found that your solution works only on Windows Vista and Windows 7 themes (maybe Windows XP, I can’t test it now). It fails completely in the “Windows Classic” theme (Windows 2000, Windows 98, etc.). My Style definition works great even in Windows Classic.

In short, if you don’t care about making sure your buttons work properly in Windows Classic theme, this is a very quick and easy way to make Flat Buttons. Otherwise you’ll have to use a Style definition (I’m going to post up mine in my blog.) 

    MelPosted on12:52 pm - Jan 11, 2012

    Awesome, thanks for the feedback!

    I’ll make a note in the post about this solution only working with the Windows Aero theme and put in a link to your solution when you get it up.

ADTCPosted on12:33 pm - Jan 11, 2012

You gotta be kidding me!

I spent three days trying to create a XAML-only solution and ended up with a 42-lines-long Style definition which makes a button flat.

And then I came upon your post. You created the exact same flat button with just one line of XAML! YOU ARE GOD!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.