AutoScroll to Bottom a ListView in WinRT App

Question

I am struggling to make a ListView automatically scroll down to bottom each time a new item is added to the ItemsSource. According to this post, all I have to do is to use the following :

private void ScrollToBottom() 
{ 
    var scrollViewer = MyListView.GetFirstDescendantOfType<ScrollViewer>(); 
    scrollViewer.ScrollToVerticalOffset(scrollViewer.ScrollableHeight); 
}

using the WinRT XAML Toolkit. But it has no effect I am calling this method each time I add or remove an element from the items collection of the ListView. No auto-scrolling though.

And in XAML, well, there's the ListView :

<ScrollViewer>
    <ListView x:Name="LinesListView"
        ItemsSource="{Binding Lines}"
        ItemTemplate="{StaticResource LineItemTemplate}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel>
                    <StackPanel.ChildrenTransitions>
                        <TransitionCollection>
                            <EntranceThemeTransition/>
                        </TransitionCollection>
                    </StackPanel.ChildrenTransitions>
                 </StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</ScrollViewer>

There is on the other hand another solution, on the same link I have provided above, but it doesn't show listview items animation even if I try to specify it in XAML.

What am I missing here?

Any suggestions are greatly appreciated, thank you.

Yes, they are all OK, the binding works OK, it just... doesn't scroll down, and that's why I don't know and how to solve it... — VasileF, Jul 30 '13 at 19:12
I think you might be scrolling before the item is fully added and created. You may be able to create a custom ListView that overrides OnItemsChanged to ensure that it scrolls after the items are in. — Nate Diamond, Jul 30 '13 at 23:37

VasileF · Answer 1 · 2013-07-31T12:58:40.270

Finally, found a way :

I had to get rid of the ScrollViewer, and when the items were added, first I had to update the layout of the ListView and then scroll down :

myListView.UpdateLayout();
myListView.ScrollToBottom();

The ScrollToBottom();method, is implemented in the WinRT XAML Toolkit.

Simply enough, while I complicated myself with many other ways to solve it...

And the animation issue got fixed with a few changes in the XAML :

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel>
            <StackPanel.Transitions>
                <TransitionCollection>
                    <AddDeleteThemeTransition/>
                 </TransitionCollection>
            </StackPanel.Transitions>
        </StackPanel>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

score 3 · Answer 2 · answered Jun 04 '15 at 13:12

3

In a windows store app I used listViewReceiptDetailList.ScrollIntoView(listViewReceiptDetailList.Items[listViewReceiptDetailList.Items.Count() - 1]);

answered Jun 04 '15 at 13:12

Juan

1,352
13
20

Filip Skakun · Answer 3 · 2014-06-05T05:20:27.130

1

Try binding ListViewExtensions.ItemToBringIntoView (an attached property from WinRT XAML Toolkit) to your added item.

edited Jun 05 '14 at 05:20

answered Jul 30 '13 at 20:17

Filip Skakun

31,624
6
74
100

Thank you for the answer, but I'm not skilled enough to manage applying your solution. I have found a solution, however, using the WinRT XAML Toolkit, and I will post it as an answer, just in case it will be helpful for others. – VasileF Jul 31 '13 at 12:33
@Filip any more info ? Looks perfect but can't get this to work, it does scroll, - but to the top, when it should be to the bottom ! Not finding much info from google... – MemeDeveloper Jun 05 '14 at 03:08
Internally it calls `listView.ScrollIntoView(newItemToBringIntoView)` which is the platform API and I think it will do minimal scrolling to make the item visible which means it might be at the top or bottom of the view port if it isn't already in view, depending on what the current offset is. If you want it to show up at a specific location - you need to find the scrollviewer, get the position of the item container relative to the scrollviewer and scroll as in http://stackoverflow.com/questions/24033120/how-to-get-gridview-selected-items-scroll-position-in-windows-8-metro-app/24043348#24043348 – Filip Skakun Jun 05 '14 at 05:26

AutoScroll to Bottom a ListView in WinRT App

3 Answers3