Home > Appearance > Make a non-rectangular window

Make a non-rectangular window

• Make a non-rectangular window transparent
• Add code to enable dragging of the window at run time

In some cases in your Microsoft® Expression Blend™ application, you may want to create a window that has the visual appearance of being a non-rectangular shape at run time. Common examples of this are seen with desktop applets, widgets, and media players. You create a non-rectangular window by changing a few properties on the Window element in your application, and then creating an event handler method that enables you to move the window without the need of a title bar.

Make a non-rectangular window transparent

1. Create a new window document named Window1.xaml, by clicking New Item on the File menu. In the Add New Item window, make sure the Include code file checkbox is selected in order to generate a matching code-behind file for Window1.xaml.
2. Under Objects and Timeline in the Interaction panel, select the Window element, and then under Appearance in the Properties panel, change the WindowStyle property to None to remove the window shell (the title bar). Press F5 to see what the window looks like without the default shell. Notice that there are no longer any standard Minimize, Maximize, Restore, or Close buttons visible. Also, notice how you can no longer drag the window.
   Press ALT+F4 to close the window.

   For information about the other WindowStyle options, see WindowStyle in the Windows Presentation Foundation Windows Overview topic on MSDN.

3. Under Appearance in the Properties panel, select the AllowsTransparency check box. Notice that the window border is now no longer visible.
4. To add the transparency to the window, you can set the Background property of the Window element to No brush under Brushes in the Properties panel. Alternatively, if you want the user to be able to click the invisible area of the window, you can set the Background property to Solid color brush , and then set the Alpha property for the background brush to 1. This maintains the clickable area of the window while still making that area invisible.
5. Finally, under Objects and Timeline, double-click LayoutRoot to activate the element, and then add elements from the Toolbox to the artboard. You can create various effects by setting an OpacityMask brush on an element. (For information, see Create an opacity mask.) You can also add shapes and drawn paths by using drawing tools such as the Ellipse and Pen , and then move the elements behind other elements (right-click an element and then click Order). The contents of the LayoutRoot will effectively define your application’s outline.
6. Press F5 again to see what the window now looks like. Notice that you still can't drag the window. Press ALT+F4 to close the window.

Add code to enable dragging of the window at run time

After you make the window transparent, you will effectively lose the ability to reposition the window without a title bar. To make the window movable again, you will need to add an event handler to the window and then add a small amount of code to the related code-behind file.

1. Save your project to the hard disk by clicking Save All on the File menu. (You cannot add event handler methods to a project that has never been saved.)
2. With the Window element selected under Objects and Timeline, click the Events button in the Properties panel.
3. Next to MouseLeftButtonDown, type "OnMouseLeftButtonDown" and then press the ENTER key.
   • If you have Microsoft® Visual Studio® 2005 Standard Edition or later installed, the event handler code that is generated after you press the ENTER key will automatically be added to your code-behind file (Window1.xaml.cs), and the code-behind file will open for editing in Visual Studio.
   • If you do not have Visual Studio installed, the code for the event handler method will be copied to the Clipboard so that you can paste it into the code-behind file. Open your code-behind file by double-clicking it in the Project panel.
     Paste the generated event handler method code into your code-behind file just before the second-last closing brace (if your code-behind file uses C#) or just before the End Class statement (if your code-behind file uses VB.NET).

     If you cannot open the code-behind file by double-clicking it in the Project panel of Expression Blend, there is likely no application associated with the file extension of your code-behind file (.cs or .vb), and therefore Windows does not know how to open the file. For information about associating .cs and .vb files with an editor such as Notepad, see Edit a code-behind file.

4. Add the following code (in red) inside the generated event handler method in your code-behind file so that your event handler looks like the following:
   • For C#

     private void OnMouseLeftButtonDown(object sender, 
     		System.Windows.Input.MouseButtonEventArgs e)
     {
       this.DragMove();
     } 

   • For Visual Basic .NET

     Private Sub OnMouseLeftButtonDown(ByVal sender As System.Object,
     		ByVal e As System.Windows.Input.MouseButtonEventArgs)
       Me.DragMove()
     End Sub

5. Press F5 to run the application.

You can add additional event handler methods, such as a method for the Click event of a button that will call the Close() method in your code-behind file. For more information about creating event handler methods, see Event handling.