Try it: Make a nonrectangular window

In Microsoft Expression Blend applications, you may want to create a window that has the visual appearance of being a nonrectangular shape at run time. Common examples of this include desktop applets, widgets, and media players. You can create a nonrectangular window by changing several properties on the Window element in your application, and then creating an event handler method that lets you move the window without the need of a title bar.

Make a nonrectangular 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 that the Include code file check box is selected so that it generates a matching code-behind file for Window1.xaml.

2. Under ObjectsandTimeline 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 how the window appears without the default shell. Notice that the standard Minimize, Maximize, Restore, or Close buttons are no longer visible. Also, notice how you can no longer drag the window. Press ALT+F4 to close the window.

   Note

   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 enable 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 about how to do this, 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 how the window now appears. Notice that you still cannot 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 have 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 2008 Standard Edition or later versions 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).

     Note

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

4. Modify the generated event handler method in your code-behind file so that your event handler resembles the following:

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

   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.

6. You can add more 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 how to create event handler methods, see Event handling overview.