×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

As you may know, most wheel support is detected at the browser level.  In Silverlight, this makes adding mouse wheel support an interop action with the HTML host.  While people have implemented it, it has mostly been for the use of DeepZoom applications.  In fact, the latest DeepZoom Composer tool actually adds this support now if you choose to have a Silverlight project as a part of the output of the collection.

But what about other controls, namely ScrollViewer?  Having content in ScrollViewer enables ScrollBar functionality but doesn’t automatically respond to mouse wheel actions.  Adam Cooper has solved this gap problem by adding a helper class to which you can attach to your ScrollViewer object.  Let’s say our XAML is this:

   1: <ScrollViewer x:Name="MyScroller" Width="300" Height="100" Background="AliceBlue">
   2:     <TextBlock TextWrapping="Wrap">
   3:         Even if you use my workaround ...
   4:     </TextBlock>
   5: </ScrollViewer>

If we run the application our content is scrollable, but not with the wheel.  Add Adam’s control reference and these lines of code in our Page.xaml.cs class:

   1: using Cooper.Silverlight.Controls;
   2:  
   3: public Page()
   4: {
   5:     InitializeComponent();
   6:  
   7:     ScrollViewerMouseWheelSupport.Initialize(this);
   8:  
   9:     MyScroller.AddMouseWheelSupport();
  10: }

and we have automatic wheel scroll support.  Great job Adam!  His post talks about various other methods of nesting and how it actually works.

It would be nice if you could just create MyCustomScrollViewer but unfortunately you cannot subclass ScrollViewer for some reason. 

Some might be also wondering how they could add this functionality to ListBox, since the default control template for ListBox contains a ScrollViewer.  Good question I thought as well and I went about trying.  There are some challenges to using the default ListBox.  First, the visual tree of the template is only loaded after the layout has been updated.  I’m not sure why it isn’t in Loaded, but in LayoutUpdated it is available.  So from this event you can use VisualTreeHelper.GetChild(ListBox, 0) to get the root node of the template.  From there you can use FindName(“ScrollViewer”) to get to the ScrollViewer in the default control template.

Here’s where it gets funky.

While you can add Adam’s extension method just fine with no exceptions, it doesn’t exactly work when rendered.  Here’s the code I used:

   1: void DefaultList_LayoutUpdated(object sender, EventArgs e)
   2: {
   3:     // root node
   4:     Grid rootGrid = VisualTreeHelper.GetChild(DefaultList, 0) as Grid;
   5:     
   6:     // find the ScrollViewer
   7:     ScrollViewer scroller = rootGrid.FindName("ScrollViewer") as ScrollViewer;
   8:     
   9:     // add the mouse wheel support
  10:     scroller.AddMouseWheelSupport();
  11:  
  12:     // stop looking
  13:     DefaultList.LayoutUpdated -= new EventHandler(DefaultList_LayoutUpdated);
  14: }

And while no errors occur, I believe other events in the ItemTemplate are eating my events.  If anyone has any wise thoughts, post the comments here.  But either way, thanks Adam for this great utility for ScrollViewer!


This work is licensed under a Creative Commons Attribution By license.


Gravatar
9/24/2008 10:37 AM | # re: Add mouse wheel support to ScrollViewer
9/26/2008 2:32 PM | # re: Add mouse wheel support to ScrollViewer
Hi Tim,
Can you post the code you're trying to get working. I'll see if I can help.

Bruce
9/27/2008 5:56 AM | # re: Add mouse wheel support to ScrollViewer
Kudos to Adam! With his classes, adding MouseWheel support to various controls that use a ScrollViewer (ListBoxes, TextBoxes, etc) has just become trivial. For example, here's how to build-in mousewheel support to a TextBox assuming you are using a ControlTemplate for your TextBox that contains its own ScrollViewer:

public class MyTextBox : TextBox
{
private Grid layoutRoot;
private ScrollViewer scroller;

public MyTextBox()
{
Template = (ControlTemplate)Application.Current.Resources["myTextBox"];
}

public override void OnApplyTemplate()
{
base.OnApplyTemplate();
layoutRoot = (Grid) GetTemplateChild("layoutRoot");
scroller = (ScrollViewer)GetTemplateChild("scrollViewer");

ScrollViewerMouseWheelSupport.Initialize(layoutRoot);
scroller.AddMouseWheelSupport();
}
}

Sweet! Thanks again Adam!
Gravatar
9/27/2008 12:59 PM | # re: Add mouse wheel support to ScrollViewer
if you use the attached property like in the sample I posted, you dont need to any work at all, just set the property, and it should work
3/15/2009 5:20 AM | # re: Add mouse wheel support to ScrollViewer
some additional info on how you can have scroll support on DataGrids as well :-)

www.nystedberry.info/.../silverlight-datagrid-l...
5/15/2009 11:09 AM | # re: Add mouse wheel support to ScrollViewer
some improvement for your code: blogs.microsoft.co.il/.../...-for-silverlight.aspx
5/18/2009 4:41 PM | # re: Add mouse wheel support to ScrollViewer
The link to Adam's solution seems to be broken or his site is down, can you add the dll here?
6/11/2009 5:14 AM | # re: Add mouse wheel support to ScrollViewer
To enable mousewheel also on Scrollviewer just put your components that are in the scrollviewer into a grid.Then put a Rectangle into the scrollviewer at the lower level with a fill and opacity 1%. Then set the same size of the scrollviewer.
With this tip you can scroll the ScrollViewer!

Enjoy...
6/30/2009 6:34 AM | # re: Add mouse wheel support to ScrollViewer
Hopefully this post is monitored...as mentioned, the link to Adam's solution is broken. Could you post the code? It would be greatly appreciated
8/24/2009 11:08 AM | # re: Add mouse wheel support to ScrollViewer
I posted Adam's code on my skydrive for those that are looking for the code.

cid-50f67260092b35c3.skydrive.live.com/.../Silv...
8/28/2009 1:32 AM | # re: Add mouse wheel support to ScrollViewer
Is it possible to add also the horizontal mouse wheel for the scrollviewer, like in this example blog.thekieners.com/.../how-to-enable-mouse-whe... ?

Thank you
4/7/2010 1:06 PM | # re: Add mouse wheel support to ScrollViewer
to make scrollviewer to scroll by mousewheel,
in Silverlight 3 this problem got fixed as follows:
1- Have the DLL Reference of System.Windows.Controls.Toolkit
2- put the statemaent: SCRVIEW.SetIsMouseWheelScrollingEnabled(true); after
intiliaizeComponent(); // SCRVIEW is the name of Scrollviewer

5/17/2010 1:41 AM | # re: Add mouse wheel support to ScrollViewer
thank you very much
it works fine, but it don't work in Opera. scroll mouse wheel is working in Opera, but then I see a white screen
what is wrong?

 
Please add 5 and 6 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.