Ask Kathleen

How-To Q&A: How do I Display Data of Complex Bound Criteria in Horizontal Lists in Silverlight?

Kathleen Dollard shows how to display a list of complex bound criteria, including data, child data and photos for each item, in Silverlight.

• By Kathleen Dollard
• 04/01/2010

Q: In Silverlight I want to display a list of complex bound criteria, which includes data, child data and photos for each item. The requirement is for the list to be displayed horizontally with only one item displayed at a time. Is this possible?

A: There are at least two approaches to solving this: a ListBox and a DataForm. In Silverlight 3, I wasn't able to scroll the ListBox incrementally, resulting in partially displayed items. In some cases this might be desirable, but the DataForm offers a clean incremental scroll. Figure 1 shows the DataForm solution. Both approaches use a DataTemplate that allows reuse of control layouts.

For my tests, I created a class with FirstName, LastName and PhotoUri properties as well as a list of PhoneNumbers. Phone Number is a separate class with a Description and Number property. A shared method in the Customer class returns dummy data for the sample.

[Click on image for larger view.]

Figure 1. One way you can use a DataForm is to pair it with a ScrollBar for horizontal and incremental scrolling behavior.

App.xaml holds two DataTemplates -- one for the phone number and one for the customer. The phone number DataTemplate is simple; in a real project I'd ask an artist to fix it up later:

<DataTemplate x:Key="PhoneNumberDataTemplate">
         <Grid>
            <Grid.ColumnDefinitions>
               <ColumnDefinition Width="50"/>
               <ColumnDefinition Width="100"/>
            </Grid.ColumnDefinitions>
            <dataInput:Label Content="{Binding Path=Description}" Grid.Row="0" Grid.Column="0"/>
            <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Path=Number}"/>
         </Grid>
      </DataTemplate>

The customer DataTemplate uses the phone number DataTemplate:

<ListBox Grid.Row="2" Grid.Column="1" 
      ItemsSource ="{Binding Path=PhoneNumbers}"
      ItemTemplate="{StaticResource PhoneNumber DataTemplate}" />

The CustomerDataTemplate displays the image using the string URI:

<Image Source="{Binding PhotoUri}" Stretch="Fill" />

This works because the PropertyUri is a string and there is a default converter that changes the string Uri to an actual image. If you are working with a true Uri, you can write a value converter. You can explore the rest of the CustomerDataTemplate in the download.

The CustomerDataTemplate is used by a bound ListBox to display the associated data:

<ListBox Name="verticalListBox"
ItemTemplate="{StaticResource CustomerDataTemplate}" />

Creating a ListBox that scrolls horizontally is not difficult. By default the ListBox uses a VirtualizingStackPanel to display elements. You can replace this panel with any other panel. To create a horizontal ListBox, I defined the ItemsPanel to be a StackPanel with the Orientation set to horizontal:

<ListBox Name="horizontalListBox" 
                        ItemTemplate="{StaticResource CustomerDataTemplate}"
                        VerticalAlignment="Top">
                  <ListBox.ItemsPanel>
                     <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                     </ItemsPanelTemplate>
                  </ListBox.ItemsPanel>
               </ListBox>

The downside of using the horizontal ListBox is that it doesn't offer an integral move to the next item with a single click on the left or right scroll button, and as the user scrolls, partial records are displayed.

An easy way to get integral move behavior is to combine a DataForm with a ScrollBar. The DataForm can also reuse the data templates, showing how powerful data templates can be in providing a consistent and stylable user experience:

<StackPanel    >
   <dataFormToolkit:DataForm Name="dataForm"
   EditTemplate="{StaticResource CustomerDataTemplate}"
CommandButtonsVisibility="None"/>
   <ScrollBar Name="dataFormScrollBar" Orientation="Horizontal"  
          Scroll="dataFormScrollBar_Scroll"  Minimum="0"
          SmallChange = "1" ViewportSize = "1"/>
</StackPanel>

The rather oddly named ViewportSize is actually the size of the thumbnail. The scroll event synchronizes the DataForm position with the scroll bar position:

   Private Sub dataFormScrollBar_Scroll( _
	ByVal sender As System.Object, _
	ByVal e As Primitives.ScrollEventArgs)
      dataForm.CurrentIndex = CInt(e.NewValue)
   End Sub

Good scroll bar behavior requires setting the maximum values to the count of items in the data set loaded. If you're committed to reducing your code behind, you could do this in a value converter, but in this case I just set the value when I loaded data in the constructor:

   Public Sub New()
      InitializeComponent()
      Dim customers = Customer.GetDummyData()
      Me.DataContext = customers
      dataFormScrollBar.Maximum = customers.Count - 1
   End Sub

Silverlight offers a great opportunity to combine a well-organized application with compelling approaches.

• Get Code Download