![AeroTitleBar](https://quickzip.org/news/wp-content/uploads/2010/09/AeroTitleBar.png)
Introduction
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" >
<uc:TitlebarContainer.Title>
<StackPanel Orientation="Horizontal">
<TextBlock Text="[=_=]" />
<TextBlock Text="TITLE" Margin="5,0" />
</StackPanel>
</uc:TitlebarContainer.Title>
<TextBlock Text="A Quick Fox Jump Over The Lazy Dog" />
</uc:TitlebarContainer>
The Internal Design
![AeroTitleBarInternals](https://quickzip.org/news/wp-content/uploads/2010/09/AeroTitleBarInternals.png)
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 TitlebarControlButton
s (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.
![BuildAeroTitlebar](https://quickzip.org/news/wp-content/uploads/2010/09/BuildAeroTitlebar.png)
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
References
This article has been posted on CodeProject. You can find a list of my articles here.
![](https://feedads.g.doubleclick.net/~a/CvVo-b0-Sfw3e-w9i1iY9ffU99k/1/di)