上面是我在 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>
最佳答案
不，将其包装在 UserControl 中不应影响整体性能。这实际上就是我将如何实现它。如果您想要进一步优化，请考虑将您的 ItemsControl 替换为 ListView，它默认为您提供 UI 虚拟化(例如，它只呈现您看到的内容以及更多内容)。
但是，对性能影响更大的是您正在为可能导致布局更新的 MaxHeight 属性设置动画。这种类型的动画称为 依赖 动画，它在 UI 线程上运行。尽量避免它们。
所以这是一个简单的解决方法 -
TranslateY 将其下推以与原始文本对齐，然后默认隐藏它。TranslateY 设置动画以将其调出。请注意，TranslateY 是 CompositeTransform 的一部分，不会导致任何代价高昂的布局更新。
关于windows - UWP 在 ItemsControl 项目上添加动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42196988/
我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
这似乎非常适得其反，因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby-mysqlgem问题(gem本身发生段错误，一个名为UnixSocket的类显然在Windows机器上不能正常工作，等等)。我只是在浪费时间吗？我应该转向不同的脚本语言吗？ 最佳答案 我在Windows上使用Ruby的经验很少，但是当我开始使用Ruby时，我是在Windows上，我的总体印象是它不是Windows原生系统。因此，在主要使用Windows多年之后，开始使用Ruby促使我切换回原来的系统Unix，这次是Linux。Rub
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit
当谈到运行时自省(introspection)和动态代码生成时，我认为ruby没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资