UWP XAML ScrollViewer scrolling with arrow keys - image

Question

I have a simple code in XAML and the mainpage:
<Grid>
<ScrollViewer ZoomMode="Enabled" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="Assets/skyline.jpg" KeyDown="Image_KeyDown">
</Image>
</ScrollViewer>
</Grid>
When I start the programm now, i can scroll with my touchpad, but not with the arrow keys on the keyboard. Why is it like this and how can I change this behaviour? I'm asking this question because I have a much more complex example, where it just works (of course, that example is not only an image). Thank you!

Answer 1

The ScrollViewer responds to unhandled keyboard events that bubble up from its content. In your example you're not seeing keyboarding scroll because neither the Image nor the ScrollViewer are focusable which means there won't be any keyboard events that bubble up to or originate from the ScrollViewer. Image derives from FrameworkElement which doesn't have the concept of focus. ScrollViewer could receive focus. But, by default, it doesn't because its default control style has IsTabStop = "False".
The simple solution here is to set IsTabStop = "True" on the ScrollViewer. Now that its focusable you will start seeing around the ScrollViewer the thick focus rect automatically drawn by the system. You can disable that by also setting the UseSystemFocusVisuals="False".
In markup...
<ScrollViewer x:Name="scrollviewer"
IsTabStop="True" UseSystemFocusVisuals="False"
ZoomMode="Enabled" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="Assets/skyline.jpg">
</Image>
</ScrollViewer>
Note: This is only necessary because there isn't anything in the content that could receive focus. In more complex scenarios you'll often have something in the ScrollViewer that can be focused (e.g. a 'foo' Button). In those scenarios scrolling happens via keyboarding as you'd expect because some 'foo' has focus.

Answer 2

You could use the ChangeView method of ScrollViewer to scroll in Window.Current.CoreWindow.KeyDown event handler.
Please refer to the following code sample:
<ScrollViewer x:Name="scrollviewer" ZoomMode="Enabled" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="Assets/skyline.jpg">
</Image>
</ScrollViewer>
public MainPage()
{
this.InitializeComponent();
Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
}
private double horizontalOffset;
private double verticalOffset;
private double step = 5;
private void CoreWindow_KeyDown(Windows.UI.Core.CoreWindow sender, Windows.UI.Core.KeyEventArgs args)
{
Debug.WriteLine("horizontalOffset: "+horizontalOffset+ " verticalOffset: "+verticalOffset);
switch (args.VirtualKey)
{
case Windows.System.VirtualKey.Left: horizontalOffset = horizontalOffset-step<0 ? 0:horizontalOffset - step; scrollviewer.ChangeView(horizontalOffset,verticalOffset,1); break;
case Windows.System.VirtualKey.Right: horizontalOffset = horizontalOffset+step>scrollviewer.ScrollableWidth?scrollviewer.ScrollableWidth: horizontalOffset + step; scrollviewer.ChangeView(horizontalOffset,verticalOffset,1);break;
case Windows.System.VirtualKey.Up: verticalOffset= verticalOffset - step < 0?0:verticalOffset- step; scrollviewer.ChangeView(horizontalOffset,verticalOffset,1);break;
case Windows.System.VirtualKey.Down: verticalOffset = verticalOffset + step > scrollviewer.ScrollableHeight?scrollviewer.ScrollableHeight:verticalOffset+ step; scrollviewer.ChangeView(horizontalOffset,verticalOffset,1);break;
default: break;
}
}