CODEWITHSUNDEEP
c#xamluwpflipview
RuiK_Art
RuiK_Art

Reputation: 31

UWP - FlipView - Need FlipView to only load a single item content

I have been struggling for the last week trying to implement a FlipView in the like of the Microsoft News UWP app.

I tried the following: a FlipView With an ItemTemplate and an ObservableCollection with my items. However this caused the whole lot of items within my ObservableCollection to be pre-loaded, which is not what I want.

Has anyone got any tip allowing me to change this behaviour of the FlipView to be as follows: Only the first item is loaded, then when I click the arrow, the next item gets loaded.

Thanks in advance :)

UPDATE: I can confirm that the behaviour is as @Sunteen Wu - MSFT said. I also tried using a similar logic to the one on fund the demo by @Martin Zikmund, however, it was not clearing the previous item

My goal is to load 1 single item at a time. The behaviour like so:
1) I see 1 item
2) If I click the > (next) arrow:
* this item is unloaded from the flipview
* the next item is loaded
3) if I click the < (previous) arrow:
* this item is unloaded from the flipview
* the previous item is re-loaded

Hope someone can help, I really want to give that feature to my users ^^.

Upvotes: 3

Views: 805

Answers (1)

Sunteen Wu
Sunteen Wu

Reputation: 10627

However this caused the whole lot of items within my ObservableCollection to be pre-loaded

FlipView control's ItemsPanelTemplate contains VirtualizingStackPanel. So the FlipView control supports virtualization at default. You can check the visual tree when you debugging the app, you may find no matter how many items you bind to the FlipView, it only load three FlipViewItem at default.

enter image description here

So in my opinion, the FlipView will not pre-loaded the whole items of your ObservableCollection , by default it may load the previous one, current one and the next one, unless you change the ItemPanel to StackPanel which doesn't support virtualization.

 <FlipView x:Name="flipView1" Width="480" Height="270" 
   BorderBrush="Black" BorderThickness="1">
     <FlipView.ItemsPanel>
         <ItemsPanelTemplate>
             <StackPanel />
         </ItemsPanelTemplate>
     </FlipView.ItemsPanel>
     <FlipView.ItemTemplate>
        ...
     </FlipView.ItemTemplate>
 </FlipView>

Only the first item is loaded, then when I click the arrow, the next item gets loaded.

As FlipView using virtualization so that I guess you don't still need this feature. If you still want it, you can try to bind source to the FlipView with instance data is empty and every time the selection changed, force load the content manually. For this you may reference this similar thread that @Martin Zikmund provides a demo for single loading.

Additionally, according to Do's and don'ts remarks of FlipView:

Avoid using a flip view control for larger collections, as the repetitive motion of flipping through each item can be tedious.

If you do have a larger collection for binding, avoid using a flip view but consider a List view or grid view.

Upvotes: 2

Related Questions