C# XAML Listbox collapse when clicked

问题

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 so far looks like that:

And the Code to that (please correct me, if there are major flaws):

<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
        <StackPanel Orientation="Horizontal">
            <StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
                <Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
            </StackPanel>
            <StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
            <StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
                <TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
                <TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
            </StackPanel>
        </StackPanel>
    </Border>

This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:

<ListBox x:Name="ListBox1" Margin="0"
     Width="400" Height="200" HorizontalAlignment="Left"
     ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
        <ListBox.ItemTemplate>
            <DataTemplate>

                // the code above

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

So my question is: How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?

Thank you very much in advance.

回答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.

来源：https://stackoverflow.com/questions/26064920/c-sharp-xaml-listbox-collapse-when-clicked