Site Logo

Pixel-in-Gene

Exploring Frontend Development with Design / Graphics / Technology

Custom Window control, the GlassWindow

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.

image

image

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

 namespace WithControlTemplates
 {
  /// <summary>
  /// Interaction logic for Window1.xaml
  /// </summary>

  public partial class Window1 : xxx.yyy.GlassWindow
     {
         Button _selectedButton;
  public Window1()
         {
             ...
             ...
         }

         ...
         ...
     }
 }

[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.

Custom Window control, the GlassWindow
Pavan Podila
Pavan Podila
November 30th, 2006