Repeat a list of tiles in a grid?

[Shadowblitz16]

public partial class TileWindowViewModel : ObservableObject
{
    [ObservableProperty] private readonly ObservableCollection<Tile> _tiles = new(Enumerable.Repeat(new Tile(), 10 * 9 * 256).ToList());
}

namespace AvaloniaZelda.Models;

public class Tile
{
    // To be 8,8 image
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:AvaloniaZelda.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="*" d:DesignHeight="*"
        x:Class="AvaloniaZelda.Views.TileWindow"
        Title="TileWindow">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:TileWindowViewModel/>
    </Design.DataContext>
    
    <Grid RowDefinitions="Auto,*,Auto">
        <Menu>
            <MenuItem Header="_File">
                <MenuItem Header="Import"/>
                <MenuItem Header="Export"/>
            </MenuItem>
        </Menu>
        <Grid Grid.Row="1" Background="Black" RowDefinitions="10" ColumnDefinitions="9">
            <ItemsRepeater ItemsSource="{Binding Tiles}">
                <ItemsRepeater.ItemTemplate>
                    <DataTemplate>
                        <Button Background="Transparent" MinWidth="32" MinHeight="32">
                            
                        </Button>
                    </DataTemplate>
                </ItemsRepeater.ItemTemplate>
            </ItemsRepeater>
        </Grid>
        <Grid Grid.Row="2" RowDefinitions="Auto, *, Auto" ColumnDefinitions="Auto, Auto, Auto, Auto, Auto, Auto, Auto">
            <TextBlock Grid.Row="0" Grid.Column="0" Text="Tile Index: 0"/>
            <Separator Grid.Row="0" Grid.Column="1"/>
            <TextBlock Grid.Row="0" Grid.Column="2" Text="Tile X: 0"/>
            <Separator Grid.Row="0" Grid.Column="3"/>
            <TextBlock Grid.Row="0" Grid.Column="4" Text="Tile Y: 0"/>
            <Separator Grid.Row="0" Grid.Column="5"/>
            <TextBlock Grid.Row="0" Grid.Column="6" Text="Switch Palette: PageUp/PageDown"/>
        </Grid>
    </Grid>
</Window>

[stevemonaco]

Can you explain the actual issue? I assume it's because you want the tiles to wrap, in which case you can either: use WrapLayout to break at screen bounds automatically or UniformLayout for a fixed number of tiles per row.

There aren't Avalonia-specific docs on the various ItemsRepeater layouts, AFAIK, but you can consult the UWP docs as Avalonia's is a port: https://learn.microsoft.com/en-us/windows/communitytoolkit/controls/layout/wraplayout#examples

You'll also need a ScrollViewer around the ItemsRepeater if content flows out-of-bounds.

[Shadowblitz16]

@stevemonaco I am trying to bind the buttons to the list so if there are 5 tiles there will be 5 buttons with the tile data

[stevemonaco]

That's already happening. However:

<Grid Grid.Row="1" Background="Black" RowDefinitions="10" ColumnDefinitions="9">

This means your entire ItemsRepeater is within a Grid cell that is 10px tall and 9px wide. Don't define them so it stretches. You could also use a <Panel /> instead since it's only one cell.

You may want to put some text in the button for testing, but it should be ok in most themes.

[Shadowblitz16]

I need more time to tell whether or not this is the accepted answer.
sorry.