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


Top 5 Contributors of the Month
david stephan

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:

Responses

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