locked
how to customize or implement the similar UI for the list view control in my attachment?

    Question

  • Hi, dear all,

    Would you please give me any suggestion or clue about how to achieve the UI effect in my attachment?

    In the attachment, there are some highlighted points as the following;

    1. Some items are always shown in different background color, and they could be folded/unfolded (please refer to the marks 2 and 3 in the attachment);

    2. Some items could be clicked to be folded/unfolded;

    3. if the item could be unfolded, there are sub items shown (please refer to the mark 3); And if there would be items below the unfolded item, they would be pushed down (please refer to mark 5);

    4. if there are too many items that couldn't be shown in the view, a scroll bar would be shown (please see mark 4).

     

    My initial thoughts:

    1. two sets of data are prepared: one for folded view (given the name set_A), the other for the unfolded view (given the name set_A);

        * There should be several data sets for the unfolded view as there might be several item that could be unfolded. However, the total number would be no more than 3. Thanks.

    2. we could manually search the list and highlight it in code anytime;

    3. any fold/unfold action will trigger a reloading operation to the list view; Namely:

        a. if the item is folded, the right arrow would be changed to down one; And the shown data set would be set_A. Otherwise,

        b. we will change the down arrow to the right one, and the shown data set would be set_B;

     

    I know this is not a Metro-standard style. But would you please give me a few comments? Providing a user control derived from a listview, or just containing a the listview are both OK.

     

    Thank you very much!



    • Edited by B0L Monday, September 1, 2014 8:51 AM
    Monday, September 1, 2014 8:32 AM

Answers

  • Hi B0L,

    As I know you may want to search for a Accordion control in Windows Store App, see this: https://github.com/brendankowitz/ZeroProximity.Accordion

    I believe you could look into the code and to see how to implement the control.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, September 2, 2014 7:36 AM
    Moderator
  • Hi, Jamles, thank you very much for your info.

    After carefully reading your helpful link, I think the workload would be a little huge for me. Thus I prepared another way to achieve the accordion effect.

    The main idea would be borrowing from the grid example with VS wizzard: with each group title as the "mark 1" which has been shown in the attachment. The click action would show/hide the items.

    I will post my solution later after I've made it done!

    Thank you all very much.

    Thursday, September 4, 2014 10:00 AM

All replies

  • Hi B0L,

    As I know you may want to search for a Accordion control in Windows Store App, see this: https://github.com/brendankowitz/ZeroProximity.Accordion

    I believe you could look into the code and to see how to implement the control.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, September 2, 2014 7:36 AM
    Moderator
  • Hi, Jamles, thank you very much for your info.

    After carefully reading your helpful link, I think the workload would be a little huge for me. Thus I prepared another way to achieve the accordion effect.

    The main idea would be borrowing from the grid example with VS wizzard: with each group title as the "mark 1" which has been shown in the attachment. The click action would show/hide the items.

    I will post my solution later after I've made it done!

    Thank you all very much.

    Thursday, September 4, 2014 10:00 AM
  • Any update for your solution? I will temporary close this thread, and if you have further question, please feel free to post on the forum.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, September 16, 2014 7:38 AM
    Moderator
  • Hello, James,

    Sorry to reply so late! It seems that I couldn't post my solution in more detail at present. So please close this thread.

    I will post separate thread later for my current implementation. Thanks.

    Tuesday, September 16, 2014 12:59 PM