SketchFlow in Silverlight 3.0 using Microsoft Expression Blend 3

 

Hi All,

What I was waiting for is now Available !!

Silverlight 3.0 RTW and Microsoft Expression Blend 3 with SketchFlow are available for download. Please find the links to download below-

Microsoft Silverlight 3 Runtime
http://www.microsoft.com/silverlight/resources/install.aspx
Microsoft Expression Blend 3 with SketchFlow
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=92e1db7a-5d36-449b-8c6b-d25f078f3609
Microsoft Silverlight 3 SDK
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=2050e580-f1d5-4040-bb09-e6185591b6b5
Microsoft Visual Studio 2008 Tools
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=9442b0f2-7465-417a-88f3-5e7b5409e9dd

Most importantly what I was waiting for is Sketch Flow. So, to show few capabilities of Microsoft Expression Blend 3 SketchFlow, I tried out a very simple demo.

This demo is about customers, products and their orders. So, when customers start the application they will see the Welcome Screen. Then they can see other customers, the available products and their order status. Then they can see the complete report of their own. At the end they can check out their self.

During this demonstration, if customers would like to give few feedbacks on the products which they are purchasing, they can give a feedback. By using this feedback, the company owner can rectify or appreciate the feedback which he can see as a designer.

So, let’s try out this example and see how we can build the White Board kind of Sketch Flow in Silverlight 3.0 using Microsoft Expression Blend 3 with Sketch Flow-

So, install Microsoft Silverlight 3.0 Runtime, Microsoft Silverlight 3.0 SDK and Microsoft Expression Blend with SketchFlow on your machine.

1) First step is to look at how you create a Sketch Flow project by using Microsoft Expression Blend 3. So, just look at the below screen shot-

2) If you observe, you can see that you can create a sketch flow project separately for Silverlight 3.0 applications or WPF application. So, let’s make a choice of “Silverlight 3 SketchFlow Application” and name it as “FirstSketchFlowApplication”.

3) Once you create a project, you will see the window like below which has different sections which we will discuss one by one-

a. Projects Window- this window will show you a structure of Silverlight SketchFlow project. It has several new items added as shown below-

First item is Fonts folder which contains different fonts. Screen 1 is a second item which is the first screen for our project. Third item this is most important item that is Sketch.Flow. This file shows the available screens, their connections with the other screens and lots more. You open this file and see what it shows when we finish our Sketching. Forth item is SketchStyles.xaml which contains bunch of styles and Visual states which will be utilized by our Scetchflow project.

b. Second window is SketchFlow Map. Now this is the window which is going allow you to sketch multiple screens, connect those screens with each other and lots of other functionality. Basically this window is used to Model the Flow, do Navigation and composition.

You will see a small tool box at the bottom of the SketchFlow Map window which will allow you to add screens, map the screens, remove the screens etc.

c. Now if you make a choice of screen shown in Blue rectangle, you will see a small toolbar which is again allow you to add-

i. Connected Screen.

ii. Connect an existing screen.

iii. Create and insert a component screen.

iv. Change visual tag.

4) So, next step is renaming the screen 1 by the name “Start”. And by clicking a small button “Create a Connected screen” just draw the SketchFlow as shown below-

The above Sketch flow shows couple of windows like, Start, WelCome, Customers, Products, Orders, CheckCustomerReport, CheckOut.

5) Now, press “F5” and See the output of your application. The application will look like as shown below-

6) If you could see at the left hand of the screen you will see a panel called “SketchFlow Player”. This player has couple of options as described below-

a. The first section is your “start Section”.

b. Second section is your “NAVIGATE Section”. Where it will show all the windows which you can navigate through.

c. Zoom panel.

d. “FEEDBACK section”- This one is great. Your customers now can give a online feed back by using the tools shown in FEEDBACK section. Later, your designer can open the feedback given by the customers and act upon that and do the necessary changes.

e. MAP- your customers can see the entire sketch and flow of the navigation which is available in your application.

f. Try out these few sections from SketchFlow Player.

7) Now as you have seen the first output, let’s use other features which are available with SketchFlow.

8) So, let’s starting designing the screens which are almost empty which we have created in our pervious steps. When you think about designing the screens, you can use all the controls which are there available in Blend. But probably the look and feel which you are looking for while sketching the prototypes for your applications, the regular controls might not give the sketch look and feel.

9) For that in Sketch Flow of Silverlight we have couple of new Sketch controls which you can use in your sketching applications as shown below-

10) In the above figure, click to Asset from the blend toolbox and go to “Styles group” -> “SketchStyles” section. You will see 33 new Sketch controls which are already styled for Sketching. Now you can start using these controls for your screens.

11) So, let’s start designing our first screen called “Start”. Open the screen in the design mode and design the screen as shown below-

12) Here I have used a control from Sketch section called “TitleCenter-sketch” for the titles and drawn the happy faces by using a tool called “Pencil” from the standard control model.

13) Now as you have finished designing “Start” Screen, let’s start designing “WelCome” screen. Open “WelCome” screen in a design mode and design the screen as shown below-

14) While designing the “Welcome” Screen, I have used “Button-Sketch” and “Rectangle-Sketch” controls from the Style group of Asset.

15) Important Point-this small menu will be displayed only on the WelCome screen. What if we would like to display this Menu on all the other screens which we have designed in our previous steps? Yes, we can do that very easily. But How?

16) By making a “Component Screen”. So, for that select “Rectangle-Sketch” and “Button-Sketch” from the objects and Timeline windows, Right Click to the selection and from the context menu click on “Make into Component Screen...” It will show you one dialog box asking the name of the screen. Name the component screen as “ResuableMenu” and click ok button.

17) Now you will see a change in “SketchFlow Map” window as below-

