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>

您可以将控件：PlaceListItemControl视为一个高度为150或200的简单网格。

这个approch的问题是，当我点击一个ListviewItem时，应用程序崩溃了，因为这行：

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

有关为何以及如何解决该问题的任何想法？

Answer 1

您的故事板＆＃39;在The Page的资源中定义。 ListViewItems是在与页面不同的上下文中创建的，因为它们可能存在多次。因此，您无法解决“数据模板”中的元素。

一种可能的解决方案是创建一个用户控件＆＃39;它托管您的故事板和模板内容，然后将该控件作为您的ItemTemplate。

Answer 2

您可以扩展ListView并覆盖PrepareContainerForItemOverride方法，在该方法中，您可以在收到的DependencyObject引用中创建和启动Storyboard动画。

如何在listview项目中触发动画

2 个答案: