C# XAML Listbox collapse when clicked

Question

I\'m new in XAML for Windows Phone 8.1 and have some troubles with

1. making a Stackpanel clickable
2. collapse Item, when clicked

My work s

Answer 1

The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?

If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.

---

<ListBox.ItemTemplate>
    <DataTemplate>
        <Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
            <StackPanel>
                <!--- rest of template --->
            </StackPanel>
        </Border>
    </DataTemplate>
</ListBox.ItemTemplate>

---

Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).

private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    int minHeight = 40;                // change to whatever you want
    Border b = sender as Border;
    if (b.ActualHeight > minHeight)
    {
        b.Height = minHeight;
    }
    else
    {
        b.Height = double.NaN;         // this will change the height back to Auto, showing everything
    }
}

---

Code In Action

---

This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.