Nikhil Kothari's Weblog : MouseWheel Behavior for Silverlight

Earlier today I saw a comment about adding mouse wheel support for Silverlight apps and controls in the form of a behavior. I thought I'd put together a sample of a using the MouseWheelScroll behavior that already exists in Silverlight.FX. Its really quite straightforward... just attach one to any ScrollViewer control (actually any control that provides the scrolling automation peer functionality), or to some control that contains one in its control template (for example, a TextBox).

On the right is a screenshot of the live sample (note that this does work with Silverlight 2 as well). You can download the sample, and you can also download Silverlight.FX from its project page along with associated samples to see what else is in the works.

Here are the relevant bits of XAML:

<UserControl ... 
  xmlns:fxui="clr-namespace:SilverlightFX.UserInterface;assembly=SilverlightFX">
  <Grid> 

    <ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled">
      <fxui:Interaction.Behaviors>
        <fxui:MouseWheelScroll />
      </fxui:Interaction.Behaviors>
      <Image Source="/SL3Poster.png" Width="450" />
    </ScrollViewer> 

    <TextBox
      VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Disabled"
      TextWrapping="Wrap">
      <fxui:Interaction.Behaviors>
        <fxui:MouseWheelScroll />
      </fxui:Interaction.Behaviors>
      <TextBox.Text>Lorem ipsum dolor sit amet...</TextBox.Text>
    </TextBox> 

  </Grid>
</UserControl>

Thats pretty much it! You don't have to write any code, much less deal with browser APIs to handle mouse scroll events! If browser access is turned off, this just degrades gracefully. Regular scrolling continues to work of course. I really love the behavior concept for the way it enables adding interactivity to your XAML, while keeping it clean, declarative and super-simple.

Posted on Friday, 4/10/2009 @ 11:20 PM | #Silverlight

Comments

Nikhil Kothari

Posted on 4/12/2009 @ 9:40 AM

@Steve - I first wrote my sample on a machine with Silverlight 3, and then recompiled it on SL2.
I haven't yet started the Silverlight.FX update, but most things should work. There are two categories of changes that I am anticipating:
- Things that can be done better (eg. not needing a derived application type)
- Things that can be replaced with platform equivalents (possibly themes using MergedDictionary - still thinking about it though)

All the features themselves should hopefully continue to work unchanged...

Nikhil Kothari

Posted on 4/13/2009 @ 1:34 PM

@Zed - no this doesn't work in full screen mode, since the control is outside of the browser. I think SL3 will have some more support for mouse wheel (don't know if it was in the beta, and which platforms), so I'll update this behavior to use that when applicable. Another thing for the SL3 list...

@Steve - Blend support overall is somewhat of a big cross-cutting thing I need to start looking into. On behaviors specifically Blend will have some tooling for the behaviors it is introducing. The nice thing is all the experience building behaviors in Silverlight.FX was factored in into the Blend API, so atleast the fundamentals are the same... you'll notice in Silverlight.FX sources, the core behavior system is under a folder called Platform, which I'd like to be subsumed into the platform over time.

Leslie Winston

Posted on 4/15/2009 @ 4:41 PM

I am having two problems with the MouseWheelScrolling: ScrollSize and Scrolls within Scolls.
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<fxui:Interaction.Behaviors>
<fxui:MouseWheelScroll />
</fxui:Interaction.Behaviors>
1)
I have a layout with a grid with 3 rows (30, *, 40)
Inside the main middle row is a ScrollViewer with the fxui MouseWheelScroll behavior.
Inside the ScrollViewer is another grid with 4 columns and somewhere down in one of the columns is a textbox also implementing the fxui MouseScrollWheel.
When the brower first opens full screen, the inner scroll with mouse works but the outer scroll doesn’t.
If the browser is restored to a windowed size, then the outer scroll begins to work but the inner scroll affects both the inner and the outer. In either direction, the outer scroll has to get to the end of its range before the inner scroll starts to move.
<TextBox AcceptsReturn="True" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto">
<fxui:Interaction.Behaviors>
<fxui:MouseWheelScroll ScrollSize="3" />
</fxui:Interaction.Behaviors>
2)
ScrollSize does not seem to have any effect (in fact it is very slow).
Thank you – your framework is a truly beautiful thing.

