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;
}
Subscribe