Designing RIA Applications Using Expression Blend

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:

http://msdn.microsoft.com/en-us/library/ms762271%28v=vs.85%29.aspx

and named it Books.xml.

Looks like below:

RIA application in Expression Blend

Let's create a new Blend Silverlight Application.

Expression Blend application

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.

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
x:Class="ExBlend3.MainPage"
Width="640" Height="480">
<UserControl.Resources>
<DataTemplate x:Key="bookTemplate">
<StackPanel>
<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}"/>
</StackPanel>
</DataTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource BooksSampleDataSource}}" >
<sdk:DataGrid Margin="52,50,92,111" AutoGenerateColumns="False" ItemsSource="{Binding bookCollection}">
<sdk:DataGrid.Columns>
<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"/>
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Grid>
</UserControl>

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.