How to change path property inside DataTemplate ListBox SelectedItem

Question

I use a listbox to show image data. i want to animate path property inside data template on the listbox when its selected pretty much like on this video

https://vine.co/v/On03bWIEPJ6

I saw many question similar with this and the manipulation from contentpresenter would do the job. but for my problem is i have to change path property inside datatemplate which inside contentpresenter

try #1 create visual state on my itemtemplate

        <DataTemplate x:Key="ItemTemplate">
        <Grid Height="456" Width="456" Margin="0,12">
            <VisualStateManager.CustomVisualStateManager>
                <ec:ExtendedVisualStateManager/>
            </VisualStateManager.CustomVisualStateManager>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="VisualStateGroup">
                    <VisualStateGroup.Transitions>
                        <VisualTransition GeneratedDuration="0"/>
                    </VisualStateGroup.Transitions>
                    <VisualState x:Name="selected1">
                        <Storyboard>
                            <-- this is where code generate from blend goes -->
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Rectangle x:Name="rectangle" HorizontalAlignment="Left" Height="456" Stroke="Black" VerticalAlignment="Top" Width="456">
                <Rectangle.Fill>
                    <ImageBrush ImageSource="{Binding photo}" Stretch="UniformToFill"/>
                </Rectangle.Fill>
            </Rectangle>
            <Path x:Name="rectangle_Copy" Fill="White" HorizontalAlignment="Left" Height="483.793" Stroke="Black" UseLayoutRounding="False" VerticalAlignment="Top" Width="479.386" Margin="-13.052,-13.52,-10.334,-14.273" >
                <Path.Data>
                    <PathGeometry FillRule="EvenOdd">
                        <PathFigure IsFilled="True" IsClosed="True" StartPoint="13.5517,14.0196">
                            <LineSegment Point="468.552,14.0196"/>
                            <LineSegment Point="468.552,469.02"/>
                            <LineSegment Point="11.427,471.145"/>
                        </PathFigure>
                        <PathFigure IsFilled="True" IsClosed="True" StartPoint="468.552,14.145">
                            <BezierSegment Point3="469.052,469.27" Point2="469.052,469.27" Point1="468.552,14.145"/>
                            <BezierSegment Point3="11.5517,471.52" Point2="11.5517,471.52" Point1="469.052,469.27"/>
                            <BezierSegment Point3="13.552,14.02" Point2="13.552,14.02" Point1="11.5517,471.52"/>
                            <BezierSegment Point3="468.552,14.145" Point2="468.552,14.145" Point1="13.552,14.02"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Grid>
    </DataTemplate>

But i cant find a way to trigger this visualstate shen listbox item is selected.

try #2 i create 2 item template, one for normal state and two is for selected state like this.

        <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
                            ....
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myListBox" Storyboard.TargetProperty="ItemTemplate">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="{StaticResource selectedDataTemplate}"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>

this create error when i select the listbox, and i dont think this approach could do the animation.

this is my listbox

<ListBox Name="myListBox" ItemsSource="{Binding Feed}" 
                         SelectionChanged="ListBox_SelectionChanged" 
                         ItemTemplate="{StaticResource ItemTemplate}" 
                         ItemContainerStyle="{StaticResource ListBoxItemStyle1}"/>

Please any help would be great, thanks before.

Answer 1

See http://msdn.microsoft.com/en-us/library/ms742536%28v=vs.110%29.aspx

<ListBox ...>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Trigger.EnterActions>
                        <!-- What happens when it is selected. Put a StoryBoard here -->
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <!-- What happens when it is unselected. Put a StoryBoard here -->
                    </Trigger.ExitActions>          
                </Trigger>               
            </Style.Triggers>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>