Monthly Archives: February 2011

A Basic Borderless WPF Window (with Bad Drop Shadow)

Posted on by
8

Introduction

I’ve recently been trying to spruce up my Boggle application on codeplex, aka Bogglex. The current 0.2 release is, to put it mildly, a little on the plain side.

Bogglex 0.2.0.32

Bogglex 0.2.0.32

I quite fancied getting rid of the default chrome which Windows dresses its forms in and creating my own window design. I usually loath UIs which do this (iTunes, any number of programs shipped with pre-built PCs, but especially iTunes). However, I really like MetroTwit‘s simple and clean UI, so I thought I’d attempt to imitate it.

The starting point for this is getting a window that:

  • Has none of the Windows chrome surrounding it.
  • Retains a drop shadow. (This really helps the aesthetics when your window is on top of another).
  • Can be dragged around the screen.
  • Can be resized.

That’s what this blog post covers. This post starts off with a brand new empty WPF/C# project in Visual Studio 2010.

Getting Rid of the Windows Chrome

Getting rid of the chrome is pretty simple and done in the XAML declaration of the Window. The key properties are WindowStyle and ResizeMode:

  1. <Window x:Class="WpfApplication1.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="MainWindow" Height="350" Width="525"
  5.         WindowStyle="None" ResizeMode="NoResize">
  6. </Window>

This combination of values will give you a white rectangle of a Window that can’t be moved or resized. Pretty useless really, but a reasonable starting point.

A Drop Shadow

That white rectangle looks horrible, especially on top of other windows. However, we can get it to look a little nicer by adding a drop shadow. One way to do this is to make the window transparent, and use a border with a reasonable margin which has a drop shadow.

The drawback to this technique is that the window will appear 20 pixels smaller both vertically and horizontally than it actually is. This means that if you do Alt+PrintScreen you’ll capture a 20 pixel border of whatever’s underneath the window. You will also lose cleartype support, and may have to tweak the border if you want to allow the window to be maximized.

I have yet to investigate other methods of drawing a drop shadow (I doubt MetroTwit uses this technique), but will post again if I find a better way. However, I fear it will involve quite a bit of P/Invoke. Anyway, here’s the border technique:

  1. <Window x:Class="WpfApplication1.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="MainWindow" Height="350" Width="525"
  5.         WindowStyle="None" ResizeMode="NoResize"
  6.         AllowsTransparency="True" Background="Transparent">
  7.     <Border Margin="10">
  8.         <Border.Effect>
  9.             <DropShadowEffect Color="Black"
  10.                               Direction="270"
  11.                               BlurRadius="10"
  12.                               ShadowDepth="3" />
  13.         </Border.Effect>
  14.         <Grid Background="White" />
  15.     </Border>
  16. </Window>

Here we’ve added a couple of properties to make the Window transparent, and added a border with drop shadow and decent margin. Running this, you should be able to see how the Window now looks like it’s on top of other windows.

Window with Drop Shadow

Window with Drop Shadow

Supporting Dragging

It’s easy to support dragging a window in WPF. The framework handily provides us with the method DragMove() which simply needs to be called when the left mouse button is pressed over a certain element.

We’ll make ourselves a fairly basic lime green title bar, and hook up its MouseLeftButtonDown event to an event handler which calls DragMove().

  1. <Window x:Class="WpfApplication1.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="MainWindow" Height="350" Width="525"
  5.         WindowStyle="None" ResizeMode="NoResize"
  6.         AllowsTransparency="True" Background="Transparent">
  7.     <Border Margin="10">
  8.         <Border.Effect>
  9.             <DropShadowEffect Color="Black"
  10.                               Direction="270"
  11.                               BlurRadius="10"
  12.                               ShadowDepth="3" />
  13.         </Border.Effect>
  14.         <Grid Background="White">
  15.             <DockPanel>
  16.                 <DockPanel Name="titleBar"
  17.                            DockPanel.Dock="Top"
  18.                            Height="32"
  19.                            Background="LimeGreen">
  20.                     <TextBlock Padding="8"
  21.                                VerticalAlignment="Center"
  22.                                Text="My Special Window"
  23.                                Foreground="White"
  24.                                FontWeight="999"
  25.                                FontSize="16" />
  26.                 </DockPanel>
  27.                 <ContentControl Name="content" />
  28.             </DockPanel>
  29.         </Grid>
  30.     </Border>
  31. </Window>
  1. namespace WpfApplication1
  2. {
  3.     /// <summary>
  4.     /// Interaction logic for MainWindow.xaml
  5.     /// </summary>
  6.     public partial class MainWindow : Window
  7.     {
  8.         public MainWindow()
  9.         {
  10.             InitializeComponent();
  11.             titleBar.MouseLeftButtonDown += (o, e) => DragMove();
  12.         }
  13.     }
  14. }

This looks a little something like:

Window with a Title Bar

Window with a Title Bar

Holding the left mouse button down over the lime green title bar and dragging is now enough to move the window.

Resizing

Now for resizing. Implementing resizing is at least a hundred times harder than the rest (barring a decent drop shadow implementation). With the amazing support for dragging windows with DragMove, you’d have thought that there’d be similar support for resizing a window. Unfortunately, there’s not.

