使用 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.TargetName 属性一种风格。

Answer 1

您可以使用它来为 LinearGradientBrush 的第一个（索引 = 0）GradientStop 制作动画，如果这是您想要的：

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

使用 LinearGradientBrush 的 ColorAnimation

ColorAnimation with LinearGradientBrush

c#

wpf

xaml

wpf-animation