scroll - C# WebBrowser PanningMode

Question

I'm working on a WinForms application that is implementing a C# WebBrowser control. This application is deploying to a Windows 7 SP1 Panasonic touch screen device.

Many times, the user will be browsing a page containing a very large image. In order to see parts of this image, they will need to scroll horizontally. While the vertical scrolling via finger is fine, horizontal scrolling is very uncooperative.

I see we have ScrollViewer.SetPanningMode, but do we have something similar for the WebBrowser?

Question: Can we achieve smooth horizontal touch scrolling for a WebBrowser control?

When the image isn't high enough for vertical scrolling, it becomes impossible to scroll horizontally.

Answer 1

Perhaps, I have a solution to this panning problem. It does require IE10 (Desktop), but I remember reading in the comments (was it deleted?) that the target platform for this project is Windows 7, so hopefully you have freedom to deploy IE10 there. I tested it with my old Asus Eee PC T91MT (Windows 7 SP1 w/ Platform Update and IE10) and it felt pretty good even on that piece of hardware.

Grab a working VS2012 project for WinForms or WPF.

The major points are:

• Enable IE10 document mode for WebBrowser control.

• Disable IE Legacy Input Model for WebBrowser control.

• Use IE10-specific touch CSS as other fellow readers have suggested.

Code (C#):

using Microsoft.Win32;
using System;
using System.Diagnostics;
using System.IO;
using System.Reflection;
using System.Windows;
using System.Windows.Navigation;

namespace WpfWbApp
{
    //
    // By Noseratio [http://stackoverflow.com/users/1768303/noseratio]
    //
    // Question: http://stackoverflow.com/questions/17170011/c-sharp-webbrowser-panningmode
    //

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            SetBrowserCompatibilityMode();
            InitializeComponent();
            this.Loaded += MainWindow_Loaded;
            this.WB.LoadCompleted += WB_LoadCompleted;
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            this.WB.Navigate(new Uri(new Uri(Assembly.GetExecutingAssembly().CodeBase), "content/test.htm").AbsoluteUri);
        }

        void WB_LoadCompleted(object sender, NavigationEventArgs e)
        {
            this.WB.Focus();
            this.WB.InvokeScript("focus");
        }

        private void SetBrowserCompatibilityMode()
        {
            // http://msdn.microsoft.com/en-us/library/ee330720(v=vs.85).aspx

            // FeatureControl settings are per-process
            var fileName = Path.GetFileName(Process.GetCurrentProcess().MainModule.FileName);

            if (String.Compare(fileName, "devenv.exe", true) == 0) // make sure we're not running inside Visual Studio
                return;

            using (var key = Registry.CurrentUser.CreateSubKey(@"SoftwareMicrosoftInternet ExplorerMainFeatureControlFEATURE_BROWSER_EMULATION",
                RegistryKeyPermissionCheck.ReadWriteSubTree))
            {
                // Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode.
                UInt32 mode = 10000; // 10000; 
                key.SetValue(fileName, mode, RegistryValueKind.DWord);
            }

            using (var key = Registry.CurrentUser.CreateSubKey(@"SoftwareMicrosoftInternet ExplorerMainFeatureControlFEATURE_BLOCK_LMZ_SCRIPT",
                RegistryKeyPermissionCheck.ReadWriteSubTree))
            {
                // enable <scripts> in local machine zone
                UInt32 mode = 0;
                key.SetValue(fileName, mode, RegistryValueKind.DWord);
            }

            using (var key = Registry.CurrentUser.CreateSubKey(@"SoftwareMicrosoftInternet ExplorerMainFeatureControlFEATURE_NINPUT_LEGACYMODE",
                RegistryKeyPermissionCheck.ReadWriteSubTree))
            {
                // disable Legacy Input Model
                UInt32 mode = 0;
                key.SetValue(fileName, mode, RegistryValueKind.DWord);
            }

        }

    }
}

XAML:

<Window x:Class="WpfWbApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Touch and pan the picture" Width="1024" Height="800">
    <WebBrowser Name="WB"></WebBrowser>
</Window>

HTML:

<!doctype html>
<html>
<head>
<style>
body { -ms-content-zooming:none; -ms-scroll-rails: none; }  
</style>
</head>
<body style="overflow: auto">
<img src="panorama.jpg">
</body>
</html>

I could not test it with IE9 as I don't have a touch-screen machine with IE9, although I'm sure it would not work. Apparently, the new Pointer Events Touch API was introduced for Windows 7 (with Platform Update) specifically for IE10.

Let us know how it works for you. Good luck!

[EDITED] Updated with a link to a WinForms project.