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>
Thanks
Storyboard.TargetName
here. You have to use a complete PropertyPath Syntax
.LinearGradientBrush
has to be in Style
itself.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>