WPF上的ColorAnimation梯度

Question

   <LinearGradientBrush x:Key="BrushPrincipalBorderBlue" EndPoint="1.3,1" StartPoint="-0.2,0">
        <GradientStop Color="#FF030637" Offset="1"/>
        <GradientStop Color="#FF0E0F31" Offset="0.166"/>
        <GradientStop Color="#FF2E2F70" Offset="0.629"/>
        <GradientStop Color="#FF030637" Offset="0.63"/>
    </LinearGradientBrush>

    <Storyboard x:Key="GoToBlue">
        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.GradientStops[3].Color" Duration="0:0:0.5"  
       To="{DynamicResource BrushPrincipalBorderBlue.GradientStops[3].Color}" />
    </Storyboard>

如何在' to‘属性中设置画笔的GradientStop颜色？因为我叫它的方式是行不通的。

Answer 1

BrushPrincipalBorderBlue名称只是一个键，它不是一个实际的LinearGradientBrush，因此它没有任何属性。我可以通过给画笔添加一个名字来消除这个错误。看看这对你是不是有用。

<Window.Resources>
    <LinearGradientBrush  x:Name="myBrush" x:Key="BrushPrincipalBorderBlue" EndPoint="1.3,1" StartPoint="-0.2,0"> 
    <GradientStop Color="#FF030637" Offset="1"/> 
    <GradientStop Color="#FF0E0F31" Offset="0.166"/> 
    <GradientStop Color="#FF2E2F70" Offset="0.629"/> 
    <GradientStop Color="#FF030637" Offset="0.63"/> 
</LinearGradientBrush> 

<Storyboard x:Key="GoToBlue">
        <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Background.GradientStops[3].Color" Duration="0:0:0.5" To="{DynamicResource myBrush.GradientStops[3].Color}"  />
</Storyboard> 

我能够访问颜色的唯一方法是分别定义它们，即

<Window.Resources>
    <Color x:Key="BrushPrincipalBorderBlue.Color1">
        <Color.A>#FF</Color.A>
        <Color.B>#03</Color.B>
        <Color.R>#06</Color.R>
        <Color.G>#37</Color.G>
    </Color>
    <Color x:Key="BrushPrincipalBorderBlue.Color2">
        <Color.A>#FF</Color.A>
        <Color.B>#0E</Color.B>
        <Color.R>#0F</Color.R>
        <Color.G>#31</Color.G>
    </Color>
    <Color x:Key="BrushPrincipalBorderBlue.Color3">
        <Color.A>#FF</Color.A>
        <Color.B>#2E</Color.B>
        <Color.R>#2F</Color.R>
        <Color.G>#70</Color.G>
    </Color>
    <Color x:Key="BrushPrincipalBorderBlue.Color4">
        <Color.A>#FF</Color.A>
        <Color.B>#03</Color.B>
        <Color.R>#06</Color.R>
        <Color.G>#37</Color.G>
    </Color>
    <LinearGradientBrush  x:Key="BrushPrincipalBorderBlue" EndPoint="1.3,1" StartPoint="-0.2,0">
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color1}" Offset="1"/>
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color2}" Offset="0.166"/>
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color3}" Offset="0.629"/>
        <GradientStop Color="{DynamicResource BrushPrincipalBorderBlue.Color4}" Offset="0.63"/>
    </LinearGradientBrush>
    <LinearGradientBrush  x:Key="BrushPrincipalBorderOriginal" EndPoint="1.3,1" StartPoint="-0.2,0">
        <GradientStop Color="#FFFFFFFF" Offset="1"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.166"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.629"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.63"/>
    </LinearGradientBrush>
</Window.Resources>
<Grid Name="myGrid" Background="{DynamicResource BrushPrincipalBorderOriginal}" >
    <Grid.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation Storyboard.TargetName="myGrid" Storyboard.TargetProperty="Background.GradientStops[3].Color" Duration="0:0:2"  To="{DynamicResource BrushPrincipalBorderBlue.Color3}"  AutoReverse="True" RepeatBehavior="Forever"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>
</Grid>

​

Answer 2

不知道你想要做什么，但是偏移量是一个双精度数，因此你需要像这样使用DoubleAnimation：

        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Canvas.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetName="BlackCanvasGradient"
                            Storyboard.TargetProperty="Offset"
                            From="0" To="0.8" Duration="0:0:2" >
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>