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开发者_StackOverflow社区 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.
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>
精彩评论