如何在列表视图项内触发动画
How to trigger an animation inside a listview item
我正在尝试在单击列表视图项目时在该项目上执行动画。
这是我生成的代码:
故事板:
<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}" />
知道为什么以及如何解决这个问题吗?
您的 'Storyboard' 在主页的资源中定义。 ListViewItems 是在与页面不同的上下文中创建的,因为它们可能存在多次。因此,您无法寻址 'DataTemplate'.
内的元素
一个可能的解决方案是创建一个 'UserControl' 来承载您的 Storyboard 和模板内容,然后将该控件作为您的 ItemTemplate。
您可以扩展 ListView
并覆盖 PrepareContainerForItemOverride
方法,在该方法中您可以在作为参数收到的 DependencyObject
引用上创建和启动故事板动画。
我正在尝试在单击列表视图项目时在该项目上执行动画。
这是我生成的代码:
故事板:
<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}" />
知道为什么以及如何解决这个问题吗?
您的 'Storyboard' 在主页的资源中定义。 ListViewItems 是在与页面不同的上下文中创建的,因为它们可能存在多次。因此,您无法寻址 'DataTemplate'.
内的元素一个可能的解决方案是创建一个 'UserControl' 来承载您的 Storyboard 和模板内容,然后将该控件作为您的 ItemTemplate。
您可以扩展 ListView
并覆盖 PrepareContainerForItemOverride
方法,在该方法中您可以在作为参数收到的 DependencyObject
引用上创建和启动故事板动画。