使用数据触发器为线性画笔设置动画

时间:2012-08-07 09:19:33

标签: wpf animation storyboard datatrigger lineargradientbrush

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

我的代码如下,任何人都可以提出解决此问题的方法吗?

<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 个答案:

答案 0 :(得分:6)

  1. 您无法在此处使用Storyboard.TargetName。您必须使用完整的PropertyPath Syntax
  2. LinearGradientBrush必须在Style本身。
  3. 在此示例代码中,我删除了所有特殊内容,因此如果您MouseOver Border,它也可以独立运行。再次适应您的需求。

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