当前位置: 动力学知识库 > 问答 > 编程问答 >

c# - Opacity animation on a UserControl in WPF

问题描述:

I have a WPF application with an animation on one of my views. The animation repeats indefinitely and is pretty simple - just three arrows that fade from 100% to 0% opacity using a storyboard.

I initially had each arrow as an image, but I redrew the image using vector graphics saved as XAML (Paths).

I replaced the image tags with the new UserControl, like so:

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

The animation worked before, but now it's not and I'm not sure why. I figured opacity worked the same for images and UserControls, but perhaps I'm missing something. I've already searched for a solution here and Google to no avail.

Here's the 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>

网友答案:

Provided code works just by removing Storyboard.TargetName="arrow1" (arrow2 and arrow3) from the DoubleAnimation tags

网友答案:

Instead of managing each instance, if it is supposed to pulse all of the time and it is not interacted with, move the storyboard to the user control. Note: I had to use a different color, as yours was not included in your 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>

Then your usage just looks something like this:

<control:Arrow x:Name="arrow1" Grid.Column="0" Grid.Row="0" />
分享给朋友:
您可能感兴趣的文章:
随机阅读: