Have left stick/mouse pointer scroll ScrollViewer in UWP Xbox app

Question

In my UWP Xbox app I would like to have a page where the content is in a ScrollViewer and allow the user to scroll the content in any direction with the left stick. I would like to have the Pointer cursor enabled for this page so that it can be used to move around the scroll area and click elements.

This is basically the same behavior that the Edge browser exhibits when you scroll down a page...when the Pointer gets to the edge of the content, the scroll occurs.

I've got a sample page that looks like this:

<Page
x:Class="MyApp.MyPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Grid>      

    <ScrollViewer x:Name="RootScrollViewer" IsTabStop="True" ZoomMode="Enabled" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" VerticalScrollMode="Enabled" VerticalScrollBarVisibility="Visible" >
        <Grid x:Name="TheGrid" Width="1400" Height="1400" Margin="{StaticResource DefaultAllMargin}">
            <Rectangle Width="315" Height="200" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="Green"/>
            <Rectangle Width="315" Height="200" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Blue"/>
            <Rectangle Width="315" Height="200" VerticalAlignment="Center" HorizontalAlignment="Center" Fill="Blue"/>
            <Rectangle Width="315" Height="200" VerticalAlignment="Bottom" HorizontalAlignment="Right" Fill="Blue"/>
            <Rectangle Width="315" Height="200" VerticalAlignment="Top" HorizontalAlignment="Right" Fill="Blue"/>
        </Grid>
    </ScrollViewer>

</Grid>

If I load this page the way it is, the left stick allows me to scroll the ScrollViewer in any direction, which is close to what I want. However, if I add the below code to my page constructor to enable the Pointer, I get the pointer, but now the left stick just moves the pointer around within the page, but doesn't scroll the ScrollViewer.

this.RequiresPointer = RequiresPointer.WhenFocused;

Anyone know how I can accomplish the pointer and the scrolling?

Update: I created some test apps using a ScrollViewer and also a WebView to compare how the mouse behaves one each. The way the out-of-box WebView behaves exactly like I want. I want the left stick to control the pointer and the right stick to control the scroll. So my question is this: is there a way to make native XAML content inside of a ScrollViewer behave the way web content does inside a WebView?

Sunteen Wu Sunteen Wu · Accepted Answer · 2017-01-11T05:35:41

If I load this page the way it is, the left stick allows me to scroll the ScrollViewer in any direction, which is close to what I want

For both XAML and hosted web apps running on Xbox One, mouse mode is turned on by default for the entire app. The left stick should not allow you to scroll until you disable the mouse mode by adding follow code in your App class:

public App()
{
    this.InitializeComponent();
    this.Suspending += OnSuspending;
    this.RequiresPointerMode = Windows.UI.Xaml.ApplicationRequiresPointerMode.WhenRequested;
}

This is because when under mouse mode, left stick is for free mode, right stick is for scrolling as this picture shows.This is by design that we cannot change. Details please reference Mouse mode section of the Designing for Xbox and TV article.

According to your description you have already disable the mouse mode and only when a control or page calls for it, it will be enabled. So the left stick can scroll before the page require point.

Anyone know how I can accomplish the pointer and the scrolling?

For your requirements, left stick cannot be under mouse mode as well as under free mode which is by design mentioned above. When under mouse mode you can use left stick for pointer and at the same time right stick for scrolling. If you only want to use left stick, disable mouse mode for the entire app as you already done and then try to only require pointer to whenfocused for the control you want pointer inside not for entire page, for example, WebView control. Then the page can be scroll by left stick and when the WebView control focused, left stick can be pointer.

Have left stick/mouse pointer scroll ScrollViewer in UWP Xbox app

1 Answers