locked
Scroll by moving the mouse, like on the start screen RRS feed

  • Question

  • You may know that you can scroll your start screen by pushing your mouse against the edge of the screen.

    I'd like to implement this scrolling behavior in my app. I've tried the

    Window.Current.CoreWindow.PointerMoved

    event, but it does not fire when the mouse is pushed against the edge - only if the cursor moves.

    Is there any other event that I can subscribe to, to get the 'pushing' of the cursor as well?

    cheers,

    ~theCake


    Life is unsure - always eat the dessert first!

    Thursday, December 13, 2012 9:32 AM

Answers

  • you wont get it doen with the pointer because that stops firing when you are on the border of the screen.

    have look at this sample i made: http://code.msdn.microsoft.com/windowsapps/GridView-with-scroll-86279865 excatly what you looking for


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Thursday, December 13, 2012 10:02 AM
  • That's exactly what I was looking for, thanks!

    I implemented it as an extension method to GridView:

    /// <summary>
    /// Enables mouse scrolling like on the start screen.
    /// IMPORTANT: it only works if the panel template is a horizontal StackPanel! (works with grouped GridViews)
    /// Inspired by this code sampe: http://code.msdn.microsoft.com/windowsapps/GridView-with-scroll-86279865 by Dave Smits.
    /// </summary>
    /// <param name="gv">The GridView to enable mouse scrolling on.</param>
    public static void EnableMouseScrolling(this GridView gv)
    {
        ScrollViewer scrollViewer = null;//the scroll viewer instance - can't necessarily be retrieved now, b/c no items may be assigned yet.
        MouseDevice.GetForCurrentView().MouseMoved += (MouseDevice sender, MouseEventArgs args) =>
            {
                if (scrollViewer == null)//if we don't have it yet
                    scrollViewer = gv.GetVisualChild<ScrollViewer>();//try to get the scroll viewer
                if (scrollViewer != null)//no scroll viewer, no items..
                {
                    Point PointerPosition = Window.Current.CoreWindow.PointerPosition;
                    Rect Bounds = Window.Current.Bounds;
                    if (PointerPosition.X == Bounds.Left || PointerPosition.X == Bounds.Right - 1)//the cursor is at an edge
                        if (args.MouseDelta.X < 0 || args.MouseDelta.X > 0)//the mouse moved
                            scrollViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset + (args.MouseDelta.X * 2));//scroll
                }
            };
    }

    I'll publish this as part of TCD.Controls on NuGet.. Just get the package, make ItemsPanelTemplate a horizontal StackPanel and call yourGridView.EnableMouseScrolling();

    (It does not work with WrapGrid). I figured that this is because the scroll viewer does not update its content size (ExtentWith) unless it's a StackPanel. Do you have any clues on that?

    cheers,

    ~theCake


    Life is unsure - always eat the dessert first!


    Thursday, December 13, 2012 8:08 PM

All replies

  • you wont get it doen with the pointer because that stops firing when you are on the border of the screen.

    have look at this sample i made: http://code.msdn.microsoft.com/windowsapps/GridView-with-scroll-86279865 excatly what you looking for


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#

    Thursday, December 13, 2012 10:02 AM
  • That's exactly what I was looking for, thanks!

    I implemented it as an extension method to GridView:

    /// <summary>
    /// Enables mouse scrolling like on the start screen.
    /// IMPORTANT: it only works if the panel template is a horizontal StackPanel! (works with grouped GridViews)
    /// Inspired by this code sampe: http://code.msdn.microsoft.com/windowsapps/GridView-with-scroll-86279865 by Dave Smits.
    /// </summary>
    /// <param name="gv">The GridView to enable mouse scrolling on.</param>
    public static void EnableMouseScrolling(this GridView gv)
    {
        ScrollViewer scrollViewer = null;//the scroll viewer instance - can't necessarily be retrieved now, b/c no items may be assigned yet.
        MouseDevice.GetForCurrentView().MouseMoved += (MouseDevice sender, MouseEventArgs args) =>
            {
                if (scrollViewer == null)//if we don't have it yet
                    scrollViewer = gv.GetVisualChild<ScrollViewer>();//try to get the scroll viewer
                if (scrollViewer != null)//no scroll viewer, no items..
                {
                    Point PointerPosition = Window.Current.CoreWindow.PointerPosition;
                    Rect Bounds = Window.Current.Bounds;
                    if (PointerPosition.X == Bounds.Left || PointerPosition.X == Bounds.Right - 1)//the cursor is at an edge
                        if (args.MouseDelta.X < 0 || args.MouseDelta.X > 0)//the mouse moved
                            scrollViewer.ScrollToHorizontalOffset(scrollViewer.HorizontalOffset + (args.MouseDelta.X * 2));//scroll
                }
            };
    }

    I'll publish this as part of TCD.Controls on NuGet.. Just get the package, make ItemsPanelTemplate a horizontal StackPanel and call yourGridView.EnableMouseScrolling();

    (It does not work with WrapGrid). I figured that this is because the scroll viewer does not update its content size (ExtentWith) unless it's a StackPanel. Do you have any clues on that?

    cheers,

    ~theCake


    Life is unsure - always eat the dessert first!


    Thursday, December 13, 2012 8:08 PM