Trouble animating RadialGradientBrush in WPF

Question

I'm trying to animate a RadialGradientBrush in my application. I get the super helpful exception:

Additional information: 'System.Windows.Style' value cannot be assigned to property 'Style' of object 'System.Windows.Controls.Border'. '[Unknown]' property does not point to a DependencyObject in path '(0).(1).[0].(2)'. Error at object 'System.Windows.Style' in markup file 'Eng.Modules.Core;component/system/grid/systemgridview.xaml' Line 252 Position 51.

I know it's something wrong with the indirect property targeting or partial path qualification in my DoubleAnimation's Storyboard.TargetProperty attribute. Any ideas?

<Border>
  <Border.Resources>
    <RadialGradientBrush x:Key="SomeBrush">
      <RadialGradientBrush.GradientStops>
        <GradientStop Color="White" Offset="0" />
        <GradientStop Color="Gold" Offset="1" />
      </RadialGradientBrush.GradientStops>
    </RadialGradientBrush>
  </Border.Resources>
  <Border.Style>
    <Style TargetType="{x:Type Border}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}}" Value="True">
          <Setter Property="Background" Value="{StaticResource SomeBrush}" />
          <DataTrigger.EnterActions>
            <BeginStoryboard x:Name="SomeStoryBoard">
              <Storyboard>
                <!-- RIGHT HERE -->
                <DoubleAnimation
                  Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"
                  From="0" To="1" Duration="0:0:1"
                  RepeatBehavior="Forever"
                  AutoReverse="True" />
              </Storyboard>
            </BeginStoryboard>
          </DataTrigger.EnterActions>
          <DataTrigger.ExitActions>
            <RemoveStoryboard BeginStoryboardName="SomeStoryBoard" />
          </DataTrigger.ExitActions>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Border.Style>
</Border>

Answer 1

The first problem is that you are setting the background to a gradient brush in your DataTrigger. Because this gets applied later, the animation won't be able to find the brush (hence the cryptic error about not finding a dependency property). So the first thing I did was set the border's background to the brush manually, rather than in the trigger.

The second problem was how you were setting up the target property. You don't need to use the parenthesis syntax- it works just fine as follows: Background.GradientStops[0].Offset.

With these changes the border animates perfectly; here is the final mark-up:

<Border>
    <Border.Background>
        <RadialGradientBrush>
            <RadialGradientBrush.GradientStops>
                <GradientStop Color="White" Offset="0" />
                <GradientStop Color="Gold" Offset="1" />
            </RadialGradientBrush.GradientStops>
        </RadialGradientBrush>
    </Border.Background>
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}}" Value="True">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard x:Name="SomeStoryBoard">
                            <Storyboard>
                                <!-- RIGHT HERE -->
                                <DoubleAnimation 
                                      Storyboard.TargetProperty="Background.GradientStops[0].Offset"
                                      From="0" To="1" Duration="0:0:1"
                                      RepeatBehavior="Forever"
                                      AutoReverse="True" />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <RemoveStoryboard BeginStoryboardName="SomeStoryBoard" />
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
</Border>

Answer 2

I actually developed a solution to the problem just as Charlie posted his. It looks like we came up with close to the same thing. Just posting mine for reference:

<Button>
  <Button.Style>
    <Style TargetType="{x:Type Button}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate>
            <ControlTemplate.Resources>
              <RadialGradientBrush x:Key="GoldRadialGradientBrush">
                <RadialGradientBrush.GradientStops>
                  <GradientStop Color="White" Offset="0" />
                  <GradientStop Color="Gold" Offset="1" />
                </RadialGradientBrush.GradientStops>
              </RadialGradientBrush>
              <Storyboard x:Key="SomeStoryBoard">
                <DoubleAnimation
                  Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].Offset"
                  From="0" To="1" Duration="0:0:1"
                  RepeatBehavior="Forever"
                  AutoReverse="True" />
              </Storyboard>
            </ControlTemplate.Resources>
            <Grid>
              <Border Background="{StaticResource GoldRadialGradientBrush}">
                <Border.Style>
                  <Style TargetType="{x:Type Border}">
                    <Style.Triggers>
                      <DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}}" Value="True">
                        <DataTrigger.EnterActions>
                          <BeginStoryboard x:Name="BorderStoryBoard" Storyboard="{StaticResource SomeStoryBoard}" />
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                          <RemoveStoryboard BeginStoryboardName="BorderStoryBoard" />
                        </DataTrigger.ExitActions>
                      </DataTrigger>
                    </Style.Triggers>
                  </Style>
                </Border.Style>
              </Border>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Button.Style>
</Button>