Click here to Skip to main content
14,835,636 members
Articles / Desktop Programming / WPF
Technical Blog
Posted 12 Sep 2010

Tagged as


10 bookmarked

WPF Aero Titlebar

Rate me:
Please Sign up or sign in to vote.
3.00/5 (5 votes)
12 Sep 2010LGPL32 min read
Titlebar in Aero theme


This article features a Title bar component in Aero theme.

Custom title bar is not something new. There are many implementations around, but most of them are trying to create a new theme instead of extend an existing one.

The major reason for developing this instead of using an existing one is that you cannot place any WPF control on the title bar, so if you want to place a TabControl there (like Google Chrome), you are out of luck.

It supports the following:

  • Emulates the behavior as much as possible, like:
    • Aero like glowing button
    • Transparent when the window is not active
    • Double-click the titlebar will restore/maximize the window
    • 8-way resize grip, which disappears when there is a full screen
  • Custom title contents

How to Use?

The control has two properties:

  • Title – which holds the title content
  • Content – which holds the client area
<uc:TitlebarContainer Background="Transparent" Margin="0" >
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="[=_=]"  />
            <TextBlock Text="TITLE" Margin="5,0" />
    <TextBlock Text="A Quick Fox Jump Over The Lazy Dog" />

The Internal Design

The component is very simple, it contains TitlebarContainer, Titlebar and TitlebarControlButton(s).

TitlebarContainer represents an implementation of Titlebar, it contains the Titlebar control, as well as the Resize Grips, the implementation of Resize Grips is based on Kirupa’s code, which uses some WINAPIs.

Titlebar represent the top part of the titlebar, it contains the actual Title contents (via the Content property), as well as four TitlebarControlButtons (Minimize, Maximize, Restore and Close). If you have some custom implementations, you may want to use this control instead of TitlebarContainer.

TitlebarControlButton represent the buttons, these buttons glow when mouse over, the button actually glows outwards. I used DropShadowEffect instead of OuterGlowBitmapEffect because it’s obsoleted in .NET 4.0.

The path of the buttons are drawn using Expression Blend, not from bitmap. Using Blend reduces my work a lot. I am new to Expression Blend, here’s what I did:

  • Capture a picture of the button, paste it on the canvas
  • Group it into a grid (Group Into \ Grid)
  • Draw with rectangle or pen using pasted graph as base
  • To avoid it from using the margin property, draw a rectangle on the edge of the button graphic
  • Combine them and convert it into path (Path \ Make CompoundPath)
  • Copy the path value and removed the unneeded rectangle


This article has been posted on . You can find a list of my articles here.


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


About the Author

Leung Yat Chun (Fainx)
Founder FANIX.ME
Hong Kong Hong Kong
From the end of the Universe we have Fainx and Quick Zip.
http://www.FANIX.ME is stolen by and moved to
May Thy Lord Your God be blessed always.

DirectoryInfoEx - [1.0.27]
WPF FileExplorer3 - [3.0.19]
WPF HtmlTextBlock - [Codeplex]
WPF ListView MultiSelect - [0.4]
WPF UIEventHub MultiSelect/DragDrop w Touch support - [3.0]
WPF BreadcrumbFolderTextBox - [2.5]
WPF BreadcrumbTree and Breadcrumb
WPF Aero Titlebar - [0.2]

Comments and Discussions

BugLinks do not work Pin
VEMS26-Mar-19 15:41
MemberVEMS26-Mar-19 15:41 
GeneralMy vote of 4 Pin
Le Duc Anh15-Oct-10 2:11
professionalLe Duc Anh15-Oct-10 2:11 
GeneralRe: My vote of 4 Pin
Leung Yat Chun (Fainx)15-Oct-10 4:45
professionalLeung Yat Chun (Fainx)15-Oct-10 4:45 
GeneralMicrosoft's WindowChrome class Pin
kiol13-Sep-10 10:04
Memberkiol13-Sep-10 10:04 
GeneralRe: Microsoft's WindowChrome class [modified] Pin
Leung Yat Chun (Fainx)13-Sep-10 21:27
professionalLeung Yat Chun (Fainx)13-Sep-10 21:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.