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

Question

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>

So "wobbles" was the thing to google for... I couldn't figure out how to describe the phenomenon...! — Factor Mystic
– Factor Mystic, Commented Oct 9, 2014 at 2:50
@FactorMystic Same here. I didn't know what to look for. I think, that is the reason this issue isn't drawing enough attention. — akshay2000
– akshay2000, Commented Oct 18, 2014 at 9:37

CoreyRalli · Accepted Answer · 2014-06-25 04:13:51Z

23

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>

answered Jun 25, 2014 at 4:13

CoreyRalli

7245 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jens Marchewka Over a year ago

This will cause my first Item in list to not Display, any suggestions?

mjollneer Over a year ago

Used it for userControl and everything was fine, but suddenly i noticed, that this binded width does not follow root width in runtime changes, such as device ratation. Root streches in landscape, but list items does not. Can i do anything with it?

litaoshen Over a year ago

How about the ItemTemplate has been defined above and you only have an ItemTemplateSelector. I tried it but it seems that the ItemTemplate cannot bind to the container grid's width. I'm stuck here.

litaoshen Over a year ago

<ListView             Grid.Row="1"             x:Name="ListViewEvents"             Loaded="OnListViewEventsLoaded"             ItemsSource="{Binding xx}"             ItemTemplateSelector="{StaticResource xx}"             ItemContainerStyle="{StaticResource xx}"             IsItemClickEnabled="True">

Like this, how to utilize this method then? Thank you!

Attila Ács · Accepted Answer · 2015-07-09 12:23:56Z

6

The first element in the listview is not displayed because the ActiualWidth of the Grid is 0 in the first second, when loaded the page. This is the solution, that's working for me:

<Grid x:Name="contentRoot" Margin="20">
<ListView>
 <ListView.ItemTemplate>
   <DataTemplate>
     <Grid MinWidth="{Binding ActualWidth, ElementName=contentRoot}" />
   </DataTemplate>
 </ListView.ItemTemplate>
</ListView>
</Grid>

answered Jul 9, 2015 at 12:23

Attila Ács

671 silver badge3 bronze badges

Comments

Andre Classen · Accepted Answer · 2015-08-27 23:53:08Z

3

This is a really annoying bug. I can't understand why this is not fixed since years now.

Imho stretching items in a vertical scrolling listview is a very basic feature and should work 100%.

A possible workaround is also this snipped, which should also be aware of size changes :

public class StrechItemsListView : ListView
{
    public StrechItemsListView()
    {
        SizeChanged += StrechItemsListView_SizeChanged;
    }

    private void StrechItemsListView_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (ItemsPanelRoot != null)
        {
            ItemsPanelRoot.Width = e.NewSize.Width;
        }
    }
}

Changing the xaml only to a custom listview type is less work and cleaner then edit every datatemplate etc. Just my 2 cents.

edited Aug 27, 2015 at 23:53

answered Aug 27, 2015 at 23:23

Andre Classen

4,0273 gold badges31 silver badges37 bronze badges

Comments

Silenco Tang · Accepted Answer · 2015-11-09 03:04:04Z

My Practice seems to work. At least in WP8.1.

Just set the ItemsPanelTemplate in the <ListView></ListView> Block explicitly, but not use

Style="{StaticResource ListViewStyle1}" or something else.

Sample Code:

<ListView ItemsSource="{Binding RadioList}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Disabled"
            ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollMode="Auto">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="10,3,10,0">
                    <TextBlock Text="{Binding RadioName}" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Vertical" Width="{Binding PhoneWidth}"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

The HorizontalContentAlignment and Width of VirtualizingStackPanel settings are used to center the content in the ListView .You can move these settings freely.I don't know why, but it does work.

Alberto Rivelli · Accepted Answer · 2015-07-16 15:42:21Z

0

This was fixed on Windows 10 for Windows 8.1 apps

answered Jul 16, 2015 at 15:42

Alberto Rivelli

2,0532 gold badges17 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related