locked
Dragged GridView item is not visible when it is dragged over AppBar.

    Question

  • Hi,

    I want to make customizable AppBar, which allows user to reorder items. I've placed a GridView inside of AppBar, however when I start dragging an item then it is overlapped by AppBar. GridView still reacts on drag events and after drop item is placed in correct place.

    How can I make a dragged item visible when it is over an Appbar?

    Thanks in advance.

    Peppone Di Peppi.

    Friday, February 22, 2013 8:36 AM

Answers

  • Hi Peppone,

    This is a known limitation: the AppBar acts as always-on-top, but the drag image doesn't and so appears under the AppBar in the z-order.

    Instead of using an actual AppBar you will need to mimic it with your own container. Depending on the specific needs you can either swap the AppBar out for editing mode or implement invocation and dismissal logic yourself (take a look at the EdgeGesture class).

    --Rob

     

    • Proposed as answer by Jesse Jiang Monday, February 25, 2013 2:44 AM
    • Marked as answer by Peppone Di Peppi Monday, February 25, 2013 10:04 AM
    Saturday, February 23, 2013 2:01 AM
    Owner

All replies

  • Hi Peppone,

    This is a known limitation: the AppBar acts as always-on-top, but the drag image doesn't and so appears under the AppBar in the z-order.

    Instead of using an actual AppBar you will need to mimic it with your own container. Depending on the specific needs you can either swap the AppBar out for editing mode or implement invocation and dismissal logic yourself (take a look at the EdgeGesture class).

    --Rob

     

    • Proposed as answer by Jesse Jiang Monday, February 25, 2013 2:44 AM
    • Marked as answer by Peppone Di Peppi Monday, February 25, 2013 10:04 AM
    Saturday, February 23, 2013 2:01 AM
    Owner
  • I have bumped into the same issue and I wonder what you mean with "swap the AppBar out for editing mode"?

    (I also don't think it is a limitation but a bug. The same thing happens with the settings flyout!)


    • Edited by CrossProduct Wednesday, November 06, 2013 9:55 PM
    Wednesday, November 06, 2013 9:54 PM
  • It's expected behavior, not a bug. Dragging only works within the same surface the grid is on. Popups like the AppBar and settings flyout are different surfaces and so cannot be dragged to.

    For editing mode here you can create a panel on the main page that looks like the AppBar.

    --Rob

    Wednesday, November 06, 2013 10:16 PM
    Owner
  • Thank you for your quick reply. I indeed went on the route of making my own top app bar. But I don't get it. The gridview is placed inside the settings flyout or top app bar. And the control itself renders properly. But as soon as you want to reorder the gridview the dragged item disappears. Basically there is no way to ever make a reordable list/grid in either settings fly out or the top app bar. I see no other place where you want to provide the user the option to reorder items. This is a common scenario and should be supported.

    • Edited by CrossProduct Wednesday, November 06, 2013 11:22 PM
    Wednesday, November 06, 2013 11:20 PM