Aug 21

Written by:
8/21/2009 6:03 AM 

We love SketchFlow over here at the Open Light Group. As Ian would say, it's "bomb-diggity". Well the Open Light Group has a Open Source project called SilverlightDesktop.net that uses draggable movable windows. We needed to make these windows in our SketchFlow projects because the point of SketchFlow is that you can quickly make a sketch that actually moves.

How to make the windows

Open Expression Blend 3 and start with a blank screen.

Click the Assets tab.

In Assets, navigate to "SketchFlow/Styles/SketchStyles", select "ScrollViewer - Sketch" and place it on the page.

In Assets, navigate to "SketchFlow/Styles/SketchStyles", select "Rectangle - Sketch" and draw a rectangle above the Scrollviewer.

Grab another "Rectangle - Sketch" and draw it in the upper right-hand corner and give it a black background.

Click the Direct Selection icon...

Draw a box around the entire window...

This will highlight all the elements in the Objects and Timeline window. Right-click on the highlighted area and navigate to "Group into/Canvas" and click on Canvas.

 

All the elements are now grouped into [Canvas].

In Assets, navigate to "Behaviors" and select "MouseDragElement Behavior".

Note:

If you don't see the Behavior, you need to add a Reference to Microsoft.Expression.Interactions.dll found at "..\Program Files\Microsoft SDKs\Expression\Blend 3\Interactivity\Libraries\Silverlight". You will have to Ctrl+Shift+B to build the project after adding the reference to get the Behavior to show up. You can download the Microsoft® Silverlight™ 3 SDK at: http://www.microsoft.com/downloads/details.aspx?FamilyID=2050e580-f1d5-4040-bb09-e6185591b6b5&displaylang=en

Drag and drop the Behavior onto [Canvas] in the Objects and Timeline window. The Behavior will appear under [Canvas].

Create The States

To simulate the window closing when you click the "close" button in the upper right-hand corner of the window, we need to create two states. one that shows the window and one that doesn't.

From the Toolbar, select Window then States if there is not a checkbox next to it (if there is already a checkbox next to it, that means it is already showing so don't click on it because that will hide it).

Navigate to the States window and click the button Add state group.

After the group is created, click the Add state button on the group.

Create a state called "ShowWindow" and then click the Add state button to create another state called "HideWindow".

While "HideWindow" is selected, click on [Canvas] in the Objects and Timeline window and in the Properties window, set the Appearance/Opacity of [Canvas] to 0.

In the States window, click on Base.

Click on the box in the upper right-hand corner of the window, then Right-click on the box and select "Activate State/HideWindow" and select it.

In Assets, navigate to "SketchFlow/Styles/SketchStyles", select "Button - Sketch" and place it on the page.

 

Set the Content of the Button to "Show Window".

Right-click on the Button and select "Activate State/ShowWindow" and select it.

Press the F5 key to build and run the project.

• You will be able to drag the window around by clicking and dragging the top bar.
• You can close the window by clicking the box in the upper right-hand corner.
• You can open the Window by clicking the Show Window Button.

The source code is available at this link.