如何在 ItemClick 中为 ListItem 设置动画？答案

【问题标题】：How to animate ListItem in ItemClick?如何在 ItemClick 中为 ListItem 设置动画？
【发布时间】：2018-07-25 10:36:42
【问题描述】：

我的页面资源中有 Storyboard，以便在所需控件之间共享它。我尝试通过设置 TargetName 属性在代码中使用该 Storyboard 为单击的 ListItem 设置动画。

<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();             
}

但无法在 ItemClick 事件上为单击的 ListItem 设置动画。我收到“无法解析 TargetName GridData”的错误

【问题讨论】：

标签： xaml uwp

【解决方案1】：

GridData在DataTemplate下，如果用SetTargetName方法设置动画，ContentTemplateRoot将无法正确获取。根据您的要求，您可以使用SetTarget 方法。

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();
}

【讨论】：