WPF Custom Chrome Window?

Question

i have been trying to make something along the lines of this...

I have looked and looked and only found this article. I am having trouble integrating this into my application. I just started WPF today, so i am learning. I have downloded the window.Shell dLL. What else do i need? Thanks!

Answer 1

If you are looking for a step-by-step guide on how to add this to your application I can give it a try; I just happened to need a bit of a brush-up for a small app, I liked this and gave it a try - it took me about 45 minutes to apply. Cool stuff actually!

First: Download the source application and extract it to your computer.

In it you will find three subfolders. One with the sample application, one named Microsoft.Windows.Shell, one named CustomChromeLibrary. Copy the latter two to the root folder of your project map, add them to your project map (add existing project) and, from your startup project, reference them.

Now open the Window you want to apply CustomChromeLibrary to. You need to change the root from

<Window> 

to

<ccl:CustomChromeWindow>

, this is done by using this code as the document root:

<ccl:CustomChromeWindow 
Title="YourWindowTitle" Height="268" Width="733" ResizeMode="CanResize" 
x:Class="YourNamespace.YourWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:shell="http://schemas.microsoft.com/winfx/2006/xaml/presentation/shell"
xmlns:ccl="clr-namespace:CustomChromeLibrary;assembly=CustomChromeLibrary"
xmlns:local="clr-namespace:YourNamespace" 
>

Pay attention to the last three lines in the sample. These need to be updated to reference the correct libraries; the last one actually referencing to YOUR namespace.

Next you need to update the source code of your window as this is still a simple Window and you will receive an error from it.

Change this

public partial class YourWindow : Window

to this

public partial class YourWindow : CustomChromeLibrary.CustomChromeWindow

You are already half way there!

Next you just need to create the objects for your window (title bar etc.). This is wonderfully done in the sample project No. 5; I did really just copy it.

Take everything from

<shell:WindowChrome.WindowChrome>
    <shell:WindowChrome
    ...

to here

    <!--min/max/close buttons-->
    <ccl:CaptionButtons/>

Now you can fill your Window like this

    <Grid> 
        The content of your Window goes here 
    </Grid>

And close the xaml like this

    </Grid>
</ccl:CustomChromeWindow>

Now, if you try to run this you will receive another error. There are still three files missing:

The first one you need is a Microsoft file: CaptionButtonRectToMarginConverter.cs; you will also find it in the sample. Copy it to your project and add it (add existing file).

You need to make one change to it:

namespace YourNamespace
{ ...

instead of the sample's namespace.

Finally you need the two xaml files that create the buttons: GlassButton.xaml and GlassIcon.xaml; they can be found in the "Resources" subfolder (and are referenced as resource dictionaries in the xaml). Copy the whole subfolder to your project and add the two files to your project (add existing file).

Now you should finally be able to run your project.

Let's not forget this: Lots of kudos to gbahns, the author of the original article over at codeplex.com!

Answer 2

There are quite a few implementations you can find for a custom chrome.

Another helper library I've seen to one you linked is

MahApps.Metro

Read section 3. It can be setup with Nuget making it more easier to integrate for someone new.

Also section 3.3 3.4 3.5 talk about customising and expanding the MetroWindow control which gives you a custom chrome and also allows adding controls to the chrome title bar