如何在列表视图项内触发动画

Question

我正在尝试在单击列表视图项目时在该项目上执行动画。

这是我生成的代码：

故事板：

    <Page.Resources>
    <Storyboard x:Name="ShowPlaceDetailAnimation">
        <DoubleAnimation
                Storyboard.TargetName="PlaceDetaiGridN"
                Storyboard.TargetProperty="Height"
                EnableDependentAnimation="True"
                From="0" To="200" Duration="0:0:0.2"/>
    </Storyboard>
</Page.Resources>

和列表视图：

        <ListView Margin="0, 5, 0, 0" Grid.Row="1" ItemsSource="{Binding Places}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Vertical" Margin="0,0,0,10"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <controls:PlaceListItemControl Grid.Row="0" x:Name="PlaceListItemControlN"
                    PlaceName="{Binding PlaceName}"
                    Picture="{Binding Picture}"
                    Distance="{Binding Distance}"
                    Reviews="{Binding NumberOfReview}"
                    Stars="{Binding NumberOfStars}"
                    Category="{Binding Category}"
                    Height="100"
                    VerticalAlignment="Top"
                    Margin="5, 10, 5, 0">
                        <interactivity:Interaction.Behaviors>
                            <core:EventTriggerBehavior EventName="Tapped">
                                <core:InvokeCommandAction Command="{Binding ElementName=PlaceViewN, Path=DataContext.PlaceTappedCommand}"
                                                          CommandParameter="{Binding Id}"/>
                                <media:ControlStoryboardAction Storyboard="{StaticResource ShowPlaceDetailAnimation}" />
                            </core:EventTriggerBehavior>
                        </interactivity:Interaction.Behaviors>
                    </controls:PlaceListItemControl>
                    <Grid Grid.Row="1" Background="Brown" x:Name="PlaceDetaiGridN">                            
                    </Grid>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

您可以将 controls:PlaceListItemControl 视为高度为 150 或 200 的简单网格。

此方法的问题是，当我单击 ListviewItem 时，应用程序因这一行而崩溃：

<media:ControlStoryboardAction Storyboard="{StaticResource ShowPlaceDetailAnimation}" />

知道为什么以及如何解决这个问题吗？

Answer 1

您的 'Storyboard' 在主页的资源中定义。 ListViewItems 是在与页面不同的上下文中创建的，因为它们可能存在多次。因此，您无法寻址 'DataTemplate'.

内的元素

一个可能的解决方案是创建一个 'UserControl' 来承载您的 Storyboard 和模板内容，然后将该控件作为您的 ItemTemplate。

Answer 2

您可以扩展 ListView 并覆盖 PrepareContainerForItemOverride 方法，在该方法中您可以在作为参数收到的 DependencyObject 引用上创建和启动故事板动画。

如何在列表视图项内触发动画

How to trigger an animation inside a listview item

c#

xaml

listview

storyboard

windows-phone-8.1