为放置在 WPF 按钮上的矢量图标使用按钮前景色答案

【问题标题】：Use button foreground color for vector icons placed on WPF buttons为放置在 WPF 按钮上的矢量图标使用按钮前景色
【发布时间】：2016-04-11 08:50:24
【问题描述】：

我正在为我的 WPF 应用程序中的按钮使用自定义样式，它会在鼠标悬停时更改前景色。此行为适用于仅包含文本的按钮，但我不知道如何在包含矢量图标的按钮上实现此行为。

我在应用范围的资源字典 (Glyphs.xaml) 中定义了所有应用矢量图标，例如：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Key="IconResume" x:Shared="False" Width="28" Height="28">
        <Path Fill="#444" Data="M14.811 0.308l12.876 12.876q0.345 0.345 0.345 0.816t-0.345 0.816l-12.876 12.876q-0.345 0.345-0.58 0.236t-0.236-0.58v-26.694q0-0.471 0.236-0.58t0.58 0.236zM4.71 26.767v-25.534q0-0.471 0.345-0.816t0.816-0.345h4.643q0.471 0 0.816 0.345t0.345 0.816v25.534q0 0.471-0.345 0.816t-0.816 0.345h-4.643q-0.471 0-0.816-0.345t-0.345-0.816z" />
    </Canvas>
</ResourceDictionary>

然后按钮为：

<Button Command="{Binding ResumeCommand}" Style="{StaticResource BorderlessButton}">
    <StackPanel Orientation="Horizontal">
        <Viewbox Child="{StaticResource IconResume}" Height="10" Margn="0,0,8,0" />
        <TextBlock Text="Resume" />
    </StackPanel>
</Button>

因此，当鼠标位于按钮上时，文本将颜色更改为在我的IsMouseOver 触发器BorderlessButton 样式中定义的前景色。但是矢量图标仍然是颜色#444（定义在Path.Fill）。有没有一种简单的方法可以将矢量图标（所有画布路径）的颜色绑定到按钮的前景色？

【问题讨论】：

请显示BorderlessButton的XAML

标签： c# wpf xaml canvas

【解决方案1】：

可以直接将Path.Fill绑定到父ButtonForeground

<Canvas x:Key="IconResume" x:Shared="False" Width="28" Height="28">
    <Path Fill="{Binding Foreground, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}" Data="M14.811 0.308l12.876 12.876q0.345 0.345 0.345 0.816t-0.345 0.816l-12.876 12.876q-0.345 0.345-0.58 0.236t-0.236-0.58v-26.694q0-0.471 0.236-0.58t0.58 0.236zM4.71 26.767v-25.534q0-0.471 0.345-0.816t0.816-0.345h4.643q0.471 0 0.816 0.345t0.345 0.816v25.534q0 0.471-0.345 0.816t-0.816 0.345h-4.643q-0.471 0-0.816-0.345t-0.345-0.816z" />
</Canvas>

或者您也可以为 Path 设置触发器以根据您的要求设置 Fill：

 <Canvas x:Key="IconResume" x:Shared="False" Width="28" Height="28">
        <Path x:Name="myPath" Data="M14.811 0.308l12.876 12.876q0.345 0.345 0.345 0.816t-0.345 0.816l-12.876 12.876q-0.345 0.345-0.58 0.236t-0.236-0.58v-26.694q0-0.471 0.236-0.58t0.58 0.236zM4.71 26.767v-25.534q0-0.471 0.345-0.816t0.816-0.345h4.643q0.471 0 0.816 0.345t0.345 0.816v25.534q0 0.471-0.345 0.816t-0.816 0.345h-4.643q-0.471 0-0.816-0.345t-0.345-0.816z">
            <Path.Style>
                <Style TargetType="Path">
                    <Setter Property="Fill" Value="#444"></Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" Value="True">
                            <Setter Property="Fill" Value="Blue"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
    </Canvas>

【讨论】：