Designing RIA Applications Using Expression Blend - 3

In the first few parts I provided a brief introduction to how we are going to use those features.
 In this article let us check out how to bind the listbox to an xmldatasource.
 Let's create our XML file first. I just took the one in the following path:
 and named it Books.xml.
 Looks like below:

 RIA application in Expression Blend
 Let's create a new Blend Silverlight Application.

 Expression Blend application

 Expression Blend application

 open Expression Blend application

 Import XML in Expression Blend
 Simply drag the Books collection on to the ListBox.

 Drag a listbox in Expression Blend
 We are done. The XAML should now look as follows :

 XML output in Expression Blend
 Well I have used ListBox a lot in this series. I need a change; let me try a datagrid. Simply Delete the Listbox and drag a DataGrid from the assets toolbar and drop it into the XAML area.

 XML area in Expression Blend
 Again drag the Bookscollection into the datagrid as shown below:

 Expression Blend XML area
 We should be ok now.

 Expression Blend application
 Cool. We did not have to do anything new there really.
 See the XAML and you would know the amount of work you just did.
Width="640" Height="480">
        <DataTemplate x:Key="bookTemplate">
                <TextBlock Text="{Binding author}"/>
                <TextBlock Text="{Binding description}"/>
                <TextBlock Text="{Binding genre}"/>
                <TextBlock Text="{Binding id}"/>
                <TextBlock Text="{Binding price}"/>
                <TextBlock Text="{Binding publish_date}"/>
                <TextBlock Text="{Binding title}"/>
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource BooksSampleDataSource}}" >
        <sdk:DataGrid Margin="52,50,92,111" AutoGenerateColumns="False" ItemsSource="{Binding bookCollection}">
                <sdk:DataGridTextColumn Binding="{Binding author}" Header="author"/>
                <sdk:DataGridTextColumn Binding="{Binding description}" Header="description"/>
                <sdk:DataGridTextColumn Binding="{Binding genre}" Header="genre"/>
                <sdk:DataGridTextColumn Binding="{Binding id}" Header="id"/>
                <sdk:DataGridTextColumn Binding="{Binding price}" Header="price"/>
                <sdk:DataGridTextColumn Binding="{Binding publish_date}" Header="publish_date"/>
                <sdk:DataGridTextColumn Binding="{Binding title}" Header="title"/>

 Let's give it a run and see how it works:

 Run Expression Blend application
 In my next article we will see animations in Blend. Until then, Happy Coding.