如何在WPF的XAML样式中通过参数或绑定修改按钮的FontAwesome图标

解决方案 #

原生Button控件没有自带Icon、IconColor属性，你需要通过附加属性扩展Button的可配置项，就能实现你要的样式复用+自定义传参效果，步骤如下：

1. 先创建附加属性类

新建一个ButtonExtensions.cs类，写入以下代码，为Button扩展两个可绑定的附加属性：

using System.Windows;
using System.Windows.Media;
using FontAwesome.WPF; // 对应你用的FontAwesome库命名空间

public static class ButtonExtensions
{
    // 扩展Icon属性
    public static readonly DependencyProperty IconProperty = DependencyProperty.RegisterAttached(
        "Icon", typeof(FontAwesomeIcon), typeof(ButtonExtensions), new PropertyMetadata(FontAwesomeIcon.AddressBook));

    public static void SetIcon(DependencyObject element, FontAwesomeIcon value) => element.SetValue(IconProperty, value);
    public static FontAwesomeIcon GetIcon(DependencyObject element) => (FontAwesomeIcon)element.GetValue(IconProperty);

    // 扩展IconColor属性
    public static readonly DependencyProperty IconColorProperty = DependencyProperty.RegisterAttached(
        "IconColor", typeof(Brush), typeof(ButtonExtensions), new PropertyMetadata(Brushes.Black));

    public static void SetIconColor(DependencyObject element, Brush value) => element.SetValue(IconColorProperty, value);
    public static Brush GetIconColor(DependencyObject element) => (Brush)element.GetValue(IconColorProperty);
}

2. 修改样式中的绑定

把你的样式里fa:ImageAwesome的固定赋值改为绑定附加属性，注意要加附加属性的命名空间前缀（假设你本地代码的命名空间前缀是local，在XAML头部声明xmlns:local="clr-namespace:你的项目命名空间"）：

<!-- 主菜单样式修改 -->
<fa:ImageAwesome 
    Icon="{TemplateBinding local:ButtonExtensions.Icon}" 
    Foreground="{TemplateBinding local:ButtonExtensions.IconColor}"
    Height="30" Width="30" 
    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0,0,0"/>

<!-- 子菜单样式同样修改对应绑定 -->
<fa:ImageAwesome 
    Icon="{TemplateBinding local:ButtonExtensions.Icon}" 
    Foreground="{TemplateBinding local:ButtonExtensions.IconColor}"
    Height="20" Width="20" 
    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"/>

3. 直接在Button上自定义参数

之后使用按钮时就能直接赋值自定义图标和颜色，完全符合你期望的写法：

<Button DockPanel.Dock="Top" x:Name="MenuHome" 
        Style="{StaticResource MenuItem}"
        local:ButtonExtensions.Icon="Home"
        local:ButtonExtensions.IconColor="Green">
    Home
</Button>
<Button DockPanel.Dock="Top" x:Name="MenuProject" 
        Style="{StaticResource MenuItem}"
        local:ButtonExtensions.Icon="Folder"
        local:ButtonExtensions.IconColor="Blue">
    Project
</Button>

你之前的{Binding Path=Icon}写法不生效是因为默认绑定的是按钮DataContext上下文中的Icon属性，没有对应数据源自然无法生效，用附加属性不需要依赖数据源，直接在XAML层面就能赋值，更适合纯样式扩展的场景。

内容的提问来源于stack exchange，提问作者Joris Beuls