Sketch Flow and Ink Enabled Applications

Welcome to another episode of C Sharp Corner videos

In this video I'm going to show you how we can take advantage of new feature added to Expression Blend

It is called Sketchflow. Actually, Sketchflow was already a part of version 3 but it was not mature enough

But this one is really, it will blow you away. Let's get started

So open Express and Blend 4. not have I would recommend you go download it and install it

In file I'm going to create a new project. A new project as you can see there are four kinds of projects we can create

You can create a silver light application, WPF, silver light sketch flow and WPF sketch flow application

So in this video I'm going to create a silver light sketch flow application and the goal is

by the time you'll be done with this video you will really see how powerful this sketch flow

So I give my sample a name here

Click OK. So what happens, as soon as you create the project

you will see a different kind of a screen which you are not used to seeing in

expression blend. One thing you may notice here is called a sketch flow map

This, what is Skelsflow actually does is let you create screens and flow of a website

of a slow-right website. And if you really click on this or roll over on this screen one, you will see there's four

little icons pops up. First one is create a connected screen. Second one is you can connect to an existing screen you can insert a component screen and then last one is change which will tag I going to discuss these one at a time but so if you are aware of a website map it kind of same thing

This map is, the sketch flow map is basically a map of your all pages and components in your website and how they are connected to each other

so what I'm going to do is first let's see how to start so I'm going to change this

to my home page now I'm going to add new screen and I'm going to call this screen

say you can just photos then I'm going to create actually one more screen here

it's called blogs and one more screen called videos. So what I just did and now I can actually move them around

As you can see on home page I have added one, two, three. What these are this adding a screen

means is actually if you look at blend here, it actually adds three pages, three

jemyl files which are your pages in Silver Live to the project. And these pages are basically

are basically you know jemal pages where you can add any controls you want you can

create the any UI you want and you know but these links here are showing that

these pages are connected okay so what I'm going to just to separate them if

you click home page this is home page what I'm going to do is just put a little

text here it called home page and what I going to do is a on the videos photos I going to add one text here it called photos on blogs I going to say blogs and on videos I going to say

blogs and on videos I'm going to say videos and the reason I want is I'm going to

run this application and then you will see how these are quickly you will see the output so this is

how my sketch flow application looks like as you can see as you run the

application home page is the default page but this is not it there's a one new

feature here which you probably don't know it's called a sketch flow player what

a sketch flow player does is it actually displays navigation of your

map you just created as you can see there was a home page which is called home page here. Home page has three

connected pages to it blog and if you click blog you will see blog is being

displayed here and you can go back photos, photos, you can go back again and for videos

so as you can see without actually creating any UI with the help of this is sketch flow prototype

player I just built a website which I can navigate to and I can go to different

pages and I didn't even write a single line of code now there's one more actually

few more added features in this sketch flow application and which if you look

at this my feedback beside let's let's first look at this I can also zoom in and

zoom up so this is a this is actually good when you have a like some kind of social website where you have photos videos especially photos where you want to you know zoom in zoom

out here's another if you look at my feedback panel here or this bucket

here you'll see I can this I can actually add ink to this page and let's say

if I select this I can select a you know whatever color I want

on hello now good part is even I didn't do anything but this ink will be

saved so next time if I run application it's going to load it here and then

besides that I have a highlighter here so I can highlight it and then I have a

eraser where I can erase the ink if I want to so as you can see this

this sketch flow player already comes with all these features loaded. Now if you close this page and come back to this application, again you will see this

ink and this highlight will be saved in your application. So let's go back now, let's go back, I think I'll stop this right here just to give you

in preview of this sketch flow play. and sketch flow application. In the next part of this video I'm going to do

it to show create actually create a real ready ready to use application

real-world application where I'm going to show you photos videos and blogs and

I'm also going to show talk about there's different kind of new flow

sketch flow controls available in blend for