WPF 中 UserControl 的不透明度动画
Opacity animation on a UserControl in WPF
我有一个 WPF 应用程序，其中一个视图带有动画。动画无限重复并且非常简单 - 只有三个箭头使用故事板将不透明度从 100% 淡化到 0%。
我最初将每个箭头作为图像，但我使用保存为 XAML（路径）的矢量图形重新绘制图像。
我用新的 UserControl 替换了图像标签，如下所示：
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<control:Arrow x:Name="arrow1" Grid.Column="0" Grid.Row="0">
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.6" BeginTime="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
</control:Arrow>
<control:Arrow x:Name="arrow2" Grid.Column="0" Grid.Row="1">
<control:Arrow.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="arrow2" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0.2" />
<DoubleAnimation Storyboard.TargetName="arrow2" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.4" BeginTime="0:0:1.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</control:Arrow.Triggers>
</control:Arrow>
<control:Arrow x:Name="arrow3" Grid.Column="0" Grid.Row="2">
<control:Arrow.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="arrow3" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0.4" />
<DoubleAnimation Storyboard.TargetName="arrow3" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.2" BeginTime="0:0:1.4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</control:Arrow.Triggers>
</control:Arrow>
</Grid>
动画以前可以，但现在不行了，我也不知道为什么。我认为不透明度对图像和 UserControls 的效果相同，但也许我遗漏了一些东西。我已经在这里搜索了解决方案，但 Google 无济于事。
这是用户控件 XAML:
<UserControl x:Class="KioskPractice.UIElements.Arrow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
>
<Grid>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg4163" Width="645.99999" Height="146.19125">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: sodipodi:namedview-->
<!--Unknown tag: metadata-->
<Canvas Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-34.142857" Y="-73.552293"/>
</Canvas.RenderTransform>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4150" Fill="{StaticResource AirlineChoiceBlue}" StrokeThickness="1" Stroke="{StaticResource AirlineChoiceBlue}" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Data="m 679.64285 74.222299 0 50.000001 -320 95 -324.999993 -95 0 -50.000001 324.999993 95.000001 z"/>
</Canvas>
</Canvas>
</Grid>
</UserControl>
如果它应该一直脉动并且不与之交互，而不是管理每个实例，请将故事板移动到用户控件。注意：我不得不使用不同的颜色，因为你的 xaml.
中没有包含你的颜色
<UserControl x:Class="WpfApplication13.Arrow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" >
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="path4150" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="path4150" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.6" BeginTime="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg4163" Width="645.99999" Height="146.19125">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Canvas Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-34.142857" Y="-73.552293"/>
</Canvas.RenderTransform>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4150" Fill="Blue" StrokeThickness="1" Stroke="Blue" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Data="m 679.64285 74.222299 0 50.000001 -320 95 -324.999993 -95 0 -50.000001 324.999993 95.000001 z"/>
</Canvas>
</Canvas>
</Grid>
</UserControl>
那么你的用法看起来像这样：
<control:Arrow x:Name="arrow1" Grid.Column="0" Grid.Row="0" />
提供的代码只需从 DoubleAnimation 标签中删除 Storyboard.TargetName="arrow1"（arrow2 和 arrow3）即可工作
我有一个 WPF 应用程序，其中一个视图带有动画。动画无限重复并且非常简单 - 只有三个箭头使用故事板将不透明度从 100% 淡化到 0%。
我最初将每个箭头作为图像，但我使用保存为 XAML（路径）的矢量图形重新绘制图像。
我用新的 UserControl 替换了图像标签，如下所示：
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<control:Arrow x:Name="arrow1" Grid.Column="0" Grid.Row="0">
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="arrow1" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.6" BeginTime="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
</control:Arrow>
<control:Arrow x:Name="arrow2" Grid.Column="0" Grid.Row="1">
<control:Arrow.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="arrow2" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0.2" />
<DoubleAnimation Storyboard.TargetName="arrow2" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.4" BeginTime="0:0:1.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</control:Arrow.Triggers>
</control:Arrow>
<control:Arrow x:Name="arrow3" Grid.Column="0" Grid.Row="2">
<control:Arrow.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="arrow3" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0.4" />
<DoubleAnimation Storyboard.TargetName="arrow3" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.2" BeginTime="0:0:1.4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</control:Arrow.Triggers>
</control:Arrow>
</Grid>
动画以前可以，但现在不行了，我也不知道为什么。我认为不透明度对图像和 UserControls 的效果相同，但也许我遗漏了一些东西。我已经在这里搜索了解决方案，但 Google 无济于事。
这是用户控件 XAML:
<UserControl x:Class="KioskPractice.UIElements.Arrow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
>
<Grid>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg4163" Width="645.99999" Height="146.19125">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: sodipodi:namedview-->
<!--Unknown tag: metadata-->
<Canvas Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-34.142857" Y="-73.552293"/>
</Canvas.RenderTransform>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4150" Fill="{StaticResource AirlineChoiceBlue}" StrokeThickness="1" Stroke="{StaticResource AirlineChoiceBlue}" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Data="m 679.64285 74.222299 0 50.000001 -320 95 -324.999993 -95 0 -50.000001 324.999993 95.000001 z"/>
</Canvas>
</Canvas>
</Grid>
</UserControl>
如果它应该一直脉动并且不与之交互，而不是管理每个实例，请将故事板移动到用户控件。注意：我不得不使用不同的颜色，因为你的 xaml.
中没有包含你的颜色<UserControl x:Class="WpfApplication13.Arrow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" >
<UserControl.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="path4150" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:1" BeginTime="0:0:0" />
<DoubleAnimation Storyboard.TargetName="path4150" Storyboard.TargetProperty="Opacity" From="0" To="0" Duration="0:0:0.6" BeginTime="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="svg4163" Width="645.99999" Height="146.19125">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<Canvas Name="layer1">
<Canvas.RenderTransform>
<TranslateTransform X="-34.142857" Y="-73.552293"/>
</Canvas.RenderTransform>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4150" Fill="Blue" StrokeThickness="1" Stroke="Blue" StrokeLineJoin="Miter" StrokeStartLineCap="Flat" StrokeEndLineCap="Flat" Data="m 679.64285 74.222299 0 50.000001 -320 95 -324.999993 -95 0 -50.000001 324.999993 95.000001 z"/>
</Canvas>
</Canvas>
</Grid>
</UserControl>
那么你的用法看起来像这样：
<control:Arrow x:Name="arrow1" Grid.Column="0" Grid.Row="0" />
提供的代码只需从 DoubleAnimation 标签中删除 Storyboard.TargetName="arrow1"（arrow2 和 arrow3）即可工作