1. 首頁
  2. 問答
  3. UWP在ItemsControl項上添加動畫

UWP在ItemsControl項上添加動畫

2017-02-13 94 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

相關問題

 相關問題