在颜色和动画之间改变背景

本文关键字：改变 背景 之间 动画 颜色 | 更新日期: 2023-09-27 17:51:11

我有一个自定义控件，看起来像这样:

<Style TargetType="local:AnswerButton">
<Setter Property="Background" Value="{StaticResource BlueGradient}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:AnswerButton">
<Grid>
<vsm:VisualStateManager.VisualStateGroups>
   <vsm:VisualStateGroup x:Name="CommonStates">
      <vsm:VisualState x:Name="Normal">
        <Storyboard>
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background)" Storyboard.TargetName="myBorder">
             <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BlueGradient}" />
           </ObjectAnimationUsingKeyFrames>
        </Storyboard>
      </vsm:VisualState>
      <vsm:VisualState x:Name="RightAnswer">
         <Storyboard RepeatBehavior="Forever" BeginTime="00:00:00" AutoReverse="True">
            <ColorAnimation Duration="0:0:0.6" From="Orange" To="Green" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder"/>
         </Storyboard>
      </vsm:VisualState>
    </vsm:VisualStateGroup>
  </vsm:VisualStateManager.VisualStateGroups>
  <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="10">
    <Border Name="myBorder" Background="{TemplateBinding Background}" CornerRadius="9" Opacity="1">
       <Grid>
         <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition Width="*" />
         </Grid.ColumnDefinitions>
         <TextBlock Grid.Column="0"
                    TextAlignment="Center" VerticalAlignment="Center" 
                    Text="{TemplateBinding Option}" Foreground="Yellow" />
         <TextBlock Grid.Column="1"
                    TextAlignment="Left" VerticalAlignment="Center" 
                    Text="{TemplateBinding Text}" Foreground="White" />
        </Grid>
      </Border>
    </Border>
  </Grid>
  </ControlTemplate>
  </Setter.Value>
  </Setter>
  </Style>

我只想改变按钮的状态。首先(默认)哪个按钮有BlueGradient刷，其次哪里有动画(比如在RightAnswer状态)。这段代码部分有效。当我将RightAnswer状态设置为button时，我将其更改为Normal，然后当我尝试将其设置为RightAnswer时，我得到这个错误:

无法解析TargetProperty(Border.Background).(SolidColorBrush.Color)在指定对象上。

我认为问题是在一个状态下我得到Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"，在第二个状态下我得到Storyboard.TargetProperty="(Border.Background)"。我试过改变，但没有用。那么我该如何解决这个问题呢?

编辑:

BlueGradient 

<LinearGradientBrush x:Key="BlueGradient"  
    StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="#12449d" Offset="0" />
        <GradientStop Color="#0a2554" Offset="1" />
    </LinearGradientBrush>

在颜色和动画之间改变背景

你有一个LinearGradientBrush作为Background属性的刷，但是你试图访问(SolidColorBrush.Color)在它上面(基本上它在将LGB转换为SCB时失败)。

在这种情况下，您不能使用画笔的资源，因为画笔的类型决定了您需要运行的Storyboard。你必须再低一级，使用Color作为你的资源。

(目前我没有使用我的开发机器，所以语法可能有点偏离)

首先，在资源

中
<Color x:Key="ColorBlueFirstStop">#12449d</Color>
<Color x:Key="ColorBlueSecondStop">#0a2554</Color>

然后，在模板

<Border Name="myBorder" CornerRadius="9" Opacity="1">
    <Border.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="{StaticResource ColorBlueFirstStop}" Offset="0" />
            <GradientStop Color="{StaticResource ColorBlueSecondStop}" Offset="1" />
        </LinearGradientBrush>
   ......
</Border>
最后在storyboard 
<Storyboard RepeatBehavior="Forever" BeginTime="00:00:00" AutoReverse="True">
    <ColorAnimation Duration="0:0:0.6" 
                    From="Orange" 
                    To="Green" 
                    Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="myBorder"/>
    <ColorAnimation Duration="0:0:0.6" 
                    From="Orange"  
                    To="Green" 
                    Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="myBorder"/>
</Storyboard>
相关文章：