1. 首页
  2. 问答
  3. UWP在ItemsControl项上添加动画

UWP在ItemsControl项上添加动画

2017-02-13 86 views
2

enter image description hereUWP在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

<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>

的XAML实现我的理解，它可能无法看到该GridViewButtonBackdrop元素，因为它是一个项集合内。

如何在我的ItemsControl项目中正确实现此动画？

- 更新 -

感谢您的优化技巧@JustinXL。我将把ItemsControl改成ListView并优化动画。

所以在这里，现在
enter image description here

是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>

来源

2017-02-13 jaysonragasa

+0

我做了一个用户控件，而动画工作..但我认为这会伤害一些低端设备。 ItemsControl中每个项目的StoryBoard？我的应用程序可能在Itemscontrol中有超过10或50个物品，并且每个物品都会有StoryBoard。 – jaysonragasa

回答

3

没有，包裹它UserControl内不应影响整体性能。这实际上是我将如何实施它。如果您想进一步优化，请考虑用ListView替换您的ItemsControl，默认情况下它会为您提供UI虚拟化（例如，它仅显示您所看到的内容以及更多）。

但是，会更多伤害性能的是，您正在动画可能导致布局更新的MaxHeight属性。这种类型的动画被称为，依赖于动画，该动画在UI线程上运行。尽量避免他们尽可能多。

所以这里有一个简单的解决方法 -

  1. 复制文字，使复制的一个跨度多行，并通过改变其TranslateY，则默认情况下隐藏它推到与原来一致。
  2. 将鼠标悬停在上方时，隐藏原始图像并显示重复图像，然后使其TranslateY生动起来。

请注意，TranslateY是CompositeTransform的一部分，它不会导致任何代价高昂的布局更新。

来源

2017-02-13 11:37:14

+1

好东西！然后我对动画有了另一个想法。你很了解你的XAML :)谢谢！ – jaysonragasa

相关问题

 相关问题