使用LinearGradientBrush的ColorAnimation

Question

我正在尝试制作一个动画自定义控件，根据布尔值属性显示两种不同的样式。

我已经能够来回移动元素以及将颜色更改为普通颜色，但我希望能够使用LinearGradient而不是普通颜色，这就是它变得棘手的地方。

我知道我可以在后台代码中以一种“不那么棘手”的方式做到这一点，但我真的希望在后台拆分代码并在.cs和.xaml文件之间显示，所以我希望有一个完整的XAML解决方案。

下面是我的控件的代码：

        <Canvas
            Width="100"
            Height="40"
            Background="Red">

            <Ellipse Width="20" Height="20" >
                <Ellipse.RenderTransform>
                    <TranslateTransform X="0" Y="0"/>
                </Ellipse.RenderTransform>
                <Ellipse.Stroke>
                    <SolidColorBrush Color="White"/>
                </Ellipse.Stroke>
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
                        <GradientStop Color="#FFFFFF" Offset="0" />
                        <GradientStop Color="#BBBBBB" Offset="0.567"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.Style>
                    <Style TargetType="Ellipse">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding Test}" Value="True">
                                <DataTrigger.EnterActions>
                                    <BeginStoryboard >
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" To="Black" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" />
                                            <DoubleAnimation Duration="0:0:0.5" To="100" Storyboard.TargetProperty="(Ellipse.RenderTransform).(TranslateTransform.X)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.EnterActions>
                                <DataTrigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.5" To="White" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)"></ColorAnimation>
                                            <DoubleAnimation Duration="0:0:0.5" To="0" Storyboard.TargetProperty="(TextBox.RenderTransform).(TranslateTransform.X)"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </DataTrigger.ExitActions>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Ellipse.Style>
            </Ellipse>
        </Canvas>

例如，当我的storyBoard开始或结束时，我希望能够切换渐变的两种颜色，但我看不到区分它们的方法，因为我不能在样式中使用Storyboard.TargetName属性。

Answer 1

如果需要的话，您可以使用它来为索引的第一个( GradientStop = 0) LinearGradientBrush设置动画：

<ColorAnimation Duration="0:0:2" To="Black"
    Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].Color" />