none
How to make GridView expandable in UWP

    Question

  • I wonder is there any way to make GridView expandable in UWP. More specifically, the thing I want to achieve is that whenever I click one of the GridViewItem, the "expanded panel" will pop up one row below the item and take all the space of that row.

    In Android, there is a ExpandableAdapter to make this happen but I don't see such thing in UWP. I'll give you an image to illustrate my idea. The expand overlay will take the space of one of the row and push the items moving downward.

     did some research and there are some potential options:

    1. Expanding solutions for ListView which is similar but not fits the problem quite well as each listviewitem takes a row while gridviewitem does not.

    2. Using Expander control from Microsoft Community toolkit, however, the height of the expand overlay is limited and not able to change depending on the content and it does not take all the space of that row.

    3. Although some suggests that Datagrid might fit, I'm not sure about that as the itemsource of the gridview is mainly list of images and I have quite a lot animations on the gridview as well as gridviewitem. I don't think DataGrid would support such design requirement

    Any hint or suggest would be welcome. Thank you


    Wednesday, May 22, 2019 8:07 PM

Answers

  • Hi,

    Well, my suggestion is still using the listview and the expander. You could create different itemtemplates. One for the expander and another for each row's items. That means in normal state, you have a item template that contain some click item and make it looks like a grid. And once the click item is clicked, the next row will change to another template using DataTemplateSelector Class to show the detail information. This is for UI. And in your code behind, first you need to have a list as item source. Each object in the list should contain the information for 2(just like the image)  click item. Then when a click item is clicked, you need to insert a object that contain the full information you need to display in the expander to the list. Reload the listview and the list will show the new row as an expander. Once you don't need it. Just more the inserted data and reload the listview. Not sure if this could success but you could make a try about this.

    If this still doesn't meet your requirement,  you might need to create a custom control 

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Marked as answer by jasonwun Sunday, May 26, 2019 7:12 PM
    Thursday, May 23, 2019 3:34 AM
    Moderator