How to do a multi selectable grid of 8x8 tiles?

[Shadowblitz16]

Question.

How do I...

1. do a multi rectangle based selectable grid of images
2. load the images from a binary file for what's in the scroll view only?

public partial class TileViewModel : BaseViewModel
{
    [ObservableProperty] private IList<Tile> _tiles = new ObservableCollection<Tile>();

    public TileViewModel()
    {
        for (var i=0; i<ushort.MaxValue; i++)
            _tiles.Add(new Tile());
    }
    
}

public partial class Tile : BaseViewModel
{
    [ObservableProperty] private IImage? _image = new Bitmap(PixelFormat.Rgba8888, AlphaFormat.Opaque, IntPtr.Zero, new PixelSize(8,8), Vector.One, 8*4);
    
    
}

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:forms="clr-namespace:Quest.Forms"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="Quest.Forms.TileView"
        x:DataType="forms:TileViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="TileView">

    <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) -->
        <forms:TileViewModel/>
    </Design.DataContext>
    <Grid RowDefinitions="*, Auto">
        <WrapPanel Grid.Row="0" Background="Black">
            <ItemsControl ItemsSource="{Binding Tiles}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Image Source="{Binding Image}" MinWidth="16" MinHeight="16"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </WrapPanel>
        <Grid Grid.Row="1" Grid.RowDefinitions="*">
           <Label >Page:0</Label>
        </Grid>
    </Grid>
</Window>

[stevemonaco]

1. do a multi rectangle based selectable grid of images

Custom selection logic is what I'd do. Track pointer events in a top layer that contains all tiles. Map the rectangle formed by the start and current/end locations to a 2D range of tiles. Then mark those tiles as selected or create a semitransparent overlay around them. I do the latter so that I can animate a selection border, but you can achieve similar with individually selected tiles with a lot more work. Virtual layers are worth the code as you're going to be writing a lot of UX code to tweak things to fit expectations for a graphical editor anyways.

2. load the images from a binary file for what's in the scroll view only?

Any slicing of input images is out-of-scope for Avalonia. It's up to you to properly manage a cache. In most cases, this is impossible as images are stored with compression and you must decompress the entire thing. In cases where you're reading raw bitmap data, this is possible, but will be a large performance hurdle. I would cache entire scanlines instead of trying to only read what's on screen unless you have images that can be tens of thousands of pixels wide.