LearnWPF.com

What is the equivalent of the ASP.NET Repeater in WPF?

The ASP.NET repeater is a great control for creating an arbitrary templated look for lists of data in ASP.NET web applications. WPF's databinding bears a great deal of similarity to the templating support found in the repeater, taking the power of templating even further by allowing templates to be defined as resources and re-used in multiple contexts, and in lots of different types of controls. However in spite of this there is no Repeater control in WPF.

Sample Repeater (from MSDN)
<asp:Repeater id="Repeater1" runat="server">
  <HeaderTemplate>
    <table border="1">
       <tr>
          <td><b>Company</b></td>
          <td><b>Symbol</b></td>
       </tr>
   </HeaderTemplate>
   <ItemTemplate>
     <tr>
       <td> <%# DataBinder.Eval(Container.DataItem, "Name") %> </td>
       <td> <%# DataBinder.Eval(Container.DataItem, "Ticker") %> </td>
     </tr>
   </ItemTemplate>
   <FooterTemplate>
     </table>
   </FooterTemplate>
</asp:Repeater>

How can you replicate the functionality  of the repeater in WPF? It turns out this is quite easy using an ItemsControl. ItemsControl is the base type that lots of list-like controls in WPF like ListBox, ComboBox and Menu which inherit from it either directly or indirectly. ItemsControl is also the parent to some list-like controls you might not expect such as the toolbar (which is really just a list of buttons and other controls, usually laid out horizontally) and StatusBar (once again, usually just a kind of horizontal list of controls). In spite of its fairly fundamental nature to lots of the usual suspects in the WPF controls namespace it isn't an abstract type and can be created in markup and bound like this:

ItemsControl Xaml Code
<ItemsControl ItemsSource="{Binding}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <!-- apply additional customizations for
      the items here in the template -->
      <TextBlock Text="{Binding}" />
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

The <DataTemplate> element allows us to specify how we want each item the ItemsControl is bound to, and the ItemsSource property on the ItemsControl populates the bound items from the data context (I'm assuming for the purposes of this demo that the stuff you want to bind to is in there). Another thing you may wish to do with the ItemsControl is to place it inside of a ScrollViewer control. The ASP.NET repeater generates HTML which is hosted in the browser, which handles showing a scroll-bar if the document is longer than can be displayed on a single screen. WPF Windows and Pages don't default to this way of operating, and thus you probably want to add the scroll viewer if more items are added to the ItemsControl than can be displayed inside the Window or Page.

Here is a complete page showing the list of binding modes available in WPF displayed in an ItemsControl. The ItemsControl has an ItemsPanel property that the bound items are layed out in. The default is a StackPanel, which is they type of panel you would want to reproduce the functionality of the ASP.NET Repeater. In this example below we've used the UniformGrid instead to control the layout of the items being bound. You can click here to run this page in your browser.

<Page
  xmlns=" http://schemas.microsoft.com/winfx/2006/xaml/presentation "
  xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml "
  xmlns:d="clr-namespace:System.Windows.Data;assembly=PresentationFramework"
  xmlns:sys="clr-namespace:System;assembly=mscorlib"
  >
    <Page.Resources>
        <ObjectDataProvider MethodName="GetValues" ObjectType="{x:Type sys:Enum}" x:Key="bindingNames">
            <ObjectDataProvider.MethodParameters>
                <x:Type TypeName="d:BindingMode"/>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </Page.Resources>
    <ItemsControl ItemsSource="{Binding}" DataContext="{StaticResource bindingNames}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid IsItemsHost="True" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- apply additional customizations for the items here in the template -->
                <TextBlock Text="{Binding}" FontSize="22"
                           Margin="5" Foreground="#feca00" />
        </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Page>

• Tips
• Controls
• Data Binding