How to display pictures correctly in ItemsRepeater

[howzew]

I tried to show some pictures in the ItemsRepeater and here's my code:

<ScrollViewer>
	<ItemsRepeater ItemsSource="{Binding ImageList}">
		<ItemsRepeater.Layout>
			<UniformGridLayout ItemsStretch="Uniform" />
		</ItemsRepeater.Layout>
	        <ItemsRepeater.ItemTemplate>
	                <DataTemplate>
		                 <CheckBox >
			                    <Image Source="{Binding Image}" Stretch="UniformToFill" Width="100" Height="100"/>
		                   </CheckBox>
                          </DataTemplate>
	           </ItemsRepeater.ItemTemplate>
	</ItemsRepeater>
</ScrollViewer>

I have two pictures, a square and a rectangle, and they don't show up correctly at the same time

When I set the image to Stretch="UniformToFill", both images are stretched and cannot be displayed in their entirety.

When I set the image to Stretch="Fill", the square ones will display normally, and the rectangular ones will be squeezed.

When I set the image to Stretch="Uniform", the rectangular ones will display normally, while the square ones will be squeezed.

How can we make pictures of different shapes scale normally in the container without being stretched or squeezed?

[maxkatz6]

Uniform:

[thevortexcloud]

Hmm strange. I always rescaled things myself and used a fixed width since it used less RAM and sidestepped a lot of weird virtualisation problems with items repeater. I posted the code I used here:

#13605 (reply in thread)

[howzew]

I have seen this code before and tried it, but it still doesn't solve my problem

[howzew]

@maxkatz6 I think this is a bug, at least a bug in uniform, because uniform should at least keep the ratio of width to height, which is also true from the example image you gave, but in my example, image "G", obviously does not keep the correct aspect ratio

[thevortexcloud]

It's possible. If it is it's unlikely to be fixed, at least officially. Although a PR may still be accepted for it. The code is just a port from UWP IIRC. So there may also be a hint in the UWP docs.

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

That said I am not a member of the Avalonia team, so they may say something else.

[howzew]

It may not be a bug of ItemsRepeater, because I tried using Uniform in ListBox and ItemsControl, and the image also cannot keep the aspect ratio.

[thevortexcloud]

On a side note: ItemsRepeater is being deprecated soonish.

https://github.com/AvaloniaUI/Avalonia.Controls.ItemsRepeater

[howzew]

@timunie Why doesn't the ‘Uniform ’ keep the correct width and height ratio in my example?

[howzew]

yes,and I tried using Uniform in ListBox and ItemsControl, and the image also cannot keep the aspect ratio.

[timunie]

Github doesn't let me download the image. :-(

[timunie]

Working perfectly for me 🤷

[howzew]

I'm very sorry, I finally found the reason. It's because I specified the resolution when generating my image, which caused this problem. Thank you.