WP7: изменить видимость элемента в выбранном элементе списка

Question

У меня есть список со следующим шаблоном данных:

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

Список:

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

Проблема заключается в следующем; когда пользователь выбирает элемент в списке, я хочу отобразить дополнительную информацию, установив видимость панели стека на видимое.

Есть идеи, как этого добиться (через xaml или c #)? Я пытался изменить раскадровку, но с таким подходом я не очень далеко зашёл.

Answer 1

Создайте ItemContainerStyle, который имеет значение по умолчанию ContentControl для представления содержимого ItemTemplate, но также имеет содержимое сведений, определенное с Visibility, установленным на Collapsed.Затем обновите «Выбранное» VisualState, чтобы оно установило для Visibility панели сведений значение 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>