Home >

Office 2010-style Window Header with WPF and Microsoft.Windows.Shell

28. September 2011

The more observant among you probably noticed one huge difference with Office 2010 and its predecessor when it was launched – a totally sweet white gradient in the ‘glassy’ area at the top of the window.

Word2010Ribbon_with_callout_small

Fortunately with WPF and the WPF Shell Integration Library (which manifests itself in the Microsoft.Windows.Shell namespace) we can also create an effect like this.

WPF allows us to re-template a Window fairly easily, and the Shell Integration Library has an easy declarative way to specify how much Aero Glass we want on each edge of our window. Here we’re asking for 9 pixels of aero glass on each edge of the window except at the top.

<Setter Property="shell:WindowChrome.WindowChrome">
  <Setter.Value>    <shell:WindowChrome GlassFrameThickness="9 54 9 9" />
  </Setter.Value>
</Setter>

The value of 9 corresponds to the system-specified non-client margin on the left, right and bottom of the window. The WPF Shell Integration Library also exposes this value programmatically via the SystemParameters2.WindowNonClientFrameThickness property (it can be changed via a registry entry, and varies between windows versions). For demonstration purposes I’ve hard-coded it here.

Once we’ve specified how much aero glass we want at the top, we just add a rectangle with a ‘transparent-to-white’ vertical gradient as it’s background at the top of the window template and without too much effort (and all done in XAML) we have something that serves as a good starting point for office-2010-style apps. As with previous samples the code for this demo is included in my learnwpf.com.samples project on bitbucket.

WPFSampleApp

Comments (8) -

9/28/2011 8:53:03 PM #
Howdy! This is a reallylvery neat website!!
Tim
Tim
9/30/2011 10:23:58 AM #
Thanks for sharing.  I've been using that control for some time without know it could do this!
Michael
Michael
10/2/2011 8:13:47 AM #
Very nice!!!

I found a little problem on Windows 7 64bit:
1. Maximize Window
2. Double click on the title bar to get the original centered size
2. Maximize again

The title bar will be black ;-( Do you know why?
Michael
Michael
10/2/2011 8:38:38 AM #
Ok i found it - archive.msdn.microsoft.com/.../View.aspx

Its a bug :-(
10/2/2011 5:38:52 PM #
As I site possessor I believe the content matter here is rattling fantastic , appreciate it for your efforts. You should keep it up forever! Best of luck.
10/4/2011 5:10:09 AM #
I think this post will be a fine read for my blog readers too, could you please allow me to post a link to my blog. I am sure my guests will find that very useful.
10/5/2011 1:24:13 AM #
Few truly ready notifys on this scene, saved to specials .
10/5/2011 2:15:41 PM #
Guard up the huge patch of process, I predict handful reports on this internet point besides I swallow that your fabric point is rattling stimulating besides has fixeds of glorious direction.

Pingbacks and trackbacks (1)+

Comments are closed