locked
ListView not Rendering/Scrolling Contents Properly when inside FlipView

    Question

  • Hi,

    I'm developing a Windows Store App with C# and XAML and came across a problem with multiple ListView controls nested within a single horizontally scrolling FlipView whereby the ListView contents (particularly of the final ListView on the last FlipView page) are not rendering correctly - the content halfway down the list appears to be blank, and the scrolling stutters and doesn't work properly! When this happens, even scrolling back up to the top of the list sometimes doesn't cause the items to reappear so that the list appears to be completely empty, even though it's not (as shown by the size of the scroll bar). The issue appears to be related to gestures because when I use the Mouse to flip the pages I don't appear to get the problem.

    I've managed to reproduce the issue reliably in a small demo app, boiling it down to the bare minimum code necessary to demonstrate. The demo is extremely simple so you should have no trouble reproducing the problem. All you have to do is to create a Blank Windows Store App (C# and XAML) project and replace the MainPage.xaml and MainPage.xaml.cs with those shown below.

    You should note that when you swipe the FlipView pages, the data for that page is loaded on demand (a list of 200 integers) so there is a slight delay on each page. To fully demonstrate the issue, you should allow the data to load for that page before proceeding and all of your interactions should be via gestures - no mouse! When you get to the last page with the Green ListView, the numbers should be in the range of 401 to 600, however you should find when you scroll down that the list will only show the numbers from 401 to 442 and the rows after that are all blank. When this happens, if you play about with the scrolling you can make the list content disappear altogether!

    This UI forms a nice part of a windows store app I'm developing so I've spent quite a while trying to figure out what is going wrong to no avail. Any ideas what's causing this strange behaviour?

    The source code is here below - first the MainPage.xaml...

    <Page
         x:Class="FlippinAwful.MainPage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="using:FlippinAwful"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d">
    
        <Grid Background="AliceBlue">
             <FlipView x:Name="FlipityDoDah"
                       Background="DarkRed"                  
                       Margin="0" 
                       Padding="80,0" 
                       Height="430">
                 <FlipView.Resources>
                     <Style TargetType="ListView">
                         <Setter Property="Width" Value="200"/>    
                     </Style>
                 </FlipView.Resources>
                 <TextBlock FontSize="18">Swipe to Load Data Lists on Demand.</TextBlock>
                 <ListView x:Name="List1" Background="Navy" ItemsSource="{Binding TestData1}"/>
                 <ListView x:Name="List2" Background="Orange" ItemsSource="{Binding TestData2}"/>
                 <ListView x:Name="List3" Background="DarkGreen" ItemsSource="{Binding TestData3}"/>
             </FlipView>
         </Grid>
     </Page>
    

    And finally the code behind, MainPage.xaml.cs...

    using System.Collections.ObjectModel;
     using System.Linq;
     using Windows.UI.Xaml.Controls;
    
    namespace FlippinAwful
     {
         public sealed partial class MainPage : Page
         {
             public MainPage()
             {            
                 this.InitializeComponent();                        
                 TestData = new ViewModel();
                 FlipityDoDah.SelectionChanged += FlipityDoDah_SelectionChanged;
             }
    
            public ViewModel TestData { get; set; }
    
            void FlipityDoDah_SelectionChanged(object sender, SelectionChangedEventArgs e)
             {
                 FlipView myFlipView = sender as FlipView;
                 if (myFlipView != null)
                 {
                     switch (myFlipView.SelectedIndex)
                     {
                        case 1:
                             {
                                 List1.ItemsSource = TestData.TestData1;
                                 break;
                             }
                         case 2:
                             {
                                 List2.ItemsSource = TestData.TestData2;
                                 break;
                             }
                         case 3:
                             {
                                 List3.ItemsSource = TestData.TestData3;
                                 break;
                             }
                     }
                 }
             }
         }
    
        public class ViewModel
         {
             public ViewModel()
             {
                 var _testData1 = Enumerable.Range(1, 200);
                 var _testData2 = Enumerable.Range(201, 200);
                 var _testData3 = Enumerable.Range(401, 200);
    
                TestData1 = new ObservableCollection<int>(_testData1);
                 TestData2 = new ObservableCollection<int>(_testData2);
                 TestData3 = new ObservableCollection<int>(_testData3);
             }
             public ObservableCollection<int> TestData1 { get; private set; }
             public ObservableCollection<int> TestData2 { get; private set; }
             public ObservableCollection<int> TestData3 { get; private set; }
         }
     }
    

    Any insight would be much appreciated!

    Thanks!
    Derek


    Dev


    Thursday, November 6, 2014 5:27 PM

Answers

  • Hello Derek,

    I can reproduce your issue in Surface Pro. When I change the the ItemPanelTemplate in FlipView, the problem solved. Please see the following code snippet.

    <Page.Resources>
           <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <StackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </Page.Resources>
        <Grid Background="AliceBlue">
            <FlipView x:Name="FlipityDoDah"
                      Background="DarkRed"                  
                      Margin="0" 
                      Padding="80,0" 
                      Height="430">
                <FlipView.Resources>
                    <Style TargetType="ListView">
                        <Setter Property="Width" Value="200"/>
                    </Style>
                </FlipView.Resources>
                <FlipView.ItemsPanel>
                    <StaticResource ResourceKey="ItemsPanelTemplate1"/>
                </FlipView.ItemsPanel>
                <TextBlock FontSize="18">Swipe to Load Data Lists on Demand.</TextBlock>
                <ListView x:Name="List1" Background="Navy" />
                <ListView x:Name="List2" Background="Orange" />
                <ListView x:Name="List3" Background="DarkGreen" />
            </FlipView>
    </Grid>
    

    I don’t know how to tell you the reason, but I think this should be a work around. Please test it and let me know the result.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Wednesday, November 12, 2014 6:35 AM
    Moderator