Leslie Winston

Posted on 4/16/2009 @ 11:47 AM

I would agree - in this case the outer scroll serves instead of the browser scroll (the layout root has a thin row at bottom and top for menus and status, the silverlight space takes up the whole browser so the browser scroll never shows - just the scrolls for the main content row) the inner scroll is just on a textbox that wraps a lot of text and only is visible when that functionality is needed.

On the other subject - am I using ScrollSize correctly? It dosen't seem to matter what number I enter.
Thanks again.
Leslie

Justin Toth

Posted on 5/18/2009 @ 5:01 PM

This doesn't seem to work... I downloaded the latest Silverlight.FX code, referenced the SilverlightFX\binaries\Release\Silverlight\SilverlightFX.dll, added xmlns:fxui="clr-namespace:SilverlightFX.UserInterface;assembly=SilverlightFX" to the top of my page, and added the behavior to my ScrollViewer:

<ScrollViewer Style="{StaticResource PageScroller}">
<fxui:Interaction.Behaviors>
<fxui:MouseWheelScroll />
</fxui:Interaction.Behaviors>
<StackPanel x:Name="spContent" Orientation="Vertical" Margin="10,10,10,10" HorizontalAlignment="Left" />
</ScrollViewer>

The mouse wheel doesn't work no matter what I try, very disappointing... I am using SL2.

David Suarez

Posted on 9/10/2009 @ 4:34 AM

I think that the behavior is not the same as in the browser, because when there is a ScrollViewer inside another, the second one receive the event and both moves at a time.

I've been seeing that in the version 3.0 of silverlight already implement MouseWheel event.

To solve this I think the following:

1) In the OnAttach event of the MouseWheelScrollBehavior class attach to the MouseWheel event of AssociatedObject

protected override void OnAttach ()
(
base.OnAttach ();
AssociatedObject.MouseWheel + = new MouseWheelEventHandler (AssociatedObject_MouseWheel);
)

private void AssociatedObject_MouseWheel (object sender, MouseWheelEventArgs e)
(
ConfigureScrollProvider ();
e.Handled = UpdateScrollOffset (e.Delta);
)

2º) While the ScrollOffset value is between 0 to 100, I' don't propagate the event to the container objects. When the ScrollOffset value is less than 0 or more than 100 then yes propagate the event:

(_scrollProvider.VerticalScrollPercent> 0 & & _scrollProvider.VerticalScrollPercent <100);

The code would be this:

UpdateScrollOffset private bool (int delta)
(
if ((_scrollProvider! = null) & & _scrollProvider.VerticallyScrollable)
(
ScrollAmount VerticalScroll = delta <0? ScrollAmount.SmallIncrement: ScrollAmount.SmallDecrement;
_scrollProvider.Scroll (ScrollAmount.NoAmount, VerticalScroll);

return (_scrollProvider.VerticalScrollPercent> 0 & & _scrollProvider.VerticalScrollPercent <100);
)

return false;
)

What do you think?

MouseWheel Behavior for Silverlight

Comments

Jeff Handley

ibillguo

mikekidder

Vitor Canova

Steve Gentile

Nikhil Kothari

Hatim Rih

Zed

Steve Gentile

Nikhil Kothari

Utkarsh Puranik

Leslie Winston

Nikhil Kothari

Leslie Winston

JC

Nikhil Kothari

Matt

Edukondalu

Justin Toth

Nikhil Kothari

Korash

Vimal Saifudin

Hoangtu

kulwinder singh

David Suarez

Morten

Nikhil

Neeta