Custom Window control, the GlassWindow

By Pavan Podila on November 30, 2006

Creating custom controls have been greatly simplified in WPF. There are some good practices that people have followed and I have documented some of them here. Although most examples show how to create new UserControls or custom controls derived from existing controls like Button, creating custom Window control was something I wanted in my projects.

So I built a custom Window control called GlassWindow which derives from Window. Using ControlTemplates I now have the ability to skin the Window Frame the way I want. The GlassWindow control behaves almost like a standard Window Control in WPF. It has all the standard behaviors: resizing abilities, minimize, maximize, restore, close, etc. Additionally you can style the look as you please. Below I show you two different styles, one like a Mac OSX window and one like the Vista window.

Using the GlassWindow control

This is the easiest part of using the control. All you have to do is to use the <GlassWindow/> tag instead of the <Window/> tag. Of course you will also have to derive from GlassWindow in your code-behind file.

Here is an example of its usage. Note that I have intentionally obliterated the clr-namespace and assembly.

Window1.xaml

<custom:GlassWindow x:Class="WithControlTemplates.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Switching ControlTemplates" Height="400" Width="450"
    MinWidth="450" MinHeight="300"
    xmlns:custom="clr-namespace:xxx.yyy;assembly=xxx.yyy"
>
.....

.....

</custom:GlassWindow>

Window1.xaml.cs

 1 namespace WithControlTemplates
 2 {
 3  /// <summary>
 4  /// Interaction logic for Window1.xaml
 5  /// </summary>
 6 
 7  public partial class Window1 : xxx.yyy.GlassWindow
 8     {
 9         Button _selectedButton;
10  public Window1()
11         {
12             ...
13             ...
14         }
15 
16         ...
17         ...
18     }
19 }
20

[Edit] While designing the ControlTemplates for the GlassWindow, one needs to take care of including the AdornerDecorator in the Visual Tree. This will ensure that the Drag and Drop code that makes use of Adorners will run without any problems. I had blogged about this earlier over here.

Technorati tags: wpf, xaml, customcontrol, window

13 responses to “Custom Window control, the GlassWindow”

(no name)
April 8, 2007 at 9:59 AM | Permalink | Reply

Hi,

Have you had a second thought about posting the code for the glass window example? I enjoy reading your blog and curious how you did it.

Thanks

Pavel
Pavan Podila
February 13, 2007 at 7:47 PM | Permalink | Reply

Hi Ron,
I am going to post the source to all the controls and libraries that I’ve blogged about. I am still thinking of doing it in the best possible way. Now the MacOSX Window template uses some simple overlay tricks to achieve the subtle gradient + brushed metal effect. The brushed metal is a small 64×64 tiled image that I repeat left-right, top-bottom. On top of that I have a a Rectangle element which has its Fill property set to a LinearGradient running from left to right.

HTH,
Pavan
Ron
February 13, 2007 at 3:56 PM | Permalink | Reply

Hello,
This is a very nice blog!
I’m also very interested in the sources of this glassWindow control!
And how do you achieve the background of the mac osx window? Is it a bitmap?
(no name)
February 1, 2007 at 8:11 PM | Permalink | Reply

This is exactly what I am looking for. I need to develop an application that has a custom drawn Window with the Close, Minimize, Maximize buttons drawn differently than standard as well as having a custom control on the upper left side indicating disk space remaining… I would love to get my hands on your source code as soon as you can make it available.

Best Regards
Louis
Pavan Podila
January 27, 2007 at 9:17 AM | Permalink | Reply

Hi Scott,
I am in the process of posting the source. I should have it in the next week. I’ll make a blog post in the next few days.
Scott
January 26, 2007 at 6:01 PM | Permalink | Reply

Any word on posting the source?
Pavan Podila
December 21, 2006 at 11:56 AM | Permalink | Reply

Hi,
I intend to put out the source soon. Right now its a busy period for me but not for long
(no name)
December 21, 2006 at 11:05 AM | Permalink | Reply

I’m very interested in seeing the source code for this. Would you be able to email it to me? Or will you be posting it soon? Thanks!
(no name)
December 2, 2006 at 2:50 AM | Permalink | Reply

Hi Pavan,

I live in NYC, too. Would you like to meet up some time and discuss WPF? If so, contact me at flapplejacks at gmail dot com.

Cheers,

Josh
Pavan Podila
December 1, 2006 at 11:52 AM | Permalink | Reply

You can define styles in a ResourceDictionary and use the Style attribute on the GlassWindow. The Style can encapsulate the ControlTemplate. The example I have above uses two styles and I am switching between them simply by replacing the Style attribute on GlassWindow.

I will release the source code soon: will have to do some code changes and remove any company related information
(no name)
December 1, 2006 at 11:11 AM | Permalink | Reply

Very cool, how easy is it to add new styles? Are you just using Control Templates? Can you share the code?
Pavin Podila: http://codeplex.com/FluidKit - WPF controls, etc... - Rob Relyea - Xamlified
April 5, 2008 at 6:37 AM | Permalink

[...] ( Part 1, Part 2 [...]
Niclas
August 1, 2008 at 1:57 PM | Permalink | Reply

Hi there, cool work !!!!
Anyone knows about any framework or how to style WPFs to Machintosh look and feel, would be awesome!
/Nick