Expand and collapse option with same Image button click.

Rk.MoorthyRk.Moorthy USMember ✭✭


I need expand and collapse option with same Image button click.



  • stvansolanostvansolano UMInsider, University ✭✭✭

    Hello @Moorthy,

    Not sure about what are you looking for. Can you please give more details or an image? I have a ToggleImage control as part of my custom control examples on GitHub. You might take a look on it in case is the behavior that you are expecting:

    How to use it: link.
    XAML control link.
    Code Behind control link.

    Let me know if helps

  • Rk.MoorthyRk.Moorthy USMember ✭✭


    I have created a grid with 4 rows and 4 columns dynamically. The data is coming from database.

    Now I have done my page like following


    Here I have to Expand the details of the particular row in the Arrow Down Image(see the above image) Click like following.


    And also needs to change the Arrow Down Image to Arrow Up Image(see the above image) and vice versa.

    What would be the best Idea to generate like this.


  • stvansolanostvansolano UMInsider, University ✭✭✭
    edited June 2015

    Got it. Thanks for the details.

    It should work like an accordion right? I have a example for that too:


    Basically you should:
    1. Derive from ListView and ViewCell with some properties for toggling content accordingly.
    2. Use DataTemplate and DataTriggers for handling the content's visibility and arrow state (in my example I just simply rotate the image vertically)

    Here is how I use the AccordionView:

    var accordion = new AccordionView();
    accordion.Items.Add(new AccordionItem { Title = "Item #1", Content = "Body content #1", IsSelected = true });
    accordion.Items.Add(new AccordionItem { Title = "Item #2", Content = "Body content #2" });
    accordion.Items.Add(new AccordionItem { Title = "Item #3", Content = "Body content #3" });

    Take another look and let me know your thoughts.

  • Rk.MoorthyRk.Moorthy USMember ✭✭


    There is no property for accordion view in my application.

  • stvansolanostvansolano UMInsider, University ✭✭✭

    In my solution it is a custom contro you can reuse. Otherwise you need to implement it your own or try adapting my implementation to suit your needs.

  • EvelinARSEvelinARS Member ✭✭

    @RK_Moorthy have you finished this task? can u give me an idea for this?

Sign In or Register to comment.