Reader Level:
ARTICLE

Designing RIA Applications Using Expression Blend - 3

Posted by Mahadesh Mahalingappa Articles | Expression Studio August 15, 2011
In this series of articles I will be demonstrating the various features Blend offers developers to develop RIA applications.
  • 0
  • 0
  • 2837
Download Files:
 

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

 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.
 
 
<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.

COMMENT USING

Trending up