OpenLightGroup Blog

rss

Blogs from OpenLightGroup.net


SketchFlow: Making Movable Draggable Windows

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

image

Open Expression Blend 3 and start with a blank screen.

image

Click the Assets tab.

image

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

image

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

image

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

image

Click the Direct Selection icon...

image

Draw a box around the entire window...

image

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.

 image

All the elements are now grouped into [Canvas].

image

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

Note:

image

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

image

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.

image

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

image

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

image

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

image

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.

image

In the States window, click on Base.

image

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.

image

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

 image

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

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

image

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.

 





Comments are closed.
Showing 1 Comment
Avatar  Anders 7 years ago

Great!