【WinForm UI控件系列】Breadcrumb 面包屑控件，支持三种样式

前言：c# winform UI控件系列（Net6+），纯GDI绘图无依赖，虽然做不到最好，争取做好更好用！

一、效果图（支持三种样式）

二、使用说明

控件名称

Breadcrumb

中文名称

面包屑控件

控件优点

Breadcrumb 是一个功能丰富的面包屑导航控件，支持多种样式、图标显示、点击事件等功能。适用于路径导航、层级展示等场景。

主要特性

多种样式：支持默认、背景色、卡片三种样式
图标支持：支持 Image 和 SVG 图标
点击事件：支持项点击事件
激活状态：支持设置当前激活项
数据绑定：支持数据集合绑定

重要参数说明

基本属性

属性名	类型	默认值	说明
`Items`	BreadcrumbItemCollection	-	面包屑项集合
`Style`	BreadcrumbStyle	Default	面包屑样式
`Separator`	string	"/"	分隔符文本
`AutoSize`	bool	true	是否自动调整大小

面包屑样式（BreadcrumbStyle）

样式值	说明
`Default`	默认样式，使用分隔符分隔
`Background`	背景色样式，每项有独立背景色
`Card`	卡片样式，串联卡片效果

BreadcrumbItem 属性

属性名	类型	默认值	说明
`Text`	string	null	项文本
`Icon`	Image	null	项图标（Image）
`IconSvg`	string	null	SVG 图标名称
`Tag`	object	null	关联数据
`IsActive`	bool	false	是否为激活状态
`Enabled`	bool	true	是否可用

外观属性

属性名	类型	默认值	说明
`ItemSpacing`	int	8	项间距
`IconSpacing`	int	4	图标与文本间距
`Font`	Font	微软雅黑	字体
`ForeColor`	Color	Black	文本颜色
`ActiveColor`	Color	Blue	激活项颜色
`SeparatorColor`	Color	Gray	分隔符颜色

重要事件

事件名	说明
`ItemClick`	点击项时触发
`PropertyChanged`	属性值改变时触发

使用示例

基本使用

csharp 复制代码

// 创建面包屑
Breadcrumb breadcrumb = new Breadcrumb();
breadcrumb.Size = new Size(400, 30);
this.Controls.Add(breadcrumb);

// 添加项
breadcrumb.Items.Add(new BreadcrumbItem { Text = "首页" });
breadcrumb.Items.Add(new BreadcrumbItem { Text = "产品中心" });
breadcrumb.Items.Add(new BreadcrumbItem { Text = "电子产品", IsActive = true });

不同样式

csharp 复制代码

// 默认样式（使用分隔符）
breadcrumb1.Style = BreadcrumbStyle.Default;
breadcrumb1.Separator = ">";

// 背景色样式
breadcrumb2.Style = BreadcrumbStyle.Background;

// 卡片样式
breadcrumb3.Style = BreadcrumbStyle.Card;

带图标的面包屑

csharp 复制代码

// 添加带图标的项
breadcrumb.Items.Add(new BreadcrumbItem
{
    Text = "首页",
    IconSvg = "home"
});

breadcrumb.Items.Add(new BreadcrumbItem
{
    Text = "用户管理",
    IconSvg = "user"
});

breadcrumb.Items.Add(new BreadcrumbItem
{
    Text = "用户详情",
    IconSvg = "profile",
    IsActive = true
});

点击事件

csharp 复制代码

// 项点击事件
breadcrumb.ItemClick += (sender, e) =>
{
    Console.WriteLine($"点击了：{e.Item.Text}");
    
    // 可以获取关联数据
    if (e.Item.Tag != null)
    {
        Console.WriteLine($"关联数据：{e.Item.Tag}");
    }
};

动态添加项

csharp 复制代码

// 动态添加面包屑项
private void AddBreadcrumbItem(string text, string iconSvg, object tag)
{
    // 取消之前的激活状态
    foreach (var item in breadcrumb.Items)
    {
        item.IsActive = false;
    }
    
    // 添加新项
    breadcrumb.Items.Add(new BreadcrumbItem
    {
        Text = text,
        IconSvg = iconSvg,
        Tag = tag,
        IsActive = true
    });
}

// 使用示例
AddBreadcrumbItem("订单管理", "order", null);
AddBreadcrumbItem("订单详情", "detail", orderId);

返回上一级

csharp 复制代码

// 返回上一级
private void GoBack()
{
    if (breadcrumb.Items.Count > 1)
    {
        breadcrumb.Items.RemoveAt(breadcrumb.Items.Count - 1);
        breadcrumb.Items[breadcrumb.Items.Count - 1].IsActive = true;
    }
}

数据绑定

csharp 复制代码

// 属性改变事件
breadcrumb.PropertyChanged += (sender, e) =>
{
    Console.WriteLine($"属性 {e.PropertyName} 已更改");
};

注意事项

激活状态：只能有一个激活项，设置新的激活项会自动取消之前的
图标类型：Icon 和 IconSvg 同时设置时，优先使用 IconSvg
分隔符：Style 为 Default 时才显示分隔符
点击事件：只有 Enabled 为 true 的项才会触发点击事件

三、后记

陆续补充完善中，如有需求，有好的建议，请留言(xue5zhijing)