使用数据触发器为线性笔刷制作动画 [英] Animate a linear brush using a data trigger

问题描述

我正在尝试使用数据触发器为边框上的线性笔刷设置动画，但是遇到了无法使用TargetName的问题

I am trying to animate a linear brush on a border using a data trigger but have come accross a problem where I cannot use the TargetName

我的代码如下，有人可以建议解决此问题的方法吗？

My code is as follows, can anyone suggest a way to resolve this?

<Border Grid.Row="2" BorderThickness="10" Height="100" Width="100" >
    <Border.BorderBrush>
        <LinearGradientBrush>
            <GradientStop Color="Yellow" Offset="0.0" />
            <GradientStop x:Name="gradient" Color="Orange"  Offset="0.5" />
            <GradientStop Color="Yellow" Offset="1.0" />
        </LinearGradientBrush>
    </Border.BorderBrush>
    <Border.Resources>
        <Style TargetType="Border">
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=testBrdrWin, Path=Pulse}" Value="true">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="gradient"
                                    Storyboard.TargetProperty="Offset"
                                    From="0" To="1" Duration="0:0:1"
                                    AutoReverse="True" RepeatBehavior="Forever"
                                    />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding ElementName=testBrdrWin, Path=Pulse}" Value="true">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="gradient"
                                    Storyboard.TargetProperty="Offset"
                                    To="0.5" Duration="0:0:01"
                                    AutoReverse="False"
                                    />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Resources>
</Border>

谢谢

推荐答案

1. 您不能在此处使用 Storyboard.TargetName 。您必须使用完整的 PropertyPath语法 。


2. LinearGradientBrush 必须采用样式本身。

1. You can't use Storyboard.TargetName here. You have to use a complete PropertyPath Syntax.
2. LinearGradientBrush has to be in Style itself.

在此示例代码中，我删除了所有特殊内容，因此也可以单独使用如果您 MouseOver Border 。

In this example code I have removed all special things and therefore it will work stand alone too if you MouseOver the Border. Adapt it for your needs again.

<Border BorderThickness="10" Height="100" Width="100" >
    <Border.Resources>
        <Style TargetType="Border">
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush>
                        <GradientStop Color="Yellow" Offset="0.0" />
                        <GradientStop Color="Red" Offset="0.5" />
                        <GradientStop Color="Yellow" Offset="1.0" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                Storyboard.TargetProperty="BorderBrush.(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                                From="0" To="1" Duration="0:0:1"
                                AutoReverse="True" RepeatBehavior="Forever"
                                />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Resources>
</Border>

这篇关于使用数据触发器为线性笔刷制作动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！