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
Imagine that you want to Show a list of Players shaped like so
public class Player
{
public string Name { get; set; }
public Player(string name)
{
Name = name;
}
}
And in your ViewModel
they look like this
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.
<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
If you want them to be rendered Horizontally, you need to specify a Layout
property and the xaml should look a bit like so:
<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:
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.