Instantiating items in scrollview?

[Shadowblitz16]

I was looking up how to do this and google suggested virtualization so I am not drawing the entire list of items at once.

However how do I actually load these items?
The creating and loading needs to be virtualized also because doing so for billions of images at once is not good.

        <ScrollViewer Grid.Row="1">
            <ItemsControl ItemsSource="Items">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <UniformGrid/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Width="8" Height="8"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>

[torum]

I was looking up how to do this and ...

I'm not entirely sure what actually you are trying to do but, there are two kinds of virtualizations as far as I know. One is UI virtualization and the other is data virtualization (or sometimes called Lazy Loading).

Avalonia's ItemsControl (or ListBox) already implements UI virtualization but... only for VirtualizingStackPanel (for now?). In your example, you are using UniformGrid, so UI virtualization won't be enabled as far as I know (somebody correct me if I'm wrong).

Next, Data virtualization (or Lazy Loading) is a technique that only loads/renders items when actually needed (e.g. when they became visible in the viewport of scrollviewer).

Here are the code snippet how to get visible items in the scrollviewer. Once you get the items, you can instantiate objects, load images etc.

        var viewportRect = new Rect(new Point(scrollViewer.Offset.X, scrollViewer.Offset.Y), scrollViewer.Viewport);

        var visibleObjects = uniformGrid.Children.Where(child => child.Bounds.Intersects(viewportRect)).ToList();

[thevortexcloud]

Take a look at #13605

[stevemonaco]

A tile engine is not a good use case for ScrollViewer + ItemsControl + individual Image elements. Just custom draw it and you'll be much faster, especially with 8x8.

Not everything needs to be done with basic controls, especially "centerpiece" controls. You still get to move fast with basic controls in other UI areas while being very efficient in your most demanding control(s).

[Shadowblitz16]

A tile engine is not a good use case for ScrollViewer + ItemsControl + individual Image elements. Just custom draw it and you'll be much faster, especially with 8x8.

Not everything needs to be done with basic controls, especially "centerpiece" controls. You still get to move fast with basic controls in other UI areas while being very efficient in your most demanding control(s).

even if I looped over them and drew them looping of 60 thousand tiles every frame is not doable

[stevemonaco]

It's more doable than looping over 60k elements in the visual tree and drawing them every frame. Avalonia has less information to optimize than what you do. Most tile engines are drawing scaled tiles - 200%, 300%, or even 400% so you wouldn't necessarily be drawing that many.

One of the bigger problems is sending a lot of render commands rather than just one triangle strip (or instanced quads), but not much can be done there if you're using an Avalonia DrawingContext. Maybe Skia shaders or DrawAtlas could be used.

I'm not sure if you're trying to make a game or a tile map editor. Both would benefit from an embedded renderer (direct use of DX or Vulkan), but basically required for a game that runs every tick. Well, tile editors with animated tiles enabled are running every tick.

If this is for a tile editor, I can try to write a prototype (renderer only) over the next week or two.

[kyuranger]

I created a UniformGrid that supports virtualization and waterfall pagination (it triggers the loading of more data when the page is almost at the bottom), and I think it might solve your problem: https://github.com/kyuranger/Avalonia.SVirtualizingWrapPanel