Skip to main content

Repeater

Overview

The Grial Repeater control renders a collection of elements in a linear layout. It can render vertically (similar to an ListView) and also horizontally:

Repeater Sample

It supports selection and reacts to changes in the data source if it implements INotifyCollectionChanged.

The rendering is always virtualized, which means that only the elements that are visible are actually part of the visual tree making it very efficient even when handling a big set of data.

Repeater Properties

NameTypeDescription
SelectedItemobjectGets or sets the currently selected item from the ItemsSource.
SelectionModeRepeaterSelectionModeGets or sets a value that controls if items can be selected or not.

Available values are:
None,
Single.

InitialSelectionRepeaterInitialSelectionGets or sets a value that controls if the first repeated item will be selected or not when the control is loaded.

Available values are:
Empty,
First.

ScrollBarVisibilityScrollBarVisibilityGets or sets a value that controls if the ScrollBar will be visible or not.

Available values are:
Always,
Default,
Never.

ScrollPaddingThicknessGets or sets a value that controls the Padding of the ScrollBar.
ScrollPositiondoubleGets or sets a value that scrolls the content using coordinates.
SpacingdoubleGets or sets a value that controls the available space between each rendered item.
ItemSizedoubleGets or sets a value that controls the height or width (depending on Orientation value) of each repeated item.
OrientationRepeaterOrientationGets or sets the value which indicates the direction which child elements are positioned.

Available values are:
Horizontal (default),
Vertical.

ItemsSourceIListGets or sets the source of items to template and display.
ItemTemplateDataTemplateGets or sets the default items DataTemplate to apply to the ItemsSource.
SelectedItemTemplateDataTemplateGets or sets the selected item DataTemplate to apply to the ItemsSource.

Repeater Events and Commands

NameTypeDescription
ItemSelectedEventFired when an item is selected.
ItemSelectedCommandICommandExecuted when an item is selected. The item goes as the command parameter.

Examples

Let’s see a basic sample code that shows how to interact with the Repeater and its properties, the final result will look like the following image:

Repeater Sample

This sample simply repeats a basic template showing a circular image. The content will not be selectable since it is not explicitly set in the code.

<!--ADDED A FRAME TO HELP VISUALIZING THE BOUNDRIES OF THE REPEATER-->
<Frame
BorderColor="LightGray"
HasShadow="false"
CornerRadius="0"
Padding="0"
>
<grial:Repeater
Spacing="8"
Padding="0,10"
ScrollPadding="10,0"
ItemSize="48"
>
<!--THE DATA THAT WILL BE RENDERED-->
<grial:Repeater.ItemsSource>
<x:Array Type="{ x:Type x:String }">
<x:String>friend_01.png</x:String>
<x:String>friend_02.png</x:String>
<x:String>friend_03.png</x:String>
<x:String>friend_04.png</x:String>
<x:String>friend_05.png</x:String>
</x:Array>
</grial:Repeater.ItemsSource>

<!--DEFAULT ITEM TEMPLATE-->
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:CircleCachedImage
Source="{ Binding . }"
Style="{ StaticResource Avatar }"
/>
</DataTemplate>
</grial:Repeater.ItemTemplate>
</grial:Repeater>
</Frame>

Now, we will make our Repeater selectable and to get a better visual result let's also add a SelectedItemTemplate. The final result will look like the picture below:

  • When no item is selected
    • Repeater Sample
  • When an item is selected
    • Repeater Sample

And the code will be the following:

<!--ADDED A FRAME TO HELP VISUALIZING THE BOUNDARIES OF THE REPEATER-->
<Border
Stroke="LightGray"
>
<grial:Repeater
Spacing="8"
Padding="0,10"
ScrollPadding="10,0"
ItemSize="48"

SelectionMode="Single"
>
<!--THE DATA THAT WILL BE RENDERED-->
<grial:Repeater.ItemsSource>
<x:Array Type="{ x:Type x:String }">
<x:String>friend_01.png</x:String>
<x:String>friend_02.png</x:String>
<x:String>friend_03.png</x:String>
<x:String>friend_04.png</x:String>
<x:String>friend_05.png</x:String>
</x:Array>
</grial:Repeater.ItemsSource>

<!--DEFAULT ITEM TEMPLATE-->
<grial:Repeater.ItemTemplate>
<DataTemplate>
<local:CircleCachedImage
Source="{ Binding . }"
Style="{ StaticResource Avatar }"

Opacity=".5" Scale=".8"
>
<!--
LET'S MAKE THE IMAGE NOT ONLY SMALLER AND TRANSLUCID,
BUT ALSO WITH SOME TINTED EFFECT
-->
<local:CircleCachedImage.Transformations>
<fftransformations:GrayscaleTransformation/>
<fftransformations:TintTransformation HexColor="#4D29BC" />
</local:CircleCachedImage.Transformations>

</local:CircleCachedImage>
</DataTemplate>
</grial:Repeater.ItemTemplate>


<!--SELECTED ITEM TEMPLATE-->
<grial:Repeater.SelectedItemTemplate>
<DataTemplate>
<local:CircleCachedImage
Scale="1"
BorderColor="#A32CA3" BorderSize="0"
Source="{ Binding . }"
Style="{ StaticResource Avatar }"
DownsampleToViewSize="true"
/>
</DataTemplate>
</grial:Repeater.SelectedItemTemplate>
</grial:Repeater>
</Border>

Now, every time we select an item we will see a more "dramatic" effect. That happens because we made the default items to render smaller and with some transparency.

Finally, let's change the Orientation property to render the Repeater vertically by adding the following:

...
<grial:Repeater

Orientation="Vertical"
>
...
Repeater Sample