Calculate Horizontal Offset to scroll ListView to the center of the SelectedItem

Question

I am building a photo application, using a FlipView and a listView as a Pagination. When I click on the thumbnail picture in the ListView it shows me the same picture in the FlipView. And when I swipe into the FlipView, any photo selected will select the same picture in the ListView. This is done by adding to both of them:

To the ListView:

SelectedIndex="{Binding Path=SelectedIndex, ElementName=flipView1, Mode=TwoWay}

And to the FlipView:

SelectedIndex="{Binding Path=SelectedIndex, ElementName=listView1, Mode=TwoWay}

And to the ListView SelectionChanged event I added:

 if (e.AddedItems.Count > 0)
        listView1.ScrollIntoView(e.AddedItems.First(), ScrollIntoViewAlignment.Leading);

My only problem is that when I swipe the FlipView, the desired picture is selected in the ListView but the ScrollViewer is not scrolled to it. I tried using WinRTXamlToolkit to change the position of the ScrollViewer:

private void pageRoot_Loaded()
        {
            // count number of all items
            int itemCount = this.listView1.Items.Count;
            if (itemCount == 0)
                return;

            if (listView1.SelectedIndex >= itemCount)
                listView1.SelectedIndex = itemCount - 1;

            // calculate x-posision of selected item
            double listWidth = this.listView1.ActualWidth;
            double xPos = (listWidth / itemCount) * listView1.SelectedIndex;

            // scroll
            var scrollViewer2 = listView1.GetFirstDescendantOfType<ScrollViewer>();
            if (scrollViewer2 != null)
                scrollViewer2.ChangeView(xPos, 0.0, 1);
        }

The first time listWidth is 1600.0 and then it becomes 0.0 all the time, which gives xPos = 0.0!

How can I fix this?

`BringIntoView` doesn't exist in Windows 8.1! `BringIntoViewOnFocusChanged` exists for the `ScrollViewer` but it doesn't work as expected! — yalematta, Apr 27 '15 at 07:36
Is your list vertical or horizontal scrolling? I'll try to dbl check but bring into view I thought is on the listview1. Are all your items the same size in the listview? — Quincy, Apr 27 '15 at 12:24
My `ListView` is horizontally scrolling, and yes all the items are the same size. — yalematta, Apr 27 '15 at 13:02

score 0 · Answer 1 · answered Apr 27 '15 at 12:29

0

https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.controls.listview.aspx

You should use one of the two "ScrollIntoView" methods.

answered Apr 27 '15 at 12:29

Quincy

1,710
14
20

I've tried using: `listView1.UpdateLayout(); listView1.ScrollIntoView(listView1.SelectedItem);` But it gives me the same bug: when I flip into the `FlipView` many images (without looking at the `ListView` after each flip), when I look at the `ListView` I find it didn't scroll to the `SelectedIndex` – yalematta Apr 27 '15 at 13:15
I've also used: `var zoomLoc = new SemanticZoomLocation() { Item = listView1.SelectedItem }; listView1.MakeVisible(zoomLoc);` and I'm getting the same bug... – yalematta Apr 27 '15 at 13:17
Sounds difficult. From personal experience the method I mention has worked for me in the past. try making a dead simple app that only has a vertical listview with items and then once items loaded use ScrollIntoView to go to the third item. If that works your at least on a good path. Then slowly add more to it like horizontal scrolling and see if it still works etc. – Quincy Apr 27 '15 at 13:44
If you want to just hack it to work there is another way by scrolling to an X position like you mention, but it really isn't best practice for this situation from what I understand – Quincy Apr 27 '15 at 13:46

score 0 · Answer 2 · edited May 23 '17 at 12:06

ListView.ScrollIntoView() should work. There might be issues with calling a method to scroll a ScrollViewer while it's already scrolling though. I would try fiddling with ScrollViewer.InvalidateScrollInfo() which might speed it up. Otherwise - you could try handling the ViewChanging/ViewChanged events to see if it's scrolling and try to use that information together with ScrollViewerViewChangedEventArgs.IsIndeterminate to chain the calls.

Also check my answer to this question: Centering selected item in a scroll viewer

Calculate Horizontal Offset to scroll ListView to the center of the SelectedItem

2 Answers2

Linked