locked
ListView and Incremental Loading. Excellent when scrolling the down, but scrolling up causes flickering

    Question

  • Hi all,

    I have a SemanticZoom control with a ListView:

    <SemanticZoom Grid.Row="1">
    			<SemanticZoom.ZoomedInView>
    				<ListView x:Name="ListViewGroups" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}">
    					<ListView.ItemTemplate>
    						<DataTemplate>
    							<Grid>
    								<Grid.RowDefinitions>
    									<RowDefinition Height="Auto"/>
    									<RowDefinition Height="Auto"/>
    									<RowDefinition Height="Auto"/>
    								</Grid.RowDefinitions>
    								<Grid Margin="0" Background="{Binding EventColor}" Height="36">
    									<Grid.ColumnDefinitions>
    										<ColumnDefinition Width="36"/>
    										<ColumnDefinition/>
    									</Grid.ColumnDefinitions>
    									<Grid Background="#54000000">
    										<Image HorizontalAlignment="Center" VerticalAlignment="Center" Source="{Binding EventIcon}" Width="24" Height="24" Margin="0">
    											<interactivity:Interaction.Behaviors>
    												<core:IncrementalUpdateBehavior Phase="1"/>
    											</interactivity:Interaction.Behaviors>
    										</Image>
    										<interactivity:Interaction.Behaviors>
    											<core:IncrementalUpdateBehavior Phase="1"/>
    										</interactivity:Interaction.Behaviors>
    									</Grid>
    									<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Event.EventName}" VerticalAlignment="Top" Grid.Column="1" FontFamily="Open Sans" FontWeight="Bold" Margin="6,4,0,0">
    										<interactivity:Interaction.Behaviors>
    												<core:IncrementalUpdateBehavior Phase="1"/>
    											</interactivity:Interaction.Behaviors>
    									</TextBlock>
    									<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Region.RegionName}" VerticalAlignment="Bottom" Grid.Column="1" Margin="6,0,0,4" FontFamily="Open Sans" FontSize="9.333" Foreground="#B2FFFFFF">
    										<interactivity:Interaction.Behaviors>
    												<core:IncrementalUpdateBehavior Phase="1"/>
    											</interactivity:Interaction.Behaviors>
    									</TextBlock>
    									<TextBlock HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding MinutesSinceCreation}" VerticalAlignment="Center" Grid.Column="1" Margin="0,0,6,0">
    										<interactivity:Interaction.Behaviors>
    												<core:IncrementalUpdateBehavior Phase="1"/>
    											</interactivity:Interaction.Behaviors>
    									</TextBlock>
    									<interactivity:Interaction.Behaviors>
    										<core:IncrementalUpdateBehavior Phase="1"/>
    									</interactivity:Interaction.Behaviors>
    								</Grid>
    								<Image Margin="0" Source="{Binding EventImage}" Grid.Row="1">
    									<interactivity:Interaction.Behaviors>
    										<core:IncrementalUpdateBehavior Phase="1"/>
    									</interactivity:Interaction.Behaviors>
    								</Image>
    								<Grid Margin="0" Grid.Row="2">
    									<Grid.RowDefinitions>
    										<RowDefinition Height="Auto"/>
    										<RowDefinition Height="Auto"/>
    									</Grid.RowDefinitions>
    									<Grid Margin="0,0,0,2" Height="36">
    										<Grid.ColumnDefinitions>
    											<ColumnDefinition Width="Auto"/>
    											<ColumnDefinition/>
    											<ColumnDefinition Width="56"/>
    										</Grid.ColumnDefinitions>
    										<Grid Margin="0,0,2,0" Background="#4CFFFFFF">
    											<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="LEVEL" VerticalAlignment="Top" Margin="6,6,6,0" FontFamily="Assets/Fonts/Roboto-Thin.ttf#Roboto Thin" FontSize="8"/>
    											<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Level}" VerticalAlignment="Bottom" Margin="6,0,0,6" FontFamily="Assets/Fonts/HelveticaNeue-Light.otf#Helvetica Neue" FontWeight="Bold" FontSize="13.333"/>
    										</Grid>
    										<Grid Margin="0,0,2,0" Background="#4CFFFFFF" Grid.Column="1">
    											<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="GAMERTAG" VerticalAlignment="Top" Margin="6,6,6,0" FontFamily="Assets/Fonts/Roboto-Thin.ttf#Roboto Thin" FontSize="8"/>
    											<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding GamerTag}" VerticalAlignment="Bottom" Margin="6,0,0,6" FontFamily="Assets/Fonts/HelveticaNeue-Light.otf#Helvetica Neue" FontWeight="Bold" FontSize="13.333"/>
    										</Grid>
    										<Button Content="Chat" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Grid.Column="3" BorderThickness="0" MinWidth="0" MinHeight="0" Padding="0" FontFamily="Assets/Fonts/HelveticaNeue-Light.otf#Helvetica Neue" FontSize="13.333" Background="#99FFFFFF" VerticalContentAlignment="Stretch" Style="{StaticResource ChatButtonStyle}"/>
    										<interactivity:Interaction.Behaviors>
    											<core:IncrementalUpdateBehavior Phase="2"/>
    										</interactivity:Interaction.Behaviors>
    									</Grid>
    									<Grid Margin="0,0,0,16" Background="#4CFFFFFF" Grid.Row="1">
    										<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="NOTE" VerticalAlignment="Top" Margin="6,6,6,0" FontFamily="Assets/Fonts/Roboto-Thin.ttf#Roboto Thin" FontSize="8"/>
    										<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Note}" VerticalAlignment="Top" Margin="6,13,0,6" FontFamily="Assets/Fonts/HelveticaNeue-Light.otf#Helvetica Neue" FontWeight="Bold" FontSize="13.333"/>
    										<interactivity:Interaction.Behaviors>
    											<core:IncrementalUpdateBehavior Phase="3"/>
    										</interactivity:Interaction.Behaviors>
    									</Grid>
    								</Grid>
    							</Grid>
    						</DataTemplate>
    					</ListView.ItemTemplate>
    					<ListView.GroupStyle>
    						<GroupStyle HidesIfEmpty="True" ContainerStyle="{StaticResource GroupItemStyle}">
    							<GroupStyle.HeaderTemplate>
    								<DataTemplate>
    									<Grid Background="{Binding EventColor}" Height="36" HorizontalAlignment="Stretch">
    										<Grid.ColumnDefinitions>
    											<ColumnDefinition Width="36"/>
    											<ColumnDefinition/>
    										</Grid.ColumnDefinitions>
    										<TextBlock Text="{Binding EventName}" Grid.Column="1" VerticalAlignment="Center" Margin="6,0,24,0" FontFamily="Assets/Fonts/HelveticaNeue-Light.otf#Helvetica Neue" FontSize="18.667" FontWeight="Bold" />
    										<Image Grid.Column="0" HorizontalAlignment="Center" Height="28" VerticalAlignment="Center" Width="28" Source="{Binding EventIcon}"/>
    									</Grid>
    								</DataTemplate>
    							</GroupStyle.HeaderTemplate>
    						</GroupStyle>
    					</ListView.GroupStyle>
    				</ListView>
    			</SemanticZoom.ZoomedInView>
    			<SemanticZoom.ZoomedOutView>
    				<ListView ItemsSource="{Binding Source={StaticResource groupedItemsViewSource},ElementName=groupedItemsViewSource,Path=CollectionGroups}" IsZoomedInView="False" Background="#A8000000" Header="Events" HeaderTemplate="{StaticResource ListViewHeaderZO}">
    					<ListView.ItemTemplate>
    						<DataTemplate>
    							<Grid Background="{Binding Converter={StaticResource JumpListItemBackgroundConverter}}" Height="48" HorizontalAlignment="Stretch" Margin="24,0,24,12">
    								<TextBlock Text="{Binding Group.EventName}" Grid.Column="1" VerticalAlignment="Center" Margin="12,0,0,0" FontFamily="Assets/Fonts/HelveticaNeue-Light.otf#Helvetica Neue" FontSize="18.667" FontWeight="Bold" />
    							</Grid>
    						</DataTemplate>
    					</ListView.ItemTemplate>
    					<ListView.ItemContainerStyle>
    						<Style TargetType="ListViewItem">
    							<Setter Property="HorizontalContentAlignment" Value="Stretch" />
    						</Style>
    					</ListView.ItemContainerStyle>
    				</ListView>
    			</SemanticZoom.ZoomedOutView>
    		</SemanticZoom>

    When I am scrolling the list down, everything is smooth, stuff is rendered and there is no flickering no matter how eager I swipe. However, when I scroll up... The flickering rears it's ugly head and it looks like crap... How can I fix the flickering problem when scrolling both ways?

    Tuesday, October 28, 2014 1:37 PM

