WP7 : Change the visibility of an item in a selected listbox item

Question

I've got a listbox with the following data template defined:

<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>

The listbox :

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

The issue is the following; when the user selects an item in the listbox I want to display the additional info by setting the visibility of the stackpanel to visible.

Any idea's how to achieve this (either via xaml or c#)? I tried to alter the storyboard but I did not get very far with that approach.

score 6 · Answer 1 · edited Feb 20 '11 at 08:25

Create an ItemContainerStyle that has the default ContentControl to present the contents of the ItemTemplate but also has the details content defined with the Visibility set to Collapsed. Then, update the "Selected" VisualState so that it sets the Visibility of the details panel to 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>

Sound promising. Could you elaborate some more on how to do this. I tried this, I get an unhandeld exception "Cannot resolve Targetname Details". — Rob, Feb 10 '11 at 15:21
You need to add `x:Name="Details"` to an element in the control template in the `ItemContainerStyle`. I'll update the code example above to show this. — Derek Lakin, Feb 10 '11 at 17:51
+1 Its a sound approach, could do with the Style and Template context that this Xaml belongs in being made clearer. — AnthonyWJones, Feb 10 '11 at 22:42

WP7 : Change the visibility of an item in a selected listbox item

1 Answers1