Expression Blend

Welcome to another episode of Shishap Corner videos

In this video we are going to talk about how to get started with the Express and Blan 4

Expressen Blent 4 actually is not available free. It's a part of now Expression Studio 4 which was released last month

So if you do not have Express in Studio, I would say go to your MSD and download

and download the latest version in this video we are going to cover what is

expression blend why we need blend what are new features in new this version

for and how it is related with Visual Studio 2010 once we discuss this after

we are going to see how to create a silver light application in Visual Studio

2010 and then how we can take advantage of blend to design the user interfaces

So what is Express and Blend? Expression Blend is a graphics design tool

So if you have ever designed a graphics webpages or any kind of design you have done

you probably are familiar with Adobe Photoshop or Adobe Fireworks or any other design tools

What these design tools they do is they create a user interface

interface where you can see how a web page or your application will look like

Once that UI design, then designer gives you images from images or HTML or

whatever version you like and designer also tells you what color schemes, what

style sheets, what other formats or say you know your animations they have used

this is what actually express blend is used for is you know design the user

interfaces but express and blend is more than that you know it not only let you

design your UI pages but also you can also actually write a code in it so if I'm a

programmer it's basically if I'm a programmer and I want to design web pages I

don't have to rely on my designer so I can design myself and by the time I'm done code is already written for me so forget that

older ways we are designer is going to give you HTML code color code then CSS

then blah blah here whatever you design code is already written in background

for you so that saves a lot of time so why do we need expression blend this

is a good question we really don't need expression blend if you are just creating a simple application like you know there's a web

page, there's a button, there's a text boxes and there's a bunch of other controls that

is standard format. You really don't need expression blend. Expression blend, most of the cases you are going to need is when you are creating really

you know super, super looking, good looking web pages with gradient animations, videos, you

know, timelines and other stuff. So that's said. Besides the designing, it generates jamal code for you

What does that mean is when I'm designing a web page in Bland

I can take the code Bland is already writing code for me Jamel code for me for that page I designing I can take that code and I can put that code in my WPF or Silverlight application

And then next other feature, you know, why Intellisense is available in Jamel

So as soon as I type something, I can also see what else I can type if I have to type in the code

I can also add events and code for the UI in Expression

blend and then it's it's very smoothly integrated with Visual Studio 2010 so if

you have used previous versions of blend you probably are familiar with it so

but this version is a little better it has more improved UI it has Jam of

Intellisense code editing new there are a lot of new controls at it definitely

really good controls and usual controls and it's better integration with Visual Studio 2010 so what is the relationship

relationship between blend and visual studio 2010 so I would say blend is a design

tool where you can design your UI even though you can write code but it's not really

good to write code code I was still used with the Studio 2010 so you design

application in blend open in Visual Studio 2010 and write your code there that's

what it comes to after we in this video we are so far talking but I'm going to actually show you how we can you know get

we can do this transition from how we are going to create a silver light

application in Visual Studio 2010 we are going to open the page in expression

blend we are going to design the page in blend then we are going to see you

can also build and run your application in blend after that we are going to go

back to Visual Studio 2010 do some make some changes to the code and

then we are going to build and run the application so let's get started all right so

here we are with the Visual Studio 2010 in this what I'm going to do is create a

new application I'm going to create a new project and in this project I'm

going to actually create a silver light application so I have silver light application select selected here and make sure you have dotnet framework for

selected here by default in the left side I have which see sharp and silver light selected here so I'm going to call and say okay I will

uncheck this for now make sure silver light for selected here in silver

light versions again and say okay now

As you can see my first silver light application is created in Visual Studio 2000 and as you can see this is my solution explorer where I can see all the files

default file is main page. Jamo in this file you can see by default there is a user control

and there is just one grid control here and the the UI look like here nothing so far there's no no control or anything on this

you know page so what I going to do is I going to design a nice UI and guess what I going to use Express and blend for that so for this feature what we are going to do is right click on that page and say open an expression blend

however if you do not have expression blend install on your machine or Express and Studio install on your machine you will not see this option

so if you don't see this option that means you need to reinstall your Express in Studio or Express and Blend on your machine so

open an expression blend and I'm going to open this in my expression blend and

here expression blend is opening and as soon as you see this is how my

page look like an expression blend this expression blend is redesigned if you

have used older versions so so many things are changed here you can see here

this is select these are two selection options this is a zoom and you can zoom

and pan these are you know I drop our you know paint bucket and a gradient

you know pencil pen tool that's where we need to know is these are our

controls right here so if you right click on any of these you will see different

more options so by default say rectangle is control is selected here by

default but if you right click on this you will see rectangle ellipse and line if you right click on this grid you'll see grid canvas stack

panel in a border view box right click on text you'll see text box you know

whatever control is related to that category you know that category you see

more options here we can also click this to see different more options and you

know new controls added to express and blend so let's go back what we are

going to do is here you know we'll keep talking about so many new features but

first our goal is to see how Express and blend and Visual Studio 2010 both are

you know combined and to build a silver light application so what I'm going to

do is create a very simple application where I'm going to drag and drop a say

text box control here text blog by default and a raise my button

button control right here I'm going to button control now you need to make sure this is there's no selection by default

so every time you need to drag and drop you make sure selection is there so this is my text

block I'm going to give this a name text block one and I'm going to give my button

name button one now what I'm going to do is you can double click on any control to edit it in

X person blend but if you need to do write an event handler so by default

when you click on button I want to do something right so this is my

properties pan if you see right here in this you have properties and then you

have events so this events if you click on that you will see all the

events related to one control so if I have button selected here

button selected here you will see all button related events and here is click

event so if you double click on that what you will see is boom right here so

this is my button click event handler hey check this out this is not opening in Visual Studio it opening actually in blend itself in previous versions it would actually launch the studio so here what I going to do is

what I'm doing is what I'm doing is when you click on this button I'm changing the

text of the text block and you know so let's just build F5 build and run it simple

So by default, this is my page look like when I click on button, button is pretty big here, button is clicked, hey, boom

So let's close this. So what we learn here is actually now go back to our design

you can see but this is not the main feature we are talking about this is just

showing how I can create a silver light application in the studio and then open

and blend to see all the other features we are going to use in my next videos

we are going to use all these blend features and how we can you know really

create good looking application or light or WPF applications so now if you go

back to your visual studio this was either you can close or if you go back to

visual studio so I'm going to switch back to visual studio you will see hey your

file has been modified you'll say yes and what you will see is the code you

just design an expression blend is written here for example and you can see the

same code and same UI in Visual Studio 2010 now good part is you can always

come back once your application is you can always come back and modify the way you you like in Visual Studio as well

so what I'm going to do is my button does not have a width so I'm going to set

with 200 and same thing applies to text block I can also change some other

properties say now I can build and run same application here just hit F5 or use this build and run

sample whatever option you like to use and So opening

Here we go. So that said, the purpose of this video was to show you how, you know, we can get the start of the Expression Plan 4

and, you know, combine both Visual Studio and XPrescent Blend together to build a silver

So in my keep watching the video and you know I'll be writing more I am actually writing more videos on

Other features and how to use whole expression blend to build a really good looking applications