How to use ItemsControl In silverlight applications

Download Sample Solution (1.68 mb)

While working on a new project I had to evluate use of Silverlight controls to replace existing ASP.Net controls and lot of javascript. One of the features of the application required listing of search results in a list. In ASP.Net application I am using Repeater control so I could control rendering of individual results through a custom template. After digging around in Silverlight documentation I found that ItemsControl provides the same features as Repeater control. This article series is to demonstrate how to use ItemsControl in Silverlight applications. This first article will demonstrate following features.

  • How to use ItemsControl silverlight control?
  • How to call into Amazon.com web services to search for products?

In next set of articles I will demonstrate how you can control rendering of items in ItemsControl and more advanced use of the control.

What is ItemsControl?

You can read more about basics of this control in Silverlight control. I will summarize it as a control that you can bind to your data (collections) to display list of items. At the heart of this control are following items that you will need to provide bare minimum meaningful implementation.


<ItemsControl>
<ItemsControl.Template>
<ItemsPresenter></ItemsPresenter>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate />
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate />
</ItemsControl.ItemTemplate>
</ItemsControl>

ItemsControl.Template is used to specify template for shell of the control. For example if you want that your list should have a border or should have some background or to specify font for all elements of list, you can specify those attributes in this block. For example in my case, I wanted to display a blue border around the list and want to make sure that vertical scrollbar appears if number of items do not fit in the specified height for this control. XAML for my example looks like following.


<ItemsControl.Template>
<ControlTemplate TargetType="ItemsControl">
<Border BorderBrush="Blue" BorderThickness="1">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</ItemsControl.Template>
 

Most important part of this block is >ItemsPresenter element. This defines the place holder where items for ItemsControl will be displayed.

Next block that you define to control redndering of ItemsControl is ItemsControl.Panel. This defines how all list items will be laid out. You can either define a template inside this element using ItemsPanelTemplate or you can specify a resource that already has predefined template for items. In my example I defined a new template indicating that all items in the list should be contained inside a StackPanel and should have vertical orientation.


<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

Last block in the control is ItemsControl.ItemTemplate. This is the place where you will define template that controls rednering of individual items in the list. You can use DataTemplate block to define visual representation of your data by defining binding of each visual element to particluar sections of your data structure. If you will not define DataTemplate for visualization then each item in your list will be string representation of objects contained in your collecttion which means it will render text returned by ToString method of each object. The following snippet is what I used in my example. This translates to that each item in the list should display 4 pieces of information from my data items. And these 4 pieces are using Binding to define the property of the object to which they are bound.


<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Rank}" FontWeight="Bold" 
Margin="2"></TextBlock>
<TextBlock Text="{Binding Path=Name}" Margin="5"></TextBlock>
<Image Source="{Binding Path=SmallImageUrl}" 
Margin="5"></Image>
<TextBlock Text="{Binding Path=Price}" Foreground="Blue"
FontWeight="Bold" ></TextBlock>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>

Binding ItemsControl to data

You will need to bind ItemsControl to an enumeration/collection to display items in the list. In this example I got my results from amazon.com web service as ObservableCollection and then assigned it to ItemsSource property of the control.


private void PopulateSearchResultsList()
{
this.SearchResultItems.ItemsSource = this._searchResults;
}

Search

Social

Weather

Monthly Posts