Howto: Adding Full Screen Scroll Wheel Support

Feb 12, 2011 at 10:12 AM
Edited Feb 12, 2011 at 10:25 AM

HD View SL is currently built as a Visual Studio 2008 project targeted against Silverlight 3, Silverlight 4 added native mouse scrolling support (including in full screen mode) which the current Silverlight 3 based player doesn't support. Here's how to get full screen mouse wheel scrolling:

1.) Download the latest source code for HD View SL from this CodePlex website

2.) Open up the solution in Visual Studio 2010, say yes when the conversion wizard asks you to upgrade the web project to .Net 4.0.

3.) In the Visual Studio Solution Explorer right click and choose "Properties" on the HDViewSL Silverlight project.

4.) Set "Target Silverlight Version" to "Silverlight 4" then close the properties screen.

5.) Delete "MouseWheelHelper.cs", it will no longer be needed.

6.) In Page.xaml.cs's constructor delete the following lines:

new MouseWheelHelper(this.multiScaleImage).MouseWheel += this.MultiScaleImage_MouseWheel;
new MouseWheelHelper(this.multiScaleImage2).MouseWheel += this.MultiScaleImage_MouseWheel;

7.) Delete the now unused "MultiScaleImage_MouseWheel" event handler, the new handler will have the exact same code as the old handler but uses Silverlight 4's native mousewheel events.

8.) Add the following lines to Page.xaml.cs's constructor:

multiScaleImage.MouseWheel += multiScaleImage_MouseWheel;
multiScaleImage2.MouseWheel += multiScaleImage_MouseWheel;
multiScaleImage.Loaded += multiScaleImage_Loaded;

9.) Add the following event handlers:

void multiScaleImage_Loaded(object sender, RoutedEventArgs e)
{
    // On load set focus to the web page hosting the xap so focus can be set
    // to the Silverlight Page.xaml for mouse wheel events
    if (!(Application.Current.IsRunningOutOfBrowser))
    {
        HtmlPage.Plugin.Focus();
    }

    Focus();
}
void multiScaleImage_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)
{
    if (!e.Handled && this.isOpen)
    {
        this.InvokeHandler(this.ReceivedInput);
        var zoomFactor = e.Delta > 0 ? ZoomChangeFactor : 1 / ZoomChangeFactor;
        var p = this.multiScaleImage.ElementToLogicalPoint(this.mousePosition);
        p = this.ClosestPoint(p);
        this.ZoomBy(zoomFactor, p);
        e.Handled = true;
    }
}

10.) Compile and you're done!

Aug 6, 2011 at 4:17 PM

Marvelous! Thank you so much for posting this full and accurate process for enabling scroll wheel operation in full screen mode. It worked like a charm and probably saved me a day of research into behaviors, etc.