3

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 ^^.

RuiK_Art
  • 31
  • 4
  • Why are you concerned with it loading three items? This is a good thing. It allows best performance for your users and best memory usage as well – Shawn Kendrot May 18 '17 at 17:05

1 Answers1

2

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.

Sunteen Wu
  • 10,509
  • 1
  • 10
  • 21
  • Hi Sunteen Wu, great explanation. When checking the VirtualizingStackPanel, there was 3 items as you said. I will investigate the demo from @Martin Zikmund, which seems to be what I would want. Thanks! – RuiK_Art Jan 30 '17 at 13:27
  • After using a similar logic from the demo by **@Martin Zikmund** (tailored for my own use), it still keeps previous items in cache, causing a weird behaviour. Previous items are kept in cache. I think I will try using a Pivot instead of a FlipView, and come back to you. Thanks for the help. – RuiK_Art Jan 30 '17 at 16:52