18) Now as you are ready with the reusable component let’s use it on multiple screens. For that Drag and Drop the reusable component on the screen wherever you want to use the menu. Then open those screens and align the menu as per the design specifications.

19) This is how the final “SketchFlow Map” Should look like.

20) Now as we have finished drawing our SketchFlow, let’s design the other screens as shown below-

21) “Customers” screen should look like as below- here I have used “ListBox-Sketch” control along with title and reusable component we just created.

22) “Orders” screen should look like as below- here I have used “ListBox-Sketch” control along with title and reusable component we just created.

23) “Products” screen should look like as below- here I have used “ListBox-Sketch” control along with title and reusable component we just created.

24) Now let’s use some other features of SketchFlow. For example now we will try out setting up navigation to our menu buttons to the respective pages in our application.

25) To do this let’s open the “Reusable Menu” into design mode. Make a choice of a “Customer Details” button, Right Click to the Button and Go To -> Navigate To - > and make a choice of a windows to which you want to navigate as shown below-

26) Repeat the same procedure to other buttons as well. Now press “F5” and test the application by clicking the buttons and navigating to the specific pages.

27) Now let’s try out “States in SketchFlow”. For this you will have to add one simple demo screen in to your existing project by the name “StatesExample” and design the screen as shown below-

28) To add a screen “StatesExample”, “Create a connected Screen” from our existing screen “WelCome”. Then add our reusable component by dragging the “ReusableMenu” on to our “StatesExample” screen. Add title to screen and draw “Rectangle-Sketch control”. Draw few “Button-Sketch” on top of your rectangle. So, your screen should look like below-

29) Now as your design is completed, let’s add few states to our application by defining the transition time by some duration. To do this, go to States window. You can get this window from Windows Menu - > States.

30) Now add the State by the name “SampleStateGrp” and let’s specify the duration to 2 Seconds as shown below-

31) Now add four different states by the name

a. “None” which will do nothing.

b. “One” – once you add this state draw a rectangle with some colour on the “StateExample” window.

c. Repeat the step “b” for state “Two” and “Three”.

32) Now once you are done with this, let’s attach our states “One”, “Two” and “Three” to the buttons “One”, “Two”, and “Three” respectively by right clicking to each button and going to “ActiveState Menu” from the context menu and make a choice of respective state as shown below-

33) Now Hit “F5” and test your application by navigating to “StateExample” window and click the respective buttons and see the output.

34) Now the most important point, Taking Feedback Online from the Customers and acting on that feedback as a Designer.

35) To do this run your application by pressing “F5” and use the Feedback option from the SketchFlow Player as shown below-

36) If you see there is enable Ink option available. If you click that you can make a choice of the colour and put your feedback on the design as well as you can write comments on the same.

37) Once you are done writing comments and feedback on the design, now export this in form a file. So, if you click the option “Show Feedback option” you will find Export option. Type the Author name and then click OK button. As soon as you click the button, you will see the save dialog box which will asked you to save the feedback. Save it by the name “StartScreenFeedback”.

38) So, now customer has given the feedback. So, let’s act as a Designer and open this feedback in Microsoft expression blend and act on the same. To do this, let’s go back to Blend.

39) Now click on “Window” menu. And click on Feedback submenu.

40) It will show you the Feedback menu at the left hand side of the window. From this window you can load the Feedback file which is send by the customer by browsing it from the given location.

41) Once you load the file, you will see a Bulb icon into “SketchFlow Map” window over the “Start” screen icon as shown below-

42) When you finish your SketchFlow and when your customer would like to have a Design document which they can refer, Microsoft Expression Blend has awesome feature. This has a direct integration with Microsoft Office Word. That feature is “Export To Microsoft Word”.

43) To export the design documentation to Microsoft Word, go to File Menu -> Export to Microsoft Word option.

44) When you click the menu, you will see the dialog box for exporting the design documentation to word. Give a name to the document and export it to a specific location as shown below-

45) Then check the document.

46) Now as we are finished with “Exporting the Design Document to Microsoft Word”, let’s try out the next feature.

47) Next feature is binding data to different “Sketch Controls” using dummy data from Microsoft Expression Blend 3.0.

48) To use the dummy data from Microsoft Expression Blend, go to “Window Menu->Data” . This window will allow you to either use Live Data or Dummy Data as per the requirement.

49) Data Window has two options-

a. Add Sample Data Source.

b. Add Live Data Source.

50) We will try out “Add Sample Data Source” as shown below-

51) Click on “Define New Sample Data” menu. Give a name as “CustomerDataSource”. You will see by default two properties.

52) Now if you want to add multiple properties, modify the data type of the properties, edit the same data and many other features, you can do that as shown below-

53) So, try out the other options as per your requirement. For our demo, let’s create three data sources with the following specification-

a. CustomerDataSource-

          i. CustomerID.

         ii. CustomerName.

b. OrdersDataSource-

           i. OrderID.

          ii. OrderDate.

c. ProductDataSource-

            i. ProductID.

           ii. ProductName.

          iii. ProductPicture.

54) Once you are done with creating the data source, let’s open “Customer screen” and “Drag & Drop” the “Collection” from the Customer Data Source on Customer’s details List box. Repeat the same steps for other list boxes in our customer’s screen. Your should see the “Customer Screen” output like below-

55) Now open the “Orders Screen” and “Product Screen” and repeat the procedure as above by “Dragging & Dropping” the above data source collections to the respective screens. Then see the output. So, we are almost done with the data binding.

56) So, that’s it from my side for time being. There are whole bunch of features available with SketchFlow for prototyping in Silverlight 3.0 and Microsoft Expression Blend 3.0. I will be coming up with other examples soon.

57) So, what are waiting for!! Download it and try out ASAP.

So, Enjoy!!!