Using Microsoft Expression Blend 2.0 to Design Silverlight 2.0 applications.

 

In this second Lab we will have a closer look on Microsoft Expression Blend 2.0 to create Silverlight 2.0 Application.

As most of you might be knowing that, this tool is majorly used by Designers. To have a better collaboration between Developer & Designer Microsoft has released Microsoft Expression Blend 2.0.

However make one note that if you are designing Silverlight 2.0 application by using Microsoft Expression Blend 2.0, you must first install Microsoft Expression Blend 2.0 SP1.

http://www.microsoft.com/downloads/details.aspx?FamilyId=EB9B5C48-BA2B-4C39-A1C3-135C60BBBE66&displaylang=en

So, Let’s get started with Expression Blend !!

1) Open Microsoft Expression Blend 2.0 and make a choice of Silverlight 2.0 application as below-

2) Specify application name as SLBlendFirstApp.

3) Now let’s see the different windows and a tool box which is available with Microsoft Expression Blend.

Following are the four different windows –:

i) Interaction window : It contents Two parts one is States and other is Objects and Timeline. State is nothing but a Visual State Manager to control the look and Feel of Silverlight controls which will appear on the screen. We will have a closer look on Creating Visual States latter.

 Object and Timeline : it shows you what are all objects you have it on Silverlight Page and even it allows you to create, modify, delete Story Boards (Animation), Edit Styles, create styles, Create Templates.

ii) Project Window : Similar to your solution explorer in VS 2008.

iii) Properties Window : Allows you to modify properties of controls.

iv) Resources : Allows you to manage resources at Page Level or Application Level.

4) Now let’s have a look at Tool box –:

 

Now you can have a closer look on the tools and controls which are available. If you want to see more controls, Click Asset Library.

5) Now, let’s work as a Designer and build some nice UX (User Experience) using Expression Blend 2.0.

6) Make a choice of LayoutRoot from Objects and Timeline window. Go to property window and make a choice of background property with Gradient Brush as shown bellow-

7) You can Brush Transform to transform the colours as per your need. If you want you can change the colours which are in ARGB (Alpha, Red, Green, Blue) format.

8) Now design a screen like bellow-

When you design the screen like above, Expression Blend will automatically generate the XAML code for you.

10) Now, the final step is writing some logic on the Click Event of the Button which you can not do by using Microsoft Expression Blend 2.0. So, for that follow the bellow steps and complete your application -

11) In Project window of Expression Blend, Right Click to Project/Solution and make a choice of context menu to Edit in Visual Studio as shown bellow-

12) Once you do that, In visual studio, open Page.xaml and locate you Login button. Hook up a click event to the button and write a logic which you are suppose to write to finish the application.

<Button Height="60" Margin="280.457,0,145.543,74" VerticalAlignment="Bottom" Content="Login Now !!" FontSize="14" RenderTransformOrigin="0.5,0.5" Click="Button_Click">

13) Once you are done, hit F5 to test the First application of Silverlight 2.0.

Now as you have completed the second lab, let’s start with our third Lab – “Introduction to Layouts & Controls in Silverlight 2.0”