# ItemsRepeater

A data-driven collection control that incorporates a flexible layout system, custom views, and virtualization.

`ItemsRepeater` is a port of the UWP `ItemsRepeater` control. More documentation can be found at:

<https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/items-repeater> <https://docs.microsoft.com/en-us/uwp/api/microsoft.ui.xaml.controls.itemsrepeater?view=winui-2.3>

The only difference between the two controls is that in Avalonia the `ItemsSource` is called `Items`.

### Examples <a href="#examples" id="examples"></a>

Imagine that you want to Show a list of Players shaped like so

```csharp
public class Player
{
    public string Name { get; set; }
    public Player(string name)
    {
        Name = name;
    }
}
```

And in your `ViewModel` they look like this

```csharp
public List<Player> Players { get; set; } = new() {
            new("Maurizio"),
            new("Giacomo"),
            new("Mario"),
        };
```

By default an `ItemsRepeater`, without defining a `Layout` will render them Stacked Vertically.

```xml
<ItemsRepeater Items="{Binding Players}">
    <ItemsRepeater.ItemTemplate>
        <DataTemplate>
            <Border Margin="0,10,0,0"
                Padding="5">
                <TextBlock Text="{Binding Name}"/>
            </Border>
        </DataTemplate>
    </ItemsRepeater.ItemTemplate>
</ItemsRepeater>
```

And they will look like so ![](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-ee8b0e851f29405b81a05725bf5e03f332a85263%2Fitemsrepeatervertical.png?alt=media)

If you want them to be rendered Horizontally, you need to specify a `Layout` property and the xaml should look a bit like so:

```xml
<ItemsRepeater Items="{Binding Players}">
    <ItemsRepeater.Layout>
        <StackLayout Spacing="40"
            Orientation="Horizontal" />
    </ItemsRepeater.Layout>
    <ItemsRepeater.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Blue"
                Margin="0,10,0,0"
                BorderThickness="1"
                Padding="5">
                <TextBlock Text="{Binding Name}"/>
            </Border>
        </DataTemplate>
    </ItemsRepeater.ItemTemplate>
</ItemsRepeater>
```

this will look like this: ![](https://4025525846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9CodmwWc6hOAzwuMGtm4%2Fuploads%2Fgit-blob-8f4fc8b0eb47cdd14b03cb89a84b638cd2e8d533%2Fitemsrepeaterhorizontal.png?alt=media)

In the `Layout` property you can also specify `Spacing` between the items, but you cannot define `Classes` nor other complex styles, those needs to be defined on the `ItemsRepeater` if needed.

## Reference <a href="#reference" id="reference"></a>

[ItemsRepeater](http://reference.avaloniaui.net/api/Avalonia.Controls/ItemsRepeater/)

## Source code <a href="#source-code" id="source-code"></a>

[ItemsRepeater.cs](https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Controls/Repeater/ItemsRepeater.cs)