locked
GridView inside Scrollviewer: Touch ok, Mousewheel not

    Question

  • I have a GridView inside a Scrollviewer.

    When it comes to scrolling, with touch everything is ok. I hold my finger on any item (actually any place inside the Scrollviewer) and move/drag to scroll. But when I use a mouse I cannot scroll that easy. I have to move the pointer to the scrollbar and only there it is possible to scroll (via mouse wheel).

    Is there something I can do about it? Thanks in advance!

    Friday, October 12, 2012 9:52 AM

Answers

  • Yes, I did :). I thought I've already posted it here, but didn't. ;)

    So here it is:

    MyPage::MyPage()
    {
    	InitializeComponent();
    
    	// Necessary for reenabling mouse scrolling in gridView
    	_gridView->AddHandler(UIElement::PointerWheelChangedEvent, ref new PointerEventHandler([this](Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    	{
    		e->Handled = false;
    	}),  true);
    }

    In the constructor of your page containing the gridView you have to place code after InitializeComponent(). You add an event handler which says, that you don't want to handle anything in there ;). With that, the parent scrollViewer is finally able to handle everything as we wanted it.

    • Marked as answer by peterGro Thursday, October 10, 2013 6:14 AM
    Thursday, October 10, 2013 6:14 AM

All replies

  • Hi,

    As far as I know, you can disable one direction of the rolling and set another direction with StaticResource HorizontalScrollViewerStyle

    For example

            <ScrollViewer  ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" Style="{StaticResource HorizontalScrollViewerStyle}">
                <Rectangle Width="4000" Fill="SteelBlue" Margin="24" />
            </ScrollViewer>
    

    Best regards,
    Jesse


    Jesse Jiang [MSFT]
    MSDN Community Support | Feedback to us

    • Marked as answer by Jesse Jiang Thursday, October 18, 2012 3:12 AM
    • Unmarked as answer by peterGro Monday, October 22, 2012 6:01 AM
    Monday, October 15, 2012 5:36 AM
  • Sorry for the late answer.

    What you are showing is just a matter of styling. What I wanted to point out is that scrolling with mouse is much harder than with a finger/touch, i.e. with touch you can drag anywhere inside the scroller and it scrolls while with a mouse you have exactly place the pointer over the scrollbar.

    Monday, October 22, 2012 6:03 AM
  • Your problem happens because you put a gridview inside a scrollviewer. Since the gridview has scrollbars and handles scrolling events, the mouse events are not handled by the parent scrollview. If you want the scrollviewer to receive mouse events, you have to move your mouse outside the gridview, as you noticed. This is expected.

    I think you should not use a gridview inside a scrollviewer, because both panel types have scrollbars. Either remove your scrollviewer, or replace your gridview by another panel type (maybe a grid?).

    • Marked as answer by peterGro Tuesday, October 23, 2012 6:40 AM
    • Unmarked as answer by peterGro Wednesday, November 14, 2012 3:22 PM
    Tuesday, October 23, 2012 1:19 AM
  • Sorry again. ;)

    I'm encountering it again. This time I just have a GridView (inside a Grid, which itself is not part of any ScrollViewer) and I can select an item but not scroll inside the GridView when in touch mode. 

    There must be a way that to get a GridView which is capable of both scrolling with mouse and selecting with touch, mustn't it?


    • Edited by peterGro Wednesday, November 14, 2012 3:56 PM
    Wednesday, November 14, 2012 3:25 PM
  • Hey PeterGro,

    Were you able to solve this problem? I have just ran into this now.

    Ken

    Wednesday, October 09, 2013 4:59 AM
  • Yes, I did :). I thought I've already posted it here, but didn't. ;)

    So here it is:

    MyPage::MyPage()
    {
    	InitializeComponent();
    
    	// Necessary for reenabling mouse scrolling in gridView
    	_gridView->AddHandler(UIElement::PointerWheelChangedEvent, ref new PointerEventHandler([this](Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e)
    	{
    		e->Handled = false;
    	}),  true);
    }

    In the constructor of your page containing the gridView you have to place code after InitializeComponent(). You add an event handler which says, that you don't want to handle anything in there ;). With that, the parent scrollViewer is finally able to handle everything as we wanted it.

    • Marked as answer by peterGro Thursday, October 10, 2013 6:14 AM
    Thursday, October 10, 2013 6:14 AM
  • This is awesome. Thank you! :)
    Friday, October 11, 2013 3:13 AM