Skip to main content

Windowless Windows

The windows of yesterday that all look the same are gone. With WPF, you can customize the shape of your windows, change where the Close, Minimize and other buttons are, even add your own buttons to the title bar. In this tutorial, we're going to transform our design into a windowless window, and add a Close button to make it more useful.

If you've been following along from the previous tutorials, before continuing, you need to add the "CloseButton.xaml" to your project. You can do this with Add Existing Item in the Project menu.

Windowless Windows

The first step in creating a "Windowless Window" is to set the properties on the Window. So, select the Window in the object tree.

Windowless Windows

In the property inspector, in the Appearance category, there is a property named "AllowsTransparency". By default, this is off, indicating that your window is completely opaque. Check the small box next to this property, to allow your window to be partially transparent.

Windowless Windows

You'll notice that when you do this, several things change. First, the WindowStyle changes to "None", and the titlebar disappears from the Window on your artboard. These are the normal changes when you enable transparency.

Although you have a window without a title bar, you still have a huge white background. To get rid of that, select Background in the brush editor, and click the No Brush brush type.

Windowless Windows

Press F5, and observe. You've got a window now that has no title bar that's floating in space. As you move other windows around it, you'll see that it actually is a window in an unusual shape. Unfortunately, you can't CLOSE the window right now, because when you got rid of the title bar, you got rid of the close button as well. You can close the window by holding down ALT key and pressing F4.

Let's create a close button. First, drag out a button in the top right corner. It can be touching the window if you like, or completely floating out on its own.

Windowless Windows

In my project, I have a resource dictionary that someone created for me, that has a complete style for the close button. Click on the Resources tab to see all the resources that are currently available.

Windowless Windows

We want to apply the CloseButton style to our button. So, click on the text "CloseButton" (NOT on CloseButton.xaml) and drag it onto the Button. When you do this, a menu will pop up, asking what you want to do with the style. Apply it to the "Template " property on the Button, and the button will transform into the CloseButton the way my designer had created it.

Windowless Windows

If you press F5 now, you'll see that the Close Button even has a MouseOver effect on it. All of that behavior can be encapsulated in a control template, which when it's applied, the button takes on. However, clicking the button still does nothing. We've created the appearance of the button, but not the actual behavior.

We need to hook up the close behavior. With the CloseButton selected, switch to the Property Inspector. At the top, there are two buttons, for Properties and Events.

Windowless Windows

Click the button for the Events.

The list of Events is displayed. These are all of the events that the Button can accept. We're going to create an event for when the button is Clicked, so find the box for the Click event, and type "CloseApplication".

Windowless Windows

When you press Return, Visual Studio will launch. You may get a dialog indicating a Security Warning. This is normal. Just tell Visual Studio to load the project normally.

Windowless Windows

When Visual Studio comes up, you'll automatically be looking at the code for your project. Blend will also have added the 閳ユΞignature' for your event handler. The code you need to add is between the two curly brackets right under where it says CloseApplication.

Windowless Windows

The code here is quite simple. You only need to type "this.Close();". Make sure you get the capitalization correct. The word "this" has no capital letters, Close has a capital C and you need to put the open and closing parentheses and the semi-colon after it.

Windowless Windows

Press CTRL+S to save the document, and switch back to Blend.

Now, press F5, and when the application runs, you'll see that it starts as we expected. When the mouse moves over the close button, it 閳ユΓights up'. Finally, when you click the Close button, the application actually closes.