First Sketch Flow Application in Silverlight 3: Part I


Introduction

Blend 3 + SketchFlow RC release is the new product from Microsoft. SketchFlow is nothing but a Silverlight 3 Application where we can prototype the application before going into development phase. So in this article we will be discussing how can we create a simple SketchFlow Application In Silverlight 3.

Creating the Silverlight Project

Fire up Blend 3 and create a Silverlight 3 + SketchFlow Project. Name it SketchFlowSample.

image1.gif


After you press OK, Blend 3 will create some workspaces for you. Such as: SketchFlow Animation Pane, Screen1.xaml, and SketchFlow Map Pane.

image2.gif

SketchFlow Animation pane

image3.gif

Screen 1.xaml Pane (Designer pane)

image4.gif

SketchFlow Map Pane

We will start with the SketchFlow Map Pane, as you see the image above it has a Screen 1 with activated and a play button on top left corner. For your information it is the default page of the SketchFlow prototype project, but you can add and remove screens and components etc to the SketchFlow Application.

SketchFlow is the flow of screen of a particular project.

Now we will see what are the options available for a screen, when you mouse hover the Screen you can see the following options available such as:

image5.gif

First Icon describes to Create a connected Screen.

image6.gif

Second Icon describes to Connect to an existing screen.

image7.gif

Third Icon describes to Create and Insert a Component screen.

image8.gif

The bottom right corner / fourth Icon says to Change visual tag.

If you will click the fourth Icon (Change visual tag); you will see the following. Here you can change the color of your screen in the SketchFlow Map Pane. But you can see some colors are predefined such as Blue for Navigation and Green for Component.

image9.gif

Now you can rename your screen at any time. I have changed Screen1 to Welcome.

image10.gif

We will add a connected screen to our Welcome Screen.

image11.gif

As displayed above click the first Icon and you will get your connected screen with the arrow. You can achieve this in another way.

Right Click on the empty space in the Map and you will see option for Create a Screen.

image12.gif

After adding a screen using the above method you need to connect to a screen. You can achieve this in two ways as well but this time based on your flow requirement. As I have showed you the options for a screen the second Icon connects to an existing screen. As we are coming from Welcome Screen to Home Screen we need to add connection from the Welcome Screen. And you will get as below. Just Drag and Drop.

image13.gif

We will add two more Connected Screens after Home like Change Profile, etc. Follow the above process to add more screens.

image14.gif

Now we will see how we can add components to the Map. You can achieve this in two ways as well. Such as click on the third Icon and you will get your component added.

Here we will follow the second method of adding a component, as we are not sure about the connectivity of the component with other screens at this point.

image15.gif

And after that Use Drag and Drop method to add existing screens.

image16.gif

One thing you must have noticed that each time you add a Screen or Component, Blend 3 adds a Xaml file with .CS associated file.

image17.gif

So you have explored how to add Screens and Components to the SketchFlow Map and of course how to connect each other.

We will explore more in our next article. Enjoy Coding.


Recommended Free Ebook
Similar Articles