All replies

  • Hi:

    I test your code via gestures , but no such behavior like you said.

    Have you ever tested it on another computer ?


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    Thursday, November 6, 2014 7:19 PM
  • Thanks Bill,

    Appreciate you taking the time to look into this and good to know that you can get my code sample running.

    It's strange that you can't reproduce the issue because I can reliably get it to fail every time, provided I follow a set sequence.

    It's important that when you navigate between the flip views that you swipe with your finger, rather than using the stylus/pen or the mouse otherwise all the numbers from 400 to 600 will show up in the last list!

    It's also important that when swiping you wait a few seconds for each of the lists of numbers to fully load before swiping to the next page. So to ensure this, you could for example scroll down with your finger till you see number 200, [swipe], scroll down till you see 400, [swipe], scroll down till you see item 600 (on my machine it only renders to number 442 the remaining lines are blank).

    Below is a screenshot showing what I'm getting, as now I'm feeling a little paranoid that this is only happening to me!

    I have since tried rebooting my machine and immediately running the demo as a standalone local app package outside of visual studio, just in case the issue was due to low memory and I still get the issue.

    I'm currently running the demo on a Microsoft Surface Pro with 4GB Ram so hardware compatibility shouldn't be an issue.

    It's difficult, being a Windows Store App, to try and get it to run on another machine - the whole sideloading experience is a pain to be honest - it's giving a certificate error when my colleague tries to install the App Package.

    In case you have better luck, I'm putting the App Package up on DropBox, maybe you could try running that to see if there is a difference perhaps?

    To download my entire demo project source (including the App Package) see this dropbox link:-

    Demo App Project Source

    UPDATE!

    My colleague on a different Microsoft Surface Pro machine has loaded my source project and compiled and ran the demo and can confirm he is getting the same issue that I am. He says that in the final screen the list stops at 443 when using gestures!

    Can you download my project using the link above and try to reproduce this problem on your side? Thanks!


    Dev

    Friday, November 7, 2014 12:53 PM
  • Another Update!!!

    My colleague has run the same project using Windows 10 and does NOT get the issue!

    So, is this a problem relating to Windows 8.1 or the Microsoft Surface Pro?


    Dev

    Friday, November 7, 2014 1:00 PM
  • Any news on this issue, since I've confirmed that another developer can reproduce the same problem?

    It would be good to know if there is going to be a fix for this issue or if there is a workaround?

    Thanks!


    Dev

    Monday, November 10, 2014 2:30 PM
  • Hello Derek,

    I can reproduce your issue in Surface Pro. When I change the the ItemPanelTemplate in FlipView, the problem solved. Please see the following code snippet.

    <Page.Resources>
           <ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
                <StackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </Page.Resources>
        <Grid Background="AliceBlue">
            <FlipView x:Name="FlipityDoDah"
                      Background="DarkRed"                  
                      Margin="0" 
                      Padding="80,0" 
                      Height="430">
                <FlipView.Resources>
                    <Style TargetType="ListView">
                        <Setter Property="Width" Value="200"/>
                    </Style>
                </FlipView.Resources>
                <FlipView.ItemsPanel>
                    <StaticResource ResourceKey="ItemsPanelTemplate1"/>
                </FlipView.ItemsPanel>
                <TextBlock FontSize="18">Swipe to Load Data Lists on Demand.</TextBlock>
                <ListView x:Name="List1" Background="Navy" />
                <ListView x:Name="List2" Background="Orange" />
                <ListView x:Name="List3" Background="DarkGreen" />
            </FlipView>
    </Grid>
    

    I don’t know how to tell you the reason, but I think this should be a work around. Please test it and let me know the result.

    Regards,


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. Click HERE to participate the survey.

    Wednesday, November 12, 2014 6:35 AM
    Moderator
  • Thank you very much for responding Herro, your solution does indeed work in both the demo and my 'live' application. However, I had to make a minor adjustment to the layout because when you switch in the StackPanel in place of the VirtualizingStackPanel which is the default, the FlipView didn't seem to honor the padding I had configured on it, which is strange. Not a big issue as I simply added added a grid to each of the FlipView pages and placed the required padding in the grid instead.

    So Herro, it seems that this is possibly a bug with the VirtualizingStackPanel that is present in the default FlipView template, as switching in an ordinary StackPanel fixes the issue. 

    Should this be escalated as a bug with Microsoft so that it gets fixed rather than just working around it? Maybe they need to be made aware of the issue?

    In my case, I only have 4 FlipPages so switching out the VirtualizingStackPanel is not a big deal, but for others with more content than I have, the workaround could turn into a memory issue for them...

    Again, many thanks for helping with this, as it was a really annoying issue for us.

    Derek


    Dev

    Tuesday, November 18, 2014 1:17 PM