Use scroll viewer as layout in ItemRepeaters

[ItsTheSky]

Hi there! I'm trying to display a gallery of images using MVVM, thus I have the following structure code:

            <ScrollViewer VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
               <ItemsRepeater ItemsSource="{Binding Screenshots}">
                   <ItemsRepeater.Layout>
                       <WrapLayout />
                   </ItemsRepeater.Layout>
                   <ItemsRepeater.ItemTemplate>
                       <DataTemplate>
                           <Button Padding="0" ToolTip.ShowDelay="500" Height="150" Width="200" Margin="5">
                               <ToolTip.Tip>
                                   <StackPanel Spacing="5">
                                       <TextBlock
                                           Text="{Binding Title}"
                                           FontSize="20" FontWeight="SemiBold"/>
                                       <TextBlock
                                           Text="{Binding Path}"
                                           FontSize="16"/>
                                   </StackPanel>
                               </ToolTip.Tip>
                   
                              <Image Stretch="UniformToFill" Source="{Binding Image}" />
                           </Button>
                       </DataTemplate>
                   </ItemsRepeater.ItemTemplate>
               </ItemsRepeater>
            </ScrollViewer>

However, the ScrollViewer does not "work" as desired, as I guess it just encapsulates one child, the ItemRepeater. How can I make it work? I tried to find a Scroll Layout but found nothing yet.

No scroll bars shown and I cannot scroll anyhow

[timunie]

Is there a StackPanel around the ScrollViewer by any chance?

[ItsTheSky]

Nope, it's a Grid

[timunie]

please use DevTools F12 to figure out if ScrollViewer has fixed height.

[ItsTheSky]

[timunie]

look, there is a StackPanel around which is the issue here. Use a Grid and it should be okay

[ItsTheSky]

Hum so to make it work correctly I have to define a grid with a lot of rows ... to act the same as the stack panel?

[timunie]

Yes. StackPanel can grow infinite and thus height is not limited for Scrollv. DockPanel can also work

[ItsTheSky]

Gotcha, thanks for the tip, with a Grid it works fine now!

[thevortexcloud]

I have a similar setup in one of my apps which works fine (although I am using a stack panel instead of a wrap panel). The scrolling however does get a bit awkward when using virtualisation without a fixed width for the the image control, as Avalonia has no idea how wide everything is until it tries to load it. As such the template looks like this:

      <ItemsRepeater.ItemTemplate>
                <DataTemplate DataType="viewModels:Thumbnail">
                    <ListBoxItem Margin="2">
                        <Image Source="{CompiledBinding ThumbnailAsync^}" Width="200" />
                    </ListBoxItem>
                </DataTemplate>
            </ItemsRepeater.ItemTemplate>

The key thing is a hardcoded width of 200. I imagine a similar thing would work for you.

[ItsTheSky]

Hum so I should use a ListBox as parent and each of my images should be boxed inside a ListBoxItem?
Right now my images have fixed size (150x200), thus I'm not sure to understand what you mean

[thevortexcloud]

Ah apologies for that. The listbox item is just what I am using for my item container in the item repeater as it already implements some of the functionality used for item selection, which saved me some time with implementing selection for the ItemsRepeater. There is no actual listbox involved.

You don't need to use a ListboxItem if you don't want to. The main thing you need to do is set the content to an explicit fixed size width ahead of time. If you don't set an explicit width on the item control itself, scrolling acts real weird if you enable virtualisation. If you turn it off performance will be awful, but scrolling will behave as expected.

That said, I also just did a quick experiment with my implementation. Using a wrap layout makes the performance awful, which makes me think it's not virtualising at all. Using a UniformGridLayout however works fine as does the StackLayout. I am guessing you need to try something else besides wrap layout. According to the UWP docs (which the Avalonia control is ported from) UniformGrid should wrap anyway:

The UniformGridLayout positions elements sequentially in a wrapping layout. Items are layed out in order from left-to-right when the Orientation is Horizontal, and layed out top-to-bottom when the Orientation is Vertical. Every item is sized equally.