However, it is possible to get half decent resizing functionality, but you’ll have to P/Invoke your way to victory. Kirupa Chinnathambi provides an excellent example of how to accomplish borderless window resizing which I took and refactored into some reusable classes that are hopefully fairly simple to use.

The entire classes would be a little cumbersome pasted into this blog, but you can view or obtain the code as it’s used in the Bogglex source:

Simply add those classes to the project. Once that’s been done, we need to add elements to represent the borders of our window.

  1. <Window x:Class="WpfApplication1.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         Title="MainWindow" Height="350" Width="525"
  5.         WindowStyle="None" ResizeMode="NoResize"
  6.         AllowsTransparency="True" Background="Transparent">
  7.     <Border Margin="10">
  8.         <Border.Effect>
  9.             <DropShadowEffect Color="Black"
  10.                               Direction="270"
  11.                               BlurRadius="10"
  12.                               ShadowDepth="3" />
  13.         </Border.Effect>
  14.         <Grid Background="White">
  15.             <Grid.RowDefinitions>
  16.                 <RowDefinition Height="4" />
  17.                 <RowDefinition Height="*" />
  18.                 <RowDefinition Height="4" />
  19.             </Grid.RowDefinitions>
  20.             <Grid.ColumnDefinitions>
  21.                 <ColumnDefinition Width="4" />
  22.                 <ColumnDefinition Width="*" />
  23.                 <ColumnDefinition Width="4" />
  24.             </Grid.ColumnDefinitions>
  25.             <DockPanel Grid.RowSpan="3" Grid.ColumnSpan="3">
  26.                 <DockPanel Name="titleBar"
  27.                            DockPanel.Dock="Top"
  28.                            Height="32"
  29.                            Background="LimeGreen">
  30.                     <TextBlock Padding="8"
  31.                                VerticalAlignment="Center"
  32.                                Text="My Special Window"
  33.                                Foreground="White"
  34.                                FontWeight="999"
  35.                                FontSize="16" />
  36.                 </DockPanel>
  37.                 <ContentControl Name="content" />
  38.             </DockPanel>
  39.             <Rectangle Name="topLeft" Fill="YellowGreen" />
  40.             <Rectangle Name="top" Fill="YellowGreen" Grid.Column="1" />
  41.             <Rectangle Name="topRight" Fill="YellowGreen" Grid.Column="2" />
  42.             <Rectangle Name="right" Fill="YellowGreen" Grid.Row="1" Grid.Column="2" />
  43.             <Rectangle Name="bottomRight" Fill="YellowGreen" Grid.Row="2" Grid.Column="2" />
  44.             <Rectangle Name="bottom" Fill="YellowGreen" Grid.Row="2" Grid.Column="1" />
  45.             <Rectangle Name="bottomLeft" Fill="YellowGreen" Grid.Row="2" />
  46.             <Rectangle Name="left" Fill="YellowGreen" Grid.Row="1" />
  47.         </Grid>
  48.     </Border>
  49. </Window>

To use the WindowResizer, we simply call the constructor like so:

  1. namespace WpfApplication1
  2. {
  3.     /// <summary>
  4.     /// Interaction logic for MainWindow.xaml
  5.     /// </summary>
  6.     public partial class MainWindow : Window
  7.     {
  8.         public MainWindow()
  9.         {
  10.             InitializeComponent();
  11.             titleBar.MouseLeftButtonDown += (o, e) => DragMove();
  12.             new WindowResizer(this,
  13.                 new WindowBorder(BorderPosition.TopLeft, topLeft),
  14.                 new WindowBorder(BorderPosition.Top, top),
  15.                 new WindowBorder(BorderPosition.TopRight, topRight),
  16.                 new WindowBorder(BorderPosition.Right, right),
  17.                 new WindowBorder(BorderPosition.BottomRight, bottomRight),
  18.                 new WindowBorder(BorderPosition.Bottom, bottom),
  19.                 new WindowBorder(BorderPosition.BottomLeft, bottomLeft),
  20.                 new WindowBorder(BorderPosition.Left, left));
  21.         }
  22.     }
  23. }

There, now we have a borderless, draggable, resizable window with a drop shadow. It’s far from a finished product, but it’s a decent starting point we can build on.

Window with Resizable Borders

Window with Resizable Borders

Further Development

This is exactly how I implemented Bogglex‘s borderless window as of changeset 9106. With a little bit of thought I managed to get something with a MetroTwit-ish style, albeit with a strange border and no cleartype support.

The Bogglex UI Under Development

The Bogglex UI Under Development

I am going to research a better way of drawing the drop shadow for Bogglex before releasing version 1.0. I don’t like the loss of cleartype, and the margin is annoying. You can decide for yourself whether the drop shadow is worth it.

It’s suprising how Microsoft make it so easy to switch to a borderless look for a window, and provide great support for dragging a window, but almost no support for resizing it or for a drop shadow. Perhaps we’ll see better support in a future version of WPF. I’m sure we will if Fix WPF has anything to do with it.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • email
  • LinkedIn
  • Technorati