Feature request: LoopItemsPanel

[Vijay-Nirmal]

This control helps dev to easy achieve looping Items in ItemsControl.

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <controls:LoopItemsPanel/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

There is a Microsoft blog post to create this Panel.

I found a similar UserVoice

[mdtauk]

Is this not a Carousel that loops? Why not add a loop option to that control?

[Vijay-Nirmal]

@mdtauk Because looping Carousel will not cover all use cases of looping items. Ex: Carousel always has selected item at centre. In short, Carousel will not cover all the use case of ListViewBase(ListView, GridView, etc). Also, this panel can be easily reused in future controls like TrainView #1209, where it makes lot of sence to have looping items.

[mdtauk]

Hmm. From a design point of view, how do you indicate when a loop starts. A scrollbar indicator goes from one point to another. How does that work when there is no finite range? How does it work with mouse and keyboard control?

There is a lot to consider, and then finding use-cases that justify this kind of control needs to be collated. To see if it is worth the investment of time that would go into it, and to iron out the problems and issues related to it.

[Vijay-Nirmal]

@mdtauk I get this idea from Microsoft blog post. They have explained it with a sample code.

[michael-hawker]

I like the idea of generalizing this. I think the sticking point as @mdtauk mentioned is how the scrollbar behaves with each control.

[birbilis]

I would really like to be able to loop to the start of a long scrolling list (say on the phone) when I reach the bottom. Possibly with a customizable (and optional) visual end marker (horizontal, or vertical if list is horizontral, ruler) so that the looping occurrence is more obvious to the user. And I mean to add "Looping" bool property (defaulting probably to false if xaml-standard opts for compatibility over UX) to any List control that can scroll when it can't fit all its items in the view

[birbilis]

...and loop in the other way too, when I pull enough to overcome spring animation at the start of the list view, I'd like it to loop. Useful for lists that are sorted and long and you know you want to start browsing from the bottom without doing a resorting (or when multiple resorting UIs are too much to add - eg at data entry form fields)

[Mimetis]

I'm actually the author of the LoopItemsPanel, and the Carousel control.

I think (in my opinion) the question is :

1. Do we have to implement the loop mode in the Carousel (see Loop for Carousel #1462 )
2. Do we have to create instead an ItemsPanelTemplate to be able to customize any ItemsControl control
3. Both ?

[Vijay-Nirmal]

@Mimetis In my opinion "create an ItemsPanelTemplate to be able to customize any ItemsControl control" will have higher priority than "implement the loop mode in the Carousel". Devs can create looping Carousel with LoopItemsPanel but not vice versa. "Both" is good for devs.

[Mimetis]

The ItemsPanel Inside the Carousel is highly coupled with the control itself.
Actually, it's not possible to replace the Carousel's ItemsPanel with another one.
I already thought to change this behavior to have a carousel control without any dependencies with its items panel, but it's really complicated.
So for now, if you want a LoopItemsPanel to be able to use it in a Listbox or a ListView, you won't have it for the Carousel

[nmetulev]

@Mimetis, what about creating a LoopItemsPanel and extending the CarouselPanel from the LooptemsPanel to get the looping experience?

[birbilis]

BTW, how are you doing the looping? Are you using some Enumerable implementation that yields items infinitely by looping a cursor over a collection of items? (and having some property on whether it loops at end or not?) However, since Enumerables are one direction only, I wonder how they’d be used, so guess you’re not using such. Or have Enumerables evolved since last time I checked them?

[Mimetis]

@birbilis : As explained in the blog post, it' all about positioning items during the UpdatePosition method.
Nothing really complicated, actually.
Using the RenderTransform to virtually be able to position the item at the right place :)

@nmetulev : Yea, you're so right :) Definitively the right solution, I guess. Actually it won't be easy, but it's will be a really cool feature if we can do that.
But it will be a big breaking changes from the actual Carousel
First of all, do you think that creating the LoopItemsTemplate for any ListBox / ListView is a good starting point ?
To be honest I'm afraid that everyone will complained that the LoopItemsTemplate will not be compatible with the Carousel

