locked
How to determine the index of GridView item when pointer moves over it

    Question

  • In my app, an array of thumbnails are displayed in a GridView control inside the top AppBar. We want to implement the feature that when pointer (mouse, finger, pen) moves over a thumbnail, its corresponding image is displayed in the mainpage and the rest images are hidden. This feature is similar to Windows 8 taskbar.

    I've registered an event handler function to the PointerMoved event of the GridView control, but not sure how to implement this handler function. Could someone be kind to offer some help or code sample? Thanks.

    Monday, October 22, 2012 11:39 AM

Answers

  • OK I did not understand what you really wanted the first time.

    It is easy to display the image when you click or tap on the thumbnail in the GridView: use the ItemClick event of the GridView control. There is a sample which shows how to handle ItemClick in a GridView control:http://code.msdn.microsoft.com/windowsapps/ListViewSimple-d5fc27dd

    I don't know if any kind of event is fired when the mouse is moved over another GridView items. I haven't found any. Maybe somebody else knows?

    Using GridView PointerMoved event and trying to compute the items position and size doesn't seem to be a good choice (IMHO). I would rather create a custom control for the thumbnails, and override PointerMoved in the custom control, not in the GridView.

    But if the user is using your app on a tablet, no PointerMoved event will ever be fired unless the user taps on the GridView, which would generate ItemClick event. So I'm not sure tracking mouse move is a good design choice.


    Tuesday, October 23, 2012 10:29 PM

All replies

  • This MSDN sample may help you: http://code.msdn.microsoft.com/windowsapps/Touch-Hit-Testing-sample-5e35c690

    It shows how to use PointerPressed, PointerMoved, PointerReleased events.

    Beware that the windows 8 taskbar is supposed to be used with a mouse. App thumbnails are displayed while the mouse cursor is moved over the taskbar. This is a desktop app behavior, not a "Windows Store" App behavior. If you use a touch screen instead of a mouse, your app won't get these mouse-move events. You may want to read this mouse design guideline: http://msdn.microsoft.com/en-us/library/windows/apps/hh700408.aspx

    Tuesday, October 23, 2012 12:40 AM
  • Hi Pierre, thank you for your response.

    I have a quick read of the hit test sample and do not find it very helpful. The difficulty in my case is that the geometric data (or bounding rectangle) of each GridView items are not available, whereas in the test sample, they are given a priori.

    After some search on MSDN, I fail to find any reference on how to get the visual attributes (bounding box, position on screen etc.) of the item containers of a GridView control.

    Tuesday, October 23, 2012 3:14 PM
  • OK I did not understand what you really wanted the first time.

    It is easy to display the image when you click or tap on the thumbnail in the GridView: use the ItemClick event of the GridView control. There is a sample which shows how to handle ItemClick in a GridView control:http://code.msdn.microsoft.com/windowsapps/ListViewSimple-d5fc27dd

    I don't know if any kind of event is fired when the mouse is moved over another GridView items. I haven't found any. Maybe somebody else knows?

    Using GridView PointerMoved event and trying to compute the items position and size doesn't seem to be a good choice (IMHO). I would rather create a custom control for the thumbnails, and override PointerMoved in the custom control, not in the GridView.

    But if the user is using your app on a tablet, no PointerMoved event will ever be fired unless the user taps on the GridView, which would generate ItemClick event. So I'm not sure tracking mouse move is a good design choice.


    Tuesday, October 23, 2012 10:29 PM
  • You can get the actual height and width by doing this inside the ItemView Click handler:

    var clickedItem = itemGridView.ItemContainerGenerator.ContainerFromItem(e.ClickedItem);
    int width = (clickedItem as GridViewItem).ActualHeight;

    Tuesday, October 30, 2012 12:42 AM
  • Hi Lisa19,

    You may misunderstand my issue. I just want to find out which item is under mouse position, and no click event is involved.

    Wednesday, October 31, 2012 4:57 PM