windows-phone-8longlistselector

How can I expand my longListSelector item when clicked?


I want to add an icon and another textblock to my data template when the item in longListSelector is tapped. Also, when another item is tapped, I want to remove this icon and textblock from previously selected item and expand new selected item. How can I achieve that?


Solution

  • Options 1 (Modify it through Code-Behind)


    You can modify my ListBox collapse code to do what you want : ListBox Collapse. You need to change the Border to a <Grid> then loop through the .Children to hide/show the extra textblock and icon. Always save the reference to the current SelectedItem so when the SelectionChanged event fires you can hide the previous selection and then show the newer Selected Item.


    Option 2: Create An ItemControl you can use as part of the Item.DataTemplate of the LongListSelector

    Using this method, you want to create your own VisualState (Selected, NotSelected.. or whatever you want).

    In the Selected (StoryBoard) you change the extra Textblock/Icon's Visibility to Visible.
    In the NotSelected (StoryBoard) you change the extra Textblock/Icon's Visibility to Collapse.

    Then when the SelectionChanged Event on the LongListSelector, loop through your ItemSources and compare it to the SelectedItem.

    If the current item is the SelectedItem then VisualStateManager.GoToState(your_control, "Selected") else VisualStateManager.GoToState(your_control, "NotSelected")

    This will complete the whole interaction that you want.