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" >
<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 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
Close). If you have some custom implementations, you may want to use this control instead of
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 CodeProject. You can find a list of my articles here.