C# WPF 按钮加载字体图标 / 动物头像

C# WPF:系统字体图标(Segoe MDL2 / Segoe Fluent)+ 动物头像方案

核心:系统字体图标本质是特殊字体里的字符(Glyph),不是图片,优点:矢量、缩放不失真、改颜色只改Foreground,无图片资源;Windows自带,无需额外文件。
⚠️ Windows自带Segoe字体没有动物头像glyph,动物头像两种方案:① 用免费图标字体(如Font Awesome);② PNG图片。

一、Segoe MDL2 Assets(Win10 自带)

XAML 直接写按钮(最常用)

<Button Width="160" Height="44">
    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
        <!-- 字体图标 -->
        <TextBlock FontFamily="Segoe MDL2 Assets"
                   FontSize="22"
                   Foreground="#222222"
                   Text="&#xE78B;"/>
        <TextBlock Text=" 文件夹" Margin="8,0,0,0"/>
    </StackPanel>
</Button>

常用 Glyph 编码:

字符码含义
&#xE78B;文件夹
&#xE700;主页
&#xE71D;警告
&#xE72E;信息
&#xE713;搜索
&#xE74C;设置

编码格式:&#xXXXX;,XXXX是十六进制Unicode码。

二、Segoe Fluent Icons(Win11 自带,新版)

Win11推荐用这个,图标更现代:

<TextBlock FontFamily="Segoe Fluent Icons" FontSize="22" Text="&#xF14F;"/>

注意:Segoe Fluent 在Win10上不存在,会 fallback 到默认字体,图标乱码。
兼容建议:需要同时支持Win10+Win11优先使用 Segoe MDL2 Assets

三、后台C#动态赋值字体图标

// 给TextBlock设置字体图标
textBlockIcon.FontFamily = new FontFamily("Segoe MDL2 Assets");
textBlockIcon.Text = "\uE78B";  // 注意C#字符串写法:\u + 4位十六进制,不要&#x
textBlockIcon.FontSize = 22;

✅ C#代码内:"\uE78B"
✅ XAML内:&#xE78B;

四、封装一个【字体图标按钮】可复用模板

放到Window.Resources,一键复用:

<Window.Resources>
    <Style x:Key="GlyphButtonStyle" TargetType="Button">
        <Setter Property="Width" Value="160"/>
        <Setter Property="Height" Value="44"/>
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <TextBlock x:Name="GlyphIcon"
                                   FontFamily="Segoe MDL2 Assets"
                                   FontSize="22"
                                   Foreground="#333"/>
                        <TextBlock x:Name="LabelText" Margin="8,0,0,0" VerticalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<!-- 使用 -->
<Button Style="{StaticResource GlyphButtonStyle}" x:Name="btnTest"/>

后台设置图标和文字:

// 查找模板内控件
private void SetButtonGlyph(Button btn, string glyph, string text)
{
    var templateRoot = btn.Template.FindName("GlyphIcon", btn) as TextBlock;
    var label = btn.Template.FindName("LabelText", btn) as TextBlock;
    if(templateRoot != null) templateRoot.Text = glyph;
    if(label != null) label.Text = text;
}

//调用
SetButtonGlyph(btnTest, "\uE78B", "我的文件夹");

五、动物头像(字体图标方案:Font Awesome)

Windows系统自带Segoe字体没有动物,所以要引入第三方图标字体 Font Awesome(免费版有猫狗、鸟类等动物glyph)。

步骤

  1. 下载 Font Awesome 免费字体 fontawesome-free-6.x-web.zip
  2. fa-solid-900.ttf 放到项目,生成操作=资源
  3. XAML引用字体,按钮使用动物图标:
<Button Width="160" Height="44">
    <StackPanel Orientation="Horizontal">
        <TextBlock FontFamily="pack://application:,,,/Resources/#Font Awesome 6 Free Solid"
                   FontSize="22"
                   Text="&#xf6e8;"/> <!-- cat 猫 -->
        <TextBlock Text="小猫" Margin="8,0,0,0"/>
    </StackPanel>
</Button>

常用动物 solid glyph:
&#xf6e8;,狗 &#xf6d3;,鸟 &#xf520;,鱼 &#xf578;

备选:不想引入字体 → 动物头像用PNG图片

<Button Width="160" Height="44">
    <StackPanel Orientation="Horizontal">
        <Image Width="24" Height="24" Source="pack://application:,,,/Resources/cat.png"/>
        <TextBlock Text="小猫" Margin="8,0,0,0"/>
    </StackPanel>
</Button>

六、常见踩坑

  1. 乱码方框 □:字体不存在。Segoe Fluent 只能Win11;Win10只能Segoe MDL2 Assets。
  2. 字体图标是矢量,只改Foreground改颜色,不能像图片那样单独调色。
  3. 字体图标不支持渐变蒙版(可以用VisualBrush做复杂效果,复杂则改用图片)。
  4. 发布程序:Segoe MDL2/FLuent是Windows系统自带,不用打包;Font Awesome字体必须打包进程序。

七、小工具推荐

Segoe MDL2图标查询网站:https://learn.microsoft.com/zh-cn/windows/apps/design/style/segoe-ui-symbol-font
可以直接复制glyph编码。

如果你想要,我可以直接给你一个WPF窗口,带预览面板,下拉切换Segoe MDL2所有图标

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值