locked
Use Mousewheel view Gridview which is cantained in Scrollviewer

    Question

  • I put a Gridview control into Scrollviewer control.

    The Gridview control has 10000 images, and The Scrollviewer's HorizontalScrollBar Visible.

    The simulator‘s(1366x768) view display 3 images once(1 rows ).

    We can view the images by dragging the view or scrolling HorizontalScrollBar,  and invoke Scrollviewer’s ViewChanged event.

    in ViewChanged event we can get HorizontalOffset of HorizontalScrollBar.

    but can not view by scrolling mousewheel. my question:

    1, how to view images by scrolling mousewheel? if Can, I want to get positon of HorizontalScrollBar.

    ----------------------------------------------

    My code:

    XAML file:

    <Grid>
            <ScrollViewer x:Name="viewer" 
                          ViewChanged="ScrollViewer_ViewChanged_1"
                          VerticalScrollMode="Disabled"
                          HorizontalScrollBarVisibility="Visible"
                          VerticalScrollBarVisibility="Disabled"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Background="Red">
                    <GridView x:Name="test"
                              Height="768"
                              HorizontalAlignment="Stretch"
                              VerticalAlignment="Stretch"
                              IsItemClickEnabled="True"
                              SelectionMode="None"
                              ItemClick="GridView_ItemClick_1"
                              Margin="0"
                              Padding="50,50,50,50">
                     <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    <Image Width="708" Height="708" Source="Assets/Logo.png"></Image>
                    </GridView>
            </ScrollViewer>
        </Grid>

    ---------------------------------------------------

    c++ file

    void MainPage::ScrollViewer_ViewChanged_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::ScrollViewerViewChangedEventArgs^ e)
    {
     float w = viewer->HorizontalOffset;
    }

     

     


    winRT



    Wednesday, August 15, 2012 4:27 AM

Answers

  • Hello,

    As per the documentation:

    "Caution  The PointerWheelChanged event does not bubble up from a GridView. This means that a control that has a GridView inside of it does not receive mouse wheel change messages if the pointer is over the GridView. For example, if you put a GridView inside of a ScrollViewer, you can't scroll the ScrollViewer with the mouse wheel when the pointer is over the GridView."

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx

    I hope this helps,

    James


    Windows Media SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Friday, August 24, 2012 9:24 PM
    Moderator
  • James

     Thanks.

    According to your answer. I find a good idea.

    1, Set PointerWheelChanged event to Window.

              Window::Current->CoreWindow->PointerWheelChanged += ref new TypedEventHandler
                            <CoreWindow^, PointerEventArgs^>(this, &MainPage::Semantic_PointerWheelChanged);

    2, In Semantic_PointerWheelChanged, Set GridView's IsHitTestVisible false. And We can scroll ScrollViewer's PointerWheel to view Images. And we can Fire

             ViewChanged Event.

    3, In the  ViewChanged Event, We set GridView's IsHitTestVisible true. and we can Tap Item of Gridview.

    ---King Star.


    winRT

    • Marked as answer by King Star Monday, August 27, 2012 1:05 PM
    Monday, August 27, 2012 1:05 PM

All replies

  • Hello,

    Unfortunately I don't believe that I can reproduce your issue or maybe I don't understand your problem. Using the mouse scroll wheel with the XAML and code you provided I am able to get the HorizontalOffset.

    Does this sample code I wrote work for you?

    https://skydrive.live.com/redir?resid=A112913F054133F!326&authkey=!APcfTbBWrNPHfrU

    Thanks,

    James


    Windows Media SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Wednesday, August 22, 2012 12:28 AM
    Moderator
  • Hello,

    Unfortunately I don't believe that I can reproduce your issue or maybe I don't understand your problem. Using the mouse scroll wheel with the XAML and code you provided I am able to get the HorizontalOffset.

    Does this sample code I wrote work for you?

    https://skydrive.live.com/redir?resid=A112913F054133F!326&authkey=!APcfTbBWrNPHfrU

    Thanks,

    James


    Windows Media SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Hi James,

     Thank you very much first.

     I hope you can reply that again.

    perhaps i describe unclear. it is my faults. My meaning:

    I put a Gridview control into Scrollviewer control.

    The Gridview control has 10000 images, and The Scrollviewer's HorizontalScrollBar Visible.

    The simulator‘s(1366x768) view display 3 images once(1 rows ).

    1, We can view the images by dragging the Image or scrolling HorizontalScrollBar,  and invoke Scrollviewer’s ViewChanged event.

    2, in ViewChanged event we can get HorizontalOffset of HorizontalScrollBar.

    3, When i put the pointer on the HorizontalScrollBar,  we can view the images by scrolling pointer wheel .

    but my trouble is :

    4, If i put the pointer wheel on the image (not on HorizontalScrollBar),  when i scroll the pointer wheel, we can't view the iamges, and  Scrollviewer’s ViewChanged event is not invoked. badly I can not get HorizontalOffset.

    So, I want to view the image when scroll the pointer wheel and want to known HorizontalOffset.

    Thanks again.

    ---King Star.


    winRT

    Thursday, August 23, 2012 9:32 AM
  • Hello,

    As per the documentation:

    "Caution  The PointerWheelChanged event does not bubble up from a GridView. This means that a control that has a GridView inside of it does not receive mouse wheel change messages if the pointer is over the GridView. For example, if you put a GridView inside of a ScrollViewer, you can't scroll the ScrollViewer with the mouse wheel when the pointer is over the GridView."

    http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.gridview.aspx

    I hope this helps,

    James


    Windows Media SDK Technologies - Microsoft Developer Services - http://blogs.msdn.com/mediasdkstuff/

    Friday, August 24, 2012 9:24 PM
    Moderator
  • James

     Thanks.

    According to your answer. I find a good idea.

    1, Set PointerWheelChanged event to Window.

              Window::Current->CoreWindow->PointerWheelChanged += ref new TypedEventHandler
                            <CoreWindow^, PointerEventArgs^>(this, &MainPage::Semantic_PointerWheelChanged);

    2, In Semantic_PointerWheelChanged, Set GridView's IsHitTestVisible false. And We can scroll ScrollViewer's PointerWheel to view Images. And we can Fire

             ViewChanged Event.

    3, In the  ViewChanged Event, We set GridView's IsHitTestVisible true. and we can Tap Item of Gridview.

    ---King Star.


    winRT

    • Marked as answer by King Star Monday, August 27, 2012 1:05 PM
    Monday, August 27, 2012 1:05 PM