ListView in Windows Phone 8.1 Wobbles while scrolling though long list (XAML)

Posted by  ben reitman
 3326  View(s)
Rate this:
I'm having issues with scrolling through ListViews in my Windows Phone 8.1 App. Short lists scroll just fine, scrolling smoothly however as soon Virtualization kicks in the entire ListView "wobbles" to the left slightly, but noticeable enough to be annoying.

I've tried remove all the transitions to no effect as well as having items load incrementally to no success. Setting the item panel to a StackPanel (removing virtualization) fixes the issue but is not preferable.

My listviews are binding to a property in the DefaultViewModel that comes with the Basic Page Template.

What am I doing wrong and what are causing my ListViews to exhibit this behavior?

<ListView x:Name="searchResultsList" IsItemClickEnabled="True" ItemClick="ListView_ItemClick" ItemsSource="{Binding searchResults}">
      <Style TargetType="ListViewItem">
          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
          <Setter Property="Margin" Value="0,0,0,20" />
                <ColumnDefinition Width="80" />
                <ColumnDefinition Width="10" />
                <ColumnDefinition Width="*" />
             <Border Width="80" Height="80">
                <Image Source="{Binding Image}" />
             <StackPanel Grid.Column="2">
                <TextBlock Text="{Binding PodcastTitle}" TextWrapping="WrapWholeWords" FontSize="{StaticResource TextStyleExtraLargeFontSize}" />
                <TextBlock Text="{Binding LastUpdated, Converter={StaticResource dateConverter}}" Style="{ThemeResource ListViewItemSubheaderTextBlockStyle}" />
                <TextBlock Text="{Binding PodcastArtist}" TextWrapping="WrapWholeWords" Style="{ThemeResource ListViewItemContentTextBlockStyle}" />

  1. Re: ListView in Windows Phone 8.1 Wobbles while scrolling though long list (XAML)

    So this seems to be an OS issue,the issue does indeed lie in virtualization, with items that have no fixed width. Using star as the width or making the horizontal alignment stretch won't work so the only solution that takes account orientation and resolution was to bind the width to the ListView's container's ActualWidth property:

    <Grid x:name="contentRoot" Margin="19,9.5,19,0">
         <Grid Width={Binding ActualWidth, ElementName=contentRoot} />