Share via

Using Repeaters

  • Article

The Repeater view item repeats a defined UI (for example, a collection of buttons), and it also manages the relationship between the data and the UI for each member of the collection.

Through virtualization, Repeater can accept data sources with just a few items, and scales efficiently to support millions of items. The Repeater accepts a list of data through its Source property. The child items are then defined by this data.

The Repeater also supports extended notifications from data sources, allowing intelligent handling of changes to the data set such as insertions, deletions, moves, and so forth. This support allows continuity of the UI state across a variety of data set permutations.

You can use any layout with a Repeater (the most common ones being FlowLayout and GridLayout) to display children according to the space available.

A Repeater has two properties (reserved keywords)—RepeatedItem and RepeatedItemIndex—that are available for each item in the collection. RepeatedItem corresponds to the current item in the collection, and RepeatedItemIndex corresponds to its index in the collection. You can pass these values to the child UI. You can also define a Content section to use as a divider between items. The example below shows how these properties are used.

An example of a Repeater view item.

<Mcml 
  xmlns="https://schemas.microsoft.com/2008/mcml"
  xmlns:cor="assembly://MsCorLib/System"
  xmlns:me="Me">

  <UI Name="Text">
    <Content>
      <Repeater DividerName="Divider">
        <Layout>
          <FlowLayout Orientation="Vertical" Spacing="5,0"/>
        </Layout>
        <Source>
          <cor:String String="String 1"/>
          <cor:String String="String 2"/>
          <cor:String String="String 3"/>
          <cor:String String="String 4"/>
        </Source>

        <Content>
          <me:TextString Label="[RepeatedItem!cor:String]" MyIndex="[RepeatedItemIndex]"/>
        </Content>

      </Repeater>
    </Content>
    
    <Content Name="Divider">
        <Text Content="-----------" Color="LimeGreen" />
    </Content>
  </UI>

  <UI Name="TextString">
    <Properties>
      <cor:String Name="Label" cor:String="$Required"/>
      <Index Name="MyIndex" Index="$Required"/>
    </Properties>
    <Rules>
      <Binding Source="[MyIndex.Value]" Target="[IndexPrefix.Content]">
        <Transformer>
          <FormatTransformer Format="{0}"/>
        </Transformer>
      </Binding>
      <Binding Source="[Label]" Target="[LabelText.Content]"/>
    </Rules>
    <Content>
      <Panel>
        <Layout>
          <FlowLayout Orientation="Horizontal" Spacing="5,0"/>
        </Layout>
        <Children>
          <Text Color="Blue" Name="IndexPrefix"/>
          <Text Color="Green" Name="LabelText"/>
        </Children>
      </Panel>
    </Content>
  </UI>
</Mcml>

Sample Explorer

  • Repeater > all samples

See Also