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. In the ObjectsandTimeline 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.

2. Under Appearance in the Properties panel, select the AllowsTransparency check box. Notice that the window border is now no longer visible.

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

4. Finally, in the Objects and Timeline panel, click LayoutRoot to enable the element, and then add elements from the Tools panel 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 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.

5. 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 in the Objects and Timeline panel, click Events in the Properties panel.

3. Next to MouseLeftButtonDown, type OnMouseLeftButtonDown and then press the ENTER key.

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 Writing code that will respond to events.