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.

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.

About the Author

Kathleen is a consultant, author, trainer and speaker. She’s been a Microsoft MVP for 10 years and is an active member of the INETA Speaker’s Bureau where she receives high marks for her talks. She wrote "Code Generation in Microsoft .NET" (Apress) and often speaks at industry conferences and local user groups around the U.S. Kathleen is the founder and principal of GenDotNet and continues to research code generation and metadata as well as leveraging new technologies springing forth in .NET 3.5. Her passion is helping programmers be smarter in how they develop and consume the range of new technologies, but at the end of the day, she’s a coder writing applications just like you. Reach her at [email protected].

comments powered by Disqus

Featured

  • GitHub Copilot for Azure Gets Preview Glitches

    This reporter, recently accepted to preview GitHub Copilot for Azure, has thus far found the tool to be, well, glitchy.

  • New .NET 9 Templates for Blazor Hybrid, .NET MAUI

    Microsoft's fifth preview of .NET 9 nods at AI development while also introducing new templates for some of the more popular project types, including Blazor Hybrid and .NET MAUI.

  • What's Next for ASP.NET Core and Blazor

    Since its inception as an intriguing experiment in leveraging WebAssembly to enable dynamic web development with C#, Blazor has evolved into a mature, fully featured framework. Integral to the ASP.NET Core ecosystem, Blazor offers developers a unique combination of server-side rendering and rich client-side interactivity.

  • Nearest Centroid Classification for Numeric Data Using C#

    Here's a complete end-to-end demo of what Dr. James McCaffrey of Microsoft Research says is arguably the simplest possible classification technique.

  • .NET MAUI in VS Code Goes GA

    Visual Studio Code's .NET MAUI workload, which evolves the former Xamarin.Forms mobile-centric framework by adding support for creating desktop applications, has reached general availability.

Subscribe on YouTube