[birbilis]

When doing UI virtualization (say when you have tons of elements to display) I thought that the idea was to have a fixed number of UI items and reuse them. Do you mean you're rearranging that fixed number of items for more speed (wonder if it is faster than just repopulating different ones of the existing UI items) or that you have one UI item per element (no virtualization)?

[nmetulev]

Agree that the best place to start is with the LoopItemsTemplate. I think we will learn a lot on how to do the same for the carousel in the process.

I also agree that virtualization is a requirement for a panel such as this.

[birbilis]

I had collected some related links here:
https://www.dropbox.com/sh/uo8m5yw5et1arc5/AACxUYMr5xsWj1B1-3ffRTDya?dl=0

is UWP doing things differently there compared to WPF's approach?

[lukasf]

Well, most importantly, the WPF VirtualizingPanel is NOT sealed.

[birbilis]

in that case I'd go for:

1. inform MS (via uservoice and/or Microsoft connect if applicable) on the need to unseal it or provide a descendant class that isn't sealed, aka CustomVirtualizingPanel. Also post on xaml-standard effort's repository about that issue. Probably some wiki entry or blog post is first needed to explain the issue
2. decompile existing UWP code if possible
3. find WPF implementations of custom virtualizing panels (maybe the links I shared have something related) and try to port them
4. decompile existing WPF implementation and try to port to WPF
5. see what Mono does
6. see what Xamarin.Forms does (if it supports Virtualizing containers)
7. see what other WPF inspired frameworks (Avalonia, Noesis, etc.) do about Virtualization

[birbilis]

indeed, at
https://blogs.msdn.microsoft.com/dancre/2006/02/06/implementing-a-virtualized-panel-in-wpf-avalon/
it also says about descending from VirtualizingPanel. So I'd first checkout what that one was doing in WPF using decompilation or Mono/Microsoft sources. I'd expect such classes to be implementing some interfaces that you could also implement instead of being forced to descend from them.

"WPF has a built in virtualizing panel called VirtualizingStackPanel that supports UI virtualization and lays out its children like StackPanel. ListBox uses this panel by default. However, if you want to lay out your children differently, you need to write your own Panel that supports virtualization. WPF has a VirtualizingPanel class you can descend from to do this, but it’s still a fair amount of work. I’ll describe how to write your own virtualizing panel in this series of posts."

[lukasf]

I created a UserVoice item for this a few months back.

https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/18327196-open-up-virtualizingpanel-and-orientedvirtualizing

[lucaasrojas]

Whats the current status?

[touseefbsb]

it looks like the uservoice has 17 votes for this one. @Vijay-Nirmal

[hupo376787]

23 votes now.
Does it still under investing?

[michael-hawker]

@hupo376787 I think this scenario is covered by WinUI now, eh @JustinXinLiu?

@JustinXinLiu would this just be an example or is there enough code that it should have a helper?

[hupo376787]

Hmm,,,

[skendrot]

Anyone wanting a virtualized looping list take a look at this. Great performance the new Repeater from WinUI
https://github.com/microsoft/InsiderDevTourDemos19/blob/master/Sessions/ui/Uwp.App/Uwp.App/Layouts/VirtualizingUniformCarousalStackLayout.cs

[hupo376787]

Thanks, @skendrot . I'll look into it.

[michael-hawker]

Thanks for the link and reminder @skendrot. @JustinXinLiu you going to add this to the toolkit 😉 or is there something missing from it still?

[JustinXinLiu]

This should be a layout control provided by WinUI. @skendrot would you mind creating an issue on WinUI GitHub page?

[birbilis]

btw, conceptually I'd prefer to just have a Looping Boolean property/attribute somewhere, rather than a separate layout control, however the 2nd case is probably more flexible for modifications (assuming sealing isn't used)