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?

Answer 1

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

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

Answer 2

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