UWP在ItemsControl项目上添加动画
在UWP的静态页面上有我的模拟动画。 这里是模拟XAML代码
<Page.Resources>
<Storyboard x:Name="GridViewButtonPointerEnteredAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="0.1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="100">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="GridViewButtonPointerExitAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.MaxHeight)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="40">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="10">
<Grid x:Name="grid" Width="286" Height="286">
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="ms-appx:///Assets/home/home_mydesk.jpg"/>
</Grid.Background>
<Border x:Name="GridViewButtonBackdrop" Background="Transparent" />
<Border VerticalAlignment="Bottom">
<Border.Background>
<ImageBrush ImageSource="ms-appx:///Assets/boxfade.png" Stretch="Fill" />
</Border.Background>
<StackPanel Margin="20,20">
<TextBlock Text="My Desk" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" />
<TextBlock x:Name="textBlock" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxHeight="40" />
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Image Source="ms-appx:///Assets/pdf_16.png" Width="16" Height="16" />
<TextBlock Text="PDF File" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</Border>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerEnteredAnimation}"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerExitAnimation}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Grid>
</Grid>
</Grid>
所以我在ItemsControl.ItemTemplate上实现了它。我运行了应用程序，但当我将鼠标悬停在一个项目中时，一个错误吐出来并且它说了。
System.Runtime.InteropServices.COMException: No installed components were detected.
Cannot resolve TargetName GridViewButtonBackdrop.
at Windows.UI.Xaml.Media.Animation.Storyboard.Begin()
at Microsoft.Xaml.Interactions.Media.ControlStoryboardAction.Execute(Object sender, Object parameter)
at Microsoft.Xaml.Interactivity.Interaction.ExecuteActions(Object sender, ActionCollection actions, Object parameter)
at Microsoft.Xaml.Interactions.Core.EventTriggerBehavior.OnEvent(Object sender, Objec
这里是ItemsControl.ItemTemplate.DataTemplate的XAML实现
<Grid Width="286" Height="286" Background="{StaticResource DefaultThemeColor}">
<Grid>
<Image Source="ms-appx:///Assets/icon_pdf.png" Stretch="UniformToFill" Visibility="{Binding Converter={StaticResource IsPDF},ConverterParameter=pdf}"/>
<Image Source="ms-appx:///Assets/interactive_placeholder.png" Stretch="UniformToFill" Visibility="{Binding Converter={StaticResource IsPDF}, ConverterParameter=interactive}"/>
<Image Source="{Binding image.data.full_path}" Stretch="UniformToFill" />
</Grid>
<Border x:Name="GridViewButtonBackdrop" Background="Transparent" />
<Border MinHeight="0" VerticalAlignment="Bottom">
<Border.Background>
<ImageBrush ImageSource="ms-appx:///Assets/boxfade.png" Stretch="Fill" />
</Border.Background>
<StackPanel Margin="20,20">
<TextBlock Text="{Binding title}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" />
<TextBlock Text="{Binding info.data.description}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" MaxHeight="40" />
<StackPanel Orientation="Horizontal" Margin="0,8,0,0" Visibility="{Binding Converter={StaticResource IsPDF},ConverterParameter=pdf}">
<Image Source="ms-appx:///Assets/pdf_16.png" Width="16" Height="16" />
<TextBlock Text="PDF File" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,8,0,0" Visibility="{Binding Converter={StaticResource IsPDF}, ConverterParameter=interactive}">
<Image Source="ms-appx:///Assets/icon_interactive.png" Width="16" Height="16" />
<TextBlock Text="Interactive" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</Border>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerEnteredAnimation}"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerExitAnimation}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Grid>
据我所知，它可能没有看到 GridViewButtonBackdrop 元素，因为它位于项集合中。
如何在ItemsControl项目中正确实现此动画？
- 更新 -
感谢优化提示@JustinXL。我将ItemsControl更改为ListView并优化动画。
所以现在这里是
XAML
<Page.Resources>
<Storyboard x:Name="GridViewButtonPointerEnteredAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="0.1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Description">
<EasingDoubleKeyFrame KeyTime="0" Value="115"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextDescription">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.0001">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="43">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Name="GridViewButtonPointerExitAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridViewButtonBackdrop">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Description">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="115">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="TextDescription">
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="textBlock">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="10">
<Grid x:Name="grid" Width="286" Height="286">
<Grid.Clip>
<RectangleGeometry Rect="0,0,286,286" />
</Grid.Clip>
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="ms-appx:///Assets/home/home_mydesk.jpg"/>
</Grid.Background>
<Border x:Name="GridViewButtonBackdrop" Background="#AF000000" Opacity="0" />
<Border VerticalAlignment="Bottom" Height="150">
<Border.Background>
<ImageBrush ImageSource="ms-appx:///Assets/boxfade.png" Stretch="Fill" />
</Border.Background>
</Border>
<Border x:Name="Description" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<CompositeTransform TranslateY="115"/>
</Border.RenderTransform>
<StackPanel Margin="20,20">
<TextBlock x:Name="textBlock" Text="My Desk" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontSize="17" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" >
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock x:Name="TextDescription" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxHeight="43" Margin="0,5,0,0" RenderTransformOrigin="0.5,0.5" />
<StackPanel Orientation="Horizontal" Margin="0,8,0,0">
<Image Source="ms-appx:///Assets/pdf_16.png" Width="16" Height="16" />
<TextBlock Text="PDF File" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="WordEllipsis" Margin="10,0,0,0" />
</StackPanel>
<TextBlock x:Name="TextDescriptionExpanded" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" TextTrimming="CharacterEllipsis" MaxHeight="100" Margin="0,5,0,0" />
</StackPanel>
</Border>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="PointerEntered">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerEnteredAnimation}"/>
</Core:EventTriggerBehavior>
<Core:EventTriggerBehavior EventName="PointerExited">
<Media:ControlStoryboardAction Storyboard="{StaticResource GridViewButtonPointerExitAnimation}"/>
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</Grid>
</Grid>
</Grid>
1 个答案:
答案 0 :(得分：3)
不，将其包装在UserControl内不应影响整体性能。这就是我实现它的方式。如果您想进一步优化，请考虑将ItemsControl替换为ListView，默认情况下会为您提供UI虚拟化（例如，它只会呈现您所看到的内容以及更多内容）。
然而，更能影响性能的是您正在设置可能导致布局更新的MaxHeight属性。这种类型的动画称为依赖动画，它在UI线程上运行。尽量避免使用它们。
所以这是一个简单的解决方法 -
- 复制文本，使复制的文本跨越更多行，并将其向下推，以便通过更改其
TranslateY与原始对齐，然后默认隐藏它。 - 悬停时，隐藏原件并显示复制件，然后为其
TranslateY设置动画以显示原件。
请注意，TranslateY是CompositeTransform的一部分，不会导致任何代价高昂的布局更新。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？