Scrolling problems with a WebView in Windows 8

Question

I'm looking for a way to reliably scroll a tall HTML page in a Windows 8 app. The app I'm making gets some HTML formatted text from an XML file in the package, and currently displays it in a WebView on one side of a SplitPage.

This is all working fine, but because of the way WebView works, I'm having problems with focus for scrolling. When the SplitPage containing the WebView is first loaded the WebView has focus for scrolling (with the scroll wheel) and works as expected, but the ListView containing the other items does not scroll with the scroll wheel, even when clicking in it. When the user goes back to the home screen, then back into the same SplitPage the WebView can not be scrolled with the scroll wheel.

I've looked at using a WebViewBrush, but from what I've tried I don't think it's going to work for me. There doesn't seem to be any way to render a WebView off-screen or collapsed and then paint a WebViewBrush of that on a Rectangle on screen.

Any ideas for either another way to display the data, or to get WebView or WebViewBrush to play nice?

robotsdanceincolor robotsdanceincolor · Accepted Answer · 2012-09-19T23:25:21

It seems the webview control works properly on the root page but has trouble keeping focus in multiple navigation scenarios. This is the workaround I used to fix the problem.

First, I made a new class to pass as a navigation parameter.

class DetailPayload
{
    public Frame DetailFrame { get; set; }
    public string Title { get; set; } // may not be important to your software
}

I create a new root frame when I navigate to the page with the problematic webview and pass a DetailPayload object.

DetailPayload dpl = new DetailPayload();
dpl.DetailFrame = this.Frame;
dpl.Title = itemTitle;

Frame rootFrame = new Frame();
rootFrame.Navigate(typeof(DetailPage), dpl);

Window.Current.Content = rootFrame;
Window.Current.Activate();

I store the old frame in 'Frame backFrame' in the page I'm navigating to.

DetailPayload dpl = (DetailPayload)navigationParameter;
this.backFrame = dpl.Frame;

I change the back button control to fire a different event and delete the part that disables it if it is a root frame.

<Button x:Name="backButton" Style="{StaticResource BackButtonStyle}" Click="backButton_Click"/>

Then I call this in the backButton_Click function to return to the previous page.

Window.Current.Content = this.backFrame;
Window.Current.Activate();

It seems I have to do this for every page with webview because it's not an actual control and is therefore missing the .Focus() method.

Scrolling problems with a WebView in Windows 8

2 Answers