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 contentContent – 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
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
References
This article has been posted on CodeProject. You can find a list of my articles here.
