Avalonia icon indicating copy to clipboard operation
Avalonia copied to clipboard

ItemsRepeater inside of Viewbox leads to invisible items

Open jangernert opened this issue 1 year ago • 2 comments

When a ItemsRepeater is inside a Viewbox the list of shown items doesn't take the Viewbox transformation into account (or at least not correctly). Not all of the items are drawn even though there is enough space due to the Viewbox.

To Reproduce Minimal sample:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:avalonia_showcase.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        x:Class="avalonia_showcase.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Width="300"
        Height="200"
        Title="avalonia_showcase">

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>
    <Grid RowDefinitions="*,30" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

        <Viewbox Grid.Row="0" Stretch="Uniform" StretchDirection="DownOnly">
            <ItemsRepeater Items="{Binding Items}" >
                <ItemsRepeater.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding}" Padding="5"/>
                    </DataTemplate>
                </ItemsRepeater.ItemTemplate>
            </ItemsRepeater>
        </Viewbox>

        <Button Command="{Binding Add}" Content="Add" Grid.Row="1" HorizontalAlignment="Center"/>
    </Grid>
</Window>

The viewmodel is simply a ObservableCollection to which strings can be added with via the button:

using System.Collections.ObjectModel;

namespace avalonia_showcase.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public ObservableCollection<string> Items { get; } = new ObservableCollection<string>();

        public MainWindowViewModel()
        {
            Items.Add("abc");
            Items.Add("def");
        }
        

        public void Add()
        {
            Items.Add("test 123");
        }
    }
}

Expected behavior Since the whole ItemsRepeater is shrunken down to fit all of its content, I'd expect all of it to be visible.

Screenshots Screencast from 2022-10-20 16-57-31 (trimmed).webm

Desktop (please complete the following information):

  • OS: both windows 10 and Fedora 37
  • Version 0.10.18

jangernert avatar Oct 20 '22 15:10 jangernert

I think ItemsRepeater is made for being placed inside a scrollviewer. While this still may be a bug, you may want to try ItemsControl instead. I wonder if it has the same bug or not.

timunie avatar Oct 20 '22 17:10 timunie

@timunie thanks, ItemsControl works as expected.

I always use ItemsRepeater out of habit.

ItemsControl and ItemsRepeater both enable customizable collection experiences, but ItemsRepeater supports virtualizing UI layouts, while ItemsControl does not. We recommend using ItemsRepeater instead of ItemsControl, whether its for just presenting a few items from data or building a custom collection control.

https://learn.microsoft.com/en-us/windows/apps/design/controls/items-repeater

jangernert avatar Oct 20 '22 17:10 jangernert