.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh
Melody Anderson
Eminent IT

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Designing RIA Applications using Expression Blend - Part 1

Posted By:Mahadesh Mahalingappa       Posted Date: August 14, 2011    Points: 200    Category: Silverlight    URL: http://www.dotnetspark.com  

In this series of post I would be demonstrating the various features Blend offers to the Developers to develop RIA applications

In the first few parts I would give a brief of how we are going to use those features. In this series of post I would be demonstrating the various features Blend offers to the Developers to develop RIA applications 
Lets create a new Blend Silverlight Application.

create Blend application
A project opens up as shown below:

Blend project
Check out the Assets toolbar which contains all the tools we are going to use. 

Blend toolbar
Well this is really cool feature in Blend you can type in the textbox and the related controls are displayed by the Blend. 

Blend controls
Simply drag a ListBox to the Xaml page and the page would like as shown below:

 listbox in Blend
Selection Tool is displayed in the figure. Use it to toggle your selections between the ListBox and the Xaml.

 select tool in Blend
Once you use the Selection tool the listbox should be select and the window shouls now look as shown below:

Blend select tool
Having selected the Listbox ,click on the Data Menu.

data menu in Blend
Click on the Icon Create Sample data.

create simple data in Blend
Click on the New Sample Data.

new sample data in Blend
New Sample Data dialog box displays as shown below:

Blend simple data
The window down changes to the fig shown below:

Blend datasource
We do not need two properties for this simple example so I go ahead and delete Property2.

Blend property
ByDefault the Porperty is of type String. Well lets change it to something more interesting. Select Image from the DropDownList.

dropdown list in Blend
Then just drag the Property onto the ListBox as shown below:

listbox in Blend
We are done. Now the ListBox should look like as below:

Blend datasource

Wondering where the chairs came from. These are the default images provided to us by Blend to create sample datasource.
Well you are not limited to use the Collection given to us by Blend. Create your own collections as shown below:

Blend sample datasource

sample datasource in Blend
Click on the Icon Edit Sample Values.

edit sample value in Blend
The Edit Sample Values dialog box shown below:

Blend edit sample value
Click on the Icon shown below:

Blend sample data
Browse to the location and provide the location where the Collection is located.

browse location in Blend
Location can then be modified here:

location in Blend
Lets Drag the new Data Source Similarly onto the ListBox

Blend new datasource
The ListBox gets updated.

datasource in Blend
Let just take a look at what code was generated while we were haing fun with blend.
This is how the Xaml code for the page looks.
Lets give it a run. It works.

Blend application
In this article I have just tried to give an intro to Blend. We will continue to work on such basics in my next posts. Till Then. God Bless Blend.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend