User Tools

Site Tools


notes:uwp:scrolling

Scrolling into view in XAML/UWP

Below, there are a few techniques of scrolling an element of a list into view. 'item' is an instance of an element we want to scroll to.

await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
{
    ListView1.ScrollIntoView(item);
});
await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () => 
{ 
    ListView1.ScrollIntoView(item);
 
    // Move to the next item.
    if (ListView1.SelectedIndex < ListView1.Items.Count - 1)
    {
        ListView1.SelectedIndex += 1;
        ListView1.ScrollIntoView(ListView1.SelectedItem);
    }
});
// Scroll with a delay.
TimeSpan period = TimeSpan.FromMilliseconds(500);
 
Windows.System.Threading.ThreadPoolTimer.CreateTimer(async (source) =>
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        ListView1.ScrollIntoView(item);
    });
}, period);

Use the ContainerContentChanging event. Note that if the list contains a lot of items, virtualization kicks in and the ContainerContentChanging event handler does not process items that are far in the list.

private void ListView1_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    sender.ScrollIntoView(args.Item);
}

Use the ScrollViewer's ChangeView method:

<Page x:Class="TestApp.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:TestApp">
    <Grid>
        <ScrollViewer x:Name="ScrollViewer1">
            <StackPanel>
                <StackPanel.Resources>
                    <Style TargetType="Rectangle">
                        <Setter Property="Fill" Value="Green" />
                        <Setter Property="Height" Value="180" />
                        <Setter Property="Width" Value="180" />
                        <Setter Property="Margin" Value="8" />
                    </Style>
                </StackPanel.Resources>
                <Rectangle />
                <Rectangle />
                <Rectangle />
                <Rectangle />
                <Rectangle />
                <Rectangle />
                <Rectangle />
                <Rectangle x:Name="Rectangle1" Fill="Red" />
                <Rectangle />
                <Rectangle />
                <Rectangle />
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Page>
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
 
namespace TestApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
 
            Loaded += (sender, args) =>
            {
                var visual = Rectangle1.TransformToVisual(ScrollViewer1);
                var point = visual.TransformPoint(new Point(0, 0));
                ScrollViewer1.ChangeView(null, point.Y, null);
            };
        }
    }
}

More info on scrolling into view can be found here.

notes/uwp/scrolling.txt · Last modified: 2017/02/14 by admin