Answers

  • Hello,

    It is very strange that you would only see flickering in one direction. I took a quick look at your XAML and the only thing that I see that could cause performance problems is the fact that you are setting the "Phase" of your images to "1". I would recommend spreading this out. Specify a Phase of 3 for your images and 2 for text that doesn't need to be loaded right away. This will help the incremental updater have a head start on what needs to be loaded right away and what can be deferred.

    I hope this helps,

    James


    Windows SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Tuesday, October 28, 2014 8:59 PM
    Moderator

All replies

  • Hello,

    It is very strange that you would only see flickering in one direction. I took a quick look at your XAML and the only thing that I see that could cause performance problems is the fact that you are setting the "Phase" of your images to "1". I would recommend spreading this out. Specify a Phase of 3 for your images and 2 for text that doesn't need to be loaded right away. This will help the incremental updater have a head start on what needs to be loaded right away and what can be deferred.

    I hope this helps,

    James


    Windows SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Tuesday, October 28, 2014 8:59 PM
    Moderator
  • I have the exact same behavior in multiple ListViews.

    It happens when Scrolling up when the list is "a little longer" (about 30+ items).

    Setting the Item contents to a fixed height did fix the problem (but is not a suitable solution for my case).


    Don't learn a programming language, but learn "programming".

    Friday, December 05, 2014 10:58 PM
  • Did you try changing the "IncrementalUpdateBehavior Phase" to a higher value?

    -James


    Windows SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Tuesday, December 09, 2014 10:22 PM
    Moderator