0

我正在使用以下 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>

（MetroButtonRightGeometry在 Data 属性中指定的资源是一个<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”。

4

1 回答 1

0

我想出了这个解决方案，它使用触发器而不是故事板。在Path控件模板中使用 也会导致更清晰的按钮标记。我使用 Button 的Content属性来指定图标，即应用于Path.

它似乎有效，但作为一个相对的 WPF 新手，欢迎对我的解决方案发表评论。

样式：-

<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}" />
于 2013-01-23T13:30:52.863 回答