C# WPF中用户控件上的不透明度动画_C#_Wpf_Xaml_Storyboard

C# WPF中用户控件上的不透明度动画

c# wpf xaml

C# WPF中用户控件上的不透明度动画,c#,wpf,xaml,storyboard,C#,Wpf,Xaml,Storyboard,我有一个WPF应用程序，其中一个视图上有一个动画。动画无限期地重复，非常简单-只有三个箭头，使用故事板从100%不透明度渐变为0% 我最初将每个箭头作为图像，但我使用保存为XAML（路径）的矢量图形重新绘制图像我用新的UserControl替换了图像标记，如下所示： <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition />

我有一个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>

动画以前很好用，但现在不行了，我也不知道为什么。我认为不透明度对图像和用户控件的作用是一样的，但也许我遗漏了一些东西。我已经在这里搜索了一个解决方案，谷歌也没有用

以下是UserControl 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标签中删除情节提要即可工作。TargetName=“arrow1”（arrow2和arrow3）

感谢这一技巧，但我希望每个箭头的动画都是交错的。如果您查看代码上的计时，您可以看到每个实例之间有十分之二秒的差异。命名是否会中断用户控件而不是图像的动画？我相信答案如下：