Click here to Skip to main content
13,295,472 members (28,978 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

41.3K views
12 bookmarked
Posted 12 Sep 2010

WPF Aero Titlebar

, 12 Sep 2010
Rate this:
Please Sign up or sign in to vote.
Titlebar in Aero theme

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

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 . You can find a list of my articles here.

License

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

Share

About the Author

Leung Yat Chun (Fainx)
Founder GenESis1 PROGRAMMER
Hong Kong Hong Kong
From the end of the Universe we have Fainx and Quick Zip.
http://www.FANIX.ME
Quickzip.org is stolen by and FileExplorer.org is the temporary site.
--
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]

You may also be interested in...

Comments and Discussions

 
GeneralMy vote of 4 Pin
Le Duc Anh15-Oct-10 3:11
memberLe Duc Anh15-Oct-10 3:11 
GeneralRe: My vote of 4 Pin
Leung Yat Chun15-Oct-10 5:45
memberLeung Yat Chun15-Oct-10 5:45 
GeneralMicrosoft's WindowChrome class Pin
kiol13-Sep-10 11:04
memberkiol13-Sep-10 11:04 
GeneralRe: Microsoft's WindowChrome class [modified] Pin
Leung Yat Chun13-Sep-10 22:27
memberLeung Yat Chun13-Sep-10 22: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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171207.1 | Last Updated 12 Sep 2010
Article Copyright 2010 by Leung Yat Chun (Fainx)
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid