Avalonia怎么给按钮添加图标和文字 Avalonia Button Content

来源:这里教程网 时间:2026-02-21 17:35:46 作者:

在Avalonia中给按钮同时添加图标和文字,最常用且推荐的方式是组合使用

StackPanel
(或
Grid
)嵌套图标控件与文本控件。不依赖自定义控件也能快速实现,但若项目中频繁使用,建议封装为
IconButton
提升复用性。

直接在Button内嵌套布局(适合单次/少量使用)

以 Material.Icons.Avalonia 为例,先确保已安装包并配置好样式:

dotnet add package Material.Icons.Avalonia
App.axaml
<application.styles></application.styles>
中添加:
<materialiconstyles></materialiconstyles>
在目标页面 XAML 顶部声明命名空间:
xmlns:materialIcons="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"

然后这样写按钮:

<Button>
  <StackPanel Orientation="Horizontal" Spacing="6" HorizontalAlignment="Center" VerticalAlignment="Center">
    <materialIcons:MaterialIcon Kind="Chat" Width="20" Height="20" VerticalAlignment="Center"/>
    <TextBlock Text="开始聊天" VerticalAlignment="Center" FontSize="14"/>
  </StackPanel>
</Button>

注意:

Width
/
Height
控制图标尺寸,
Spacing
控制图标与文字间距,
VerticalAlignment="Center"
确保图文垂直居中对齐。

用 FontAwesome 实现更灵活的图标绑定(支持动画/颜色/大小)

安装:

dotnet add package Projektanker.Icons.Avalonia.FontAwesome

注册图标提供器(在
Program.cs
BuildAvaloniaApp()
中):

IconProvider.Current.Register<FontAwesomeIconProvider>();

XAML 中使用(无需额外命名空间声明,只需启用附加属性):

<Button xmlns:i="https://github.com/projektanker/icons.avalonia"
        i:Attached.Icon="fa-solid fa-comment"
        Content="发送消息" />

这种方式更简洁,图标自动居左、尺寸适配按钮高度,还支持:

设置图标颜色:
i:Attached.IconForeground="Blue"
自定义大小:
FontSize="16"
(影响图标和文字整体缩放)
添加旋转动画:
i:Attached.IconAnimation="Spin"

封装 IconButton 控件(适合中大型项目)

避免重复写

StackPanel
嵌套,可创建一个带
IconKind
Content
属性的模板化控件:

新建
Controls/IconButton.axaml
(Templated Control 类型)
在后台类中定义两个依赖属性:
IconKind
(string)和
Content
(object)
模板中用
Grid
StackPanel
排布:
<materialicon kind="{Binding $parent[IconButton].IconKind}"></materialicon>
+
<contentpresenter></contentpresenter>
使用时只需:
<iconbutton iconkind="Send" content="发送"></iconbutton>

这样既保持语义清晰,又统一了图标位置、间距、对齐逻辑,后续还能轻松加悬停效果或禁用态样式。

菜单项(MenuItem)中添加图标的小技巧

MenuItem 的

Icon
属性接受任意控件,所以可以直接塞入图标:

<MenuItem Header="保存" i:MenuItem.Icon="fa-solid fa-floppy-disk" />

或手动嵌套(兼容所有图标库):

<MenuItem Header="关于">
  <MenuItem.Icon>
    <materialIcons:MaterialIcon Kind="Info" Width="16" Height="16"/>
  </MenuItem.Icon>
</MenuItem>

注意:MenuItem 默认图标区域较窄,建议控制图标宽高 ≤ 16px,避免挤压文字。

相关推荐