Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

XAML:

<ListView x:Name="searchResultsList" IsItemClickEnabled="True" ItemClick="ListView_ItemClick" ItemsSource="{Binding searchResults}">    <ListView.ItemContainerStyle>       <Style TargetType="ListViewItem">           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>           <Setter Property="Margin" Value="0,0,0,20" />       </Style>    </ListView.ItemContainerStyle>    <ListView.ItemTemplate>       <DataTemplate>           <Grid>              <Grid.ColumnDefinitions>                 <ColumnDefinition Width="80" />                 <ColumnDefinition Width="10" />                 <ColumnDefinition Width="*" />              </Grid.ColumnDefinitions>               <Border Width="80" Height="80">                 <Image Source="{Binding Image}" />              </Border>               <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}" />              </StackPanel>            </Grid>        </DataTemplate>    </ListView.ItemTemplate>  </ListView> 
like image 578
CoreyRalli Avatar asked Jun 23 '14 08:06

CoreyRalli


1 Answers

So this seems to be an OS issue, as evidenced in this thread on the MS forums: http://social.msdn.microsoft.com/Forums/en-US/9a363d33-5760-4d38-9c81-84259c4edcbe/listview-jiggles-horizontally-when-large-item-about-to-scroll-in-or-out-in-windows-phone-81-preview?forum=WindowsPhonePreviewSDK&prof=required.

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"> <ListView>  <ListView.ItemTemplate>    <DataTemplate>      <Grid Width={Binding ActualWidth, ElementName=contentRoot} />     </DataTemplate>   </ListView.ItemTemplate> </ListView> </Grid> 
like image 81
CoreyRalli Avatar answered Oct 02 '22 20:10

CoreyRalli