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

4
votes

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.

1
silverlightwindows-phone-7

1 Answers

6
votes

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>