样式中的故事板使用动态可变颜色的颜色动画

时间:2013-12-25 03:34:53

标签: wpf xaml

我正在使用<Style />中定义的<ResourceDictionary />更改按钮的样式。目标是让整个资源字典中使用的所有颜色都来自我已经工作的Settings文件。但是现在我对Button造型的处理感到茫然,因为它有一个故事板颜色动画。这两种颜色目前正在前后褪色以便在定义时自然地工作。但是试图将它们从我的设置文件中删除并将它们用作我的故事板的颜色迄今为止一直没有用。

&LT;编辑:已使用的设置已手动设置为System.Windows.Media.Color。不是默认的System.Drawing.Color。 修改&gt;

以下是我使用的XAML代码:

<ObjectDataProvider x:Key="Settings" ObjectType="{x:Type local:Settings}"/>

<SolidColorBrush x:Key="ButtonMain" Color="{Binding Source={StaticResource Settings}, Path=Default.ButtonMain}"/>
<SolidColorBrush x:Key="ButtonFade" Color="{Binding Source={StaticResource Settings}, Path=Default.ButtonFade}"/>

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="{StaticResource ButtonMain}" />
    <Setter Property="Foreground" Value="{StaticResource BrushTextForeground}" />
    <Setter Property="SnapsToDevicePixels" Value="True" />

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="outer" BorderBrush="{StaticResource ButtonFade}" BorderThickness="1" Background="{TemplateBinding Background}" Cursor="Hand" ClipToBounds="True">
                    <Border x:Name="inner" Margin="-2" BorderThickness="1" BorderBrush="Black">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" BlurRadius="0" />
                        </Border.Effect>
                        <Grid>
                            <ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
                        </Grid>
                    </Border>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="inner" Property="Effect">
                            <Setter.Value>
                                <DropShadowEffect ShadowDepth="0" BlurRadius="10" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <BeginStoryboard Name="ButtonBlink">
                <Storyboard>
                    <ColorAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Background.Color"
                            Duration="0:0:1"
                            RepeatBehavior="Forever"
                            AutoReverse="True">
                        <ColorAnimationUsingKeyFrames.KeyFrames>
                            <LinearColorKeyFrame Value="<!--This would be ButtonMain-->" KeyTime="0:0:0" />
                            <LinearColorKeyFrame Value="<!--This would be ButtonFade-->" KeyTime="0:0:1" />
                        </ColorAnimationUsingKeyFrames.KeyFrames>
                    </ColorAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseLeave">
            <StopStoryboard BeginStoryboardName="ButtonBlink" />
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseDown">
            <StopStoryboard BeginStoryboardName="ButtonBlink"/>
        </EventTrigger>
    </Style.Triggers>
</Style>

1 个答案:

答案 0 :(得分:0)

通过StaticResource标记扩展程序绑定:

<ColorAnimationUsingKeyFrames.KeyFrames>
    <LinearColorKeyFrame Value="{Binding Color,
                                         Source={StaticResource ButtonMain}}"
                         KeyTime="0:0:0" />
     <LinearColorKeyFrame Value="{Binding Color,
                                          Source={StaticResource ButtonFade}}" 
                          KeyTime="0:0:1" />
</ColorAnimationUsingKeyFrames.KeyFrames>

<强>更新

以上发布的代码适用于您定义样式内联但如果在资源部分下声明样式将无法工作,因为故事板中的绑定不允许它冻结且无法重复使用。

但是,StaticResource是允许的。因此,作为解决方法而不是动画Color,您需要为Brush设置动画,以便可以在Storyboard中使用静态画笔。

<Storyboard Storyboard.TargetProperty="Background">
   <ObjectAnimationUsingKeyFrames RepeatBehavior="Forever"
                                  AutoReverse="True">
       <DiscreteObjectKeyFrame KeyTime="0:0:0"
                               Value="{StaticResource ButtonMain}"/>
   </ObjectAnimationUsingKeyFrames>
   <ObjectAnimationUsingKeyFrames BeginTime="0:0:1"
                                  RepeatBehavior="Forever"
                                  AutoReverse="True">
       <DiscreteObjectKeyFrame KeyTime="0:0:0"
                               Value="{StaticResource ButtonFade}"/>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>