WP7: change item visibility in selected list item

Question

I have a list with the following data template:

<DataTemplate x:Name="MyTemplate"> <StackPanel> <TextBlock Name="textblock1" Text="{Binding Name}" /> <TextBlock Name="textblock2" Text="{Binding SurName}" /> <StackPanel Name="extrainfo" Visibility="Collapsed"> <TextBlock Name="textblock3" Text="{Binding Address}" /> <TextBlock Name="textblock4" Text="{Binding Phone}" /> <TextBlock Name="textblock5" Text="{Binding Email}" /> </StackPanel> </StackPanel> </DataTemplate> 

List:

 <ListBox Name="myListBox" ItemTemplate="{StaticResource MyTemplate}" ItemsSource="{Binding UserList}" /> 

The problem is this: when the user selects an item in the list, I want to display additional information by setting the visibility of the stack panel to visible.

Any idea how to do this (via xaml or C #)? I tried to change the storyboard, but I'm not very far from this approach.

Answer 1

Create an ItemContainerStyle in which, by default, the ContentControl will display the contents of the ItemTemplate , as well as the details of the parts defined using Visibility set to Collapsed . Then update the "Selected" VisualState to set Visibility in the details panel on Visible :

 <VisualState x:Name="Selected"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Details"> <DiscreteObjectKeyFrame KeyTime="0" Value="Visibile"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> ... <StackPanel> <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> <Grid x:Name="Details"> <!-- Put the content of your details panel here. --> </Grid> </StackPanel>