Silverlight 2 Resizable and Dragable Window

Back To: Silverlight Tutorials

Live example: ResizableWindow

Source code: SilverlightDesktopTest.zip

Also see:

Dynamically loading a Silverlight control into a resizable draggable window.

Using The Control

Create a new project in Expression Blend.

Switch to XAML view of Page.xaml and change Grid to Canvas. Switch back to design view.

Right-click on the project and select Add Existing Item...

Import a picture and SilverlightWindowControl.xaml and SilverlightWindowControl.xaml.cs (located in the source code).

From the menubar select Project then Build Solution.

From the toolbar select Asset Library

From the Asset Library dialog select Custom Controls then SilverlightWindowCo...

The SilverlightWindowControl will appear on the toolbar. Double-click on it to place an instance of it on the design surface.

Switch to Properties of the control, and under Miscellaneous enter the name of the Picture in the WindowPicture box.

From the menubar select Project then Test Solution.

The image will appear in a draggable and resizable window.

You can also instantiate the control in code behind using code like this:

SilverlightWindowControl objSilverlightWindowControl = new SilverlightWindowControl();
objSilverlightWindowControl.WindowPicture = "picture1.jpg";
Canvas.SetLeft(objSilverlightWindowControl, (double)200);
Canvas.SetTop(objSilverlightWindowControl, (double)200);

this.LayoutRoot.Children.Add(objSilverlightWindowControl);