WPF中矢量图像按钮的动画填充颜色答案

【问题标题】：Animating fill color of a vector image button in WPFWPF中矢量图像按钮的动画填充颜色
【发布时间】：2013-01-23 11:03:17
【问题描述】：

我正在使用以下 XAML 创建矢量图像按钮，并使用动画来更改鼠标悬停时的不透明度。这是按钮样式：-

<Style x:Key="IconButtonStyle" TargetType="Button">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="Focusable" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>                                       
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentPresenter">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1.0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ContentPresenter">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <ContentPresenter x:Name="ContentPresenter" 
                                      ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Margin="{TemplateBinding Padding}" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

下面是它的使用示例：-

<Button Width="40" Height="40" Style="{StaticResource IconButtonStyle}">
    <Path Width="30" Height="30" Style="{StaticResource MetroButtonRightStyle}" Fill="Red" />
</Button>

Path 的样式如下：-

<Style x:Key="MetroButtonRightStyle" TargetType="{x:Type Path}">
    <Setter Property="Stretch" Value="Fill" />
    <Setter Property="Data" Value="{StaticResource MetroButtonRightGeometry}" />
</Style>

（Data 属性中指定的资源MetroButtonRightGeometry 是<Geometry>，由于大小，我没有在此处包含）。

我想更改情节提要以更改图像的颜色而不是其不透明度，但我似乎无法从情节提要中访问Path 的Fill 属性，或者是否可以在它现在的形式。有什么建议吗？

更新

我找到了一个解决方案，将可视状态故事板更改为 ColorAnimationUsingKeyFrames，如下所示（注意 TargetProperty！）：-

<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Button.Content).(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ContentPresenter">
    <EasingColorKeyFrame KeyTime="0" Value="Gold" />
</ColorAnimationUsingKeyFrames>

和在我的路径上包括一个Fill，如下所示：-

<Path Width="30" Height="30" Style="{StaticResource MetroButtonRightStyle}" Fill="{StaticResource SomeSolidBrush}" />

但是，必须包含 Fill 感觉有点 hacky，它基本上被忽略了，只是为了为故事板 TargetProperty 提供一个“钩子”。如果没有它，我会收到错误消息“'Fill' 属性未指向路径 '{0}.{1}.{2}' 中的 DependencyObject”。

【问题讨论】：

此外，当您使用Fill="{StaticResource SomeSolidBrush}" 时，该资源由使用它的所有路径共享。为该对象设置动画将为所有这些按钮的路径颜色设置动画。
@Clemens - 有趣，我不知道这样的事情是可能的。感谢您的提醒。

标签： wpf

【解决方案1】：

我想出了这个解决方案，它使用触发器而不是情节提要。在控件模板中包含Path 也会使按钮标记更清晰。我使用 Button 的 Content 属性来指定图标，即应用于 Path 的几何图形。

这似乎可行，但作为一个相对的 WPF 新手，我会欢迎 cmets 使用我的解决方案。

风格：-

<Style x:Key="IconButtonStyle" TargetType="Button">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="Focusable" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Background="Transparent" Padding="{TemplateBinding Padding}">
                    <Path x:Name="buttonPath" Fill="Blue" Style="{TemplateBinding Content}" />
                </Border>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="buttonPath" Property="Fill" Value="Red"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

示例用法：-

<Button Width="40" Height="40" Style="{StaticResource IconButtonStyle}" Content="{StaticResource MetroButtonRightStyle}" />

【讨论】：