如何在C#/UWP中为常规Button控件添加AppBarButton图标

嘿，这个需求我太熟悉了！在UWP开发里，普通的Button控件确实没有像AppBarButton那样内置的Icon属性，但咱们有好几种简单的办法实现你想要的效果，我给你整理几个实用方案：

方案1：直接用SymbolIcon作为Button的Content #

这是最直接的方法，因为AppBarButton的图标本质上就是用SymbolIcon（基于系统Segoe MDL2 Assets字体）实现的。你只需要把SymbolIcon放到普通Button的Content属性里就行，完美匹配系统图标风格：

<Grid Grid.Row="1" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="auto"/>
    </Grid.ColumnDefinitions>
    <TextBox Grid.Column="0" Header="MyTextBox"/>
    <Button Background="{x:Null}" VerticalAlignment="Bottom" Grid.Column="1">
        <SymbolIcon Symbol="Find"/>
    </Button>
</Grid>

这个方案的好处是零额外代码，直接用UWP内置控件，和系统图标风格完全统一。

方案2：用FontIcon自定义图标（支持更多样式） #

如果你需要系统Symbol枚举之外的图标，或者想用自定义字体图标，可以用FontIcon控件。比如还是用系统的Segoe MDL2 Assets字体，直接指定图标的Glyph编码：

<Button Background="{x:Null}" VerticalAlignment="Bottom" Grid.Column="1">
    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE094;"/> <!-- 这个编码对应Find图标 -->
</Button>

Segoe MDL2 Assets里的每个图标都有对应的Glyph编码，你可以直接通过系统字体预览工具或者官方文档查到对应图标的编码值。

方案3：封装附加属性（进阶，实现类似AppBarButton的写法） #

如果你的项目里很多地方需要这种带图标的普通Button，不想重复写SymbolIcon代码，可以封装一个附加属性，让普通Button也支持类似Icon属性的写法：

首先在C#里定义附加属性：

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

public static class ButtonIconHelper
{
    public static readonly DependencyProperty IconSymbolProperty =
        DependencyProperty.RegisterAttached(
            "IconSymbol", 
            typeof(Symbol), 
            typeof(ButtonIconHelper), 
            new PropertyMetadata(Symbol.None, OnIconSymbolChanged));

    public static Symbol GetIconSymbol(DependencyObject obj)
    {
        return (Symbol)obj.GetValue(IconSymbolProperty);
    }

    public static void SetIconSymbol(DependencyObject obj, Symbol value)
    {
        obj.SetValue(IconSymbolProperty, value);
    }

    private static void OnIconSymbolChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is Button button && e.NewValue is Symbol symbol)
        {
            button.Content = new SymbolIcon { Symbol = symbol };
        }
    }
}

然后在XAML里引用这个附加属性（记得先引入项目命名空间，比如local是你的项目根命名空间），就能像你想要的那样简洁写法了：

<Button local:ButtonIconHelper.IconSymbol="Find" Background="{x:Null}" VerticalAlignment="Bottom" Grid.Column="1"/>

这个方案的好处是代码复用性强，写法和AppBarButton几乎一致，非常优雅。

额外补充：图标+文字组合 #

如果需要同时显示图标和文字，只需要把Button的Content改成一个StackPanel，把图标和文本放进去就行：

<Button Background="{x:Null}" VerticalAlignment="Bottom" Grid.Column="1">
    <StackPanel Orientation="Horizontal" Spacing="4">
        <SymbolIcon Symbol="Find"/>
        <TextBlock Text="搜索"/>
    </StackPanel>
</Button>

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