How to animate ListItem in ItemClick? - xaml

Question

I am having Storyboard in my Page resources to share it between required controls. I try to animate clicked ListItem using that Storyboard in code behind by setting TargetName propery.
<Page.Resources>
<Storyboard x:Name="Story1">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
<EasingDoubleKeyFrame KeyTime="0:0:0" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<ListView x:Name="ListView1" IsItemClickEnabled="True" ItemClick="ListView1_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="GridData">
<Grid.RenderTransform>
<TranslateTransform x:Name="GridTrans" X="0" />
</Grid.RenderTransform>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding Price}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
Story1.Stop();
var item = ListView1.ContainerFromItem(e.ClickedItem) as ListViewItem;
var grid = item.ContentTemplateRoot as Grid;
Storyboard.SetTargetName(Story1, grid.Name); //???
Story1.Begin();
}
But unable to animate clicked ListItem on ItemClick event. I get error as "Cannot resolve TargetName GridData"

Answer 1

The GridData is under DataTemplate, if you use SetTargetName method to set animation, it will not get correct ContentTemplateRoot. For your requirement, you could use SetTarget method.
private void ListView1_ItemClick(object sender, ItemClickEventArgs e)
{
Story1.Stop();
var item = ListView1.ContainerFromItem(e.ClickedItem) as ListViewItem;
var grid = item.ContentTemplateRoot as Grid;
Storyboard.SetTarget(Story1, grid);
Story1.Begin();
}