【WinForm UI控件系列】Avatar头像控件，支持图片、svg图标、文本

Avatar 是一个基于 Ant Design 设计风格的头像控件，用于代表用户或事物，支持图片、图标或字符展示。

一、示例展示

二、使用说明

Avatar 头像控件

概述

Avatar 是一个基于 Ant Design 设计风格的头像控件，用于代表用户或事物，支持图片、图标或字符展示。

功能特性

• 多种形状：支持圆形和方形（圆角）两种形状
• 渐变发光效果：可启用渐变发光（阴影）效果，增强视觉层次
• 多种内容类型：支持文本、图片、SVG图标三种内容展示
• 角标显示：支持 Badge 角标显示，可显示数字或自定义文本
• 设计时支持：完全支持 Visual Studio 设计器，属性即时生效

属性列表

属性名	类型	说明	默认值
Shape	AvatarShape	头像形状（Circle/Square）	Circle
CornerRadius	int	方形时的圆角半径	8
Padding	Padding	控件内边距（边框与内容之间的间隙）	2,2,2,2
TextPadding	int	内容内边距（文本/图片/图标与边框之间的额外间距）	4
BgColor	Color	背景颜色	#F0F0F0
ForeColor	Color	前景颜色（文字/图标颜色）	#646464
EnableGlow	bool	是否启用渐变发光效果	false
GlowColor	Color	发光颜色	#1890FF
GlowSize	int	发光大小	10
ContentType	AvatarContent	内容类型（Text/Image/Icon）	Text
Text	string	显示的文本（单个字符效果最佳）	"A"
Image	Image	显示的图片	null
IconSvgName	string	SVG图标名称	"user"
IconSvgColor	Color?	SVG图标颜色（为空则使用ForeColor）	null
IconSvgRotation	float	SVG图标旋转角度	0
ShowBadge	bool	是否显示角标	false
BadgeNumber	int	角标数字（优先于BadgeText）	0
BadgeText	string	角标文字	""
BadgeBgColor	Color	角标背景颜色	#F5222D
BadgeTextColor	Color	角标文字颜色	White
BadgeCornerRadius	int	角标圆角半径	10
TextFont	Font	文本字体	Microsoft YaHei, Bold, 16pt

枚举定义

AvatarShape - 头像形状

public enum AvatarShape
{
    /// <summary>
    /// 圆形
    /// </summary>
    Circle,
    
    /// <summary>
    /// 方形（圆角）
    /// </summary>
    Square
}

AvatarContent - 内容类型

public enum AvatarContent
{
    /// <summary>
    /// 文本
    /// </summary>
    Text,
    
    /// <summary>
    /// 图片
    /// </summary>
    Image,
    
    /// <summary>
    /// SVG图标
    /// </summary>
    Icon
}

使用示例

基本用法

using AntdUIEx.Controls;

// 创建文本头像
var avatar = new Avatar();
avatar.Size = new Size(48, 48);
avatar.ContentType = AvatarContent.Text;
avatar.Text = "武";
avatar.BgColor = Color.FromArgb(240, 240, 240);
avatar.ForeColor = Color.FromArgb(100, 100, 100);
this.Controls.Add(avatar);

圆形头像（带发光效果）

var avatar = new Avatar();
avatar.Size = new Size(64, 64);
avatar.Shape = AvatarShape.Circle;
avatar.ContentType = AvatarContent.Text;
avatar.Text = "李";
avatar.EnableGlow = true;
avatar.GlowColor = Color.FromArgb(24, 144, 255);
avatar.GlowSize = 15;
this.Controls.Add(avatar);

方形头像（带角标）

var avatar = new Avatar();
avatar.Size = new Size(48, 48);
avatar.Shape = AvatarShape.Square;
avatar.CornerRadius = 8;
avatar.ContentType = AvatarContent.Text;
avatar.Text = "王";
avatar.ShowBadge = true;
avatar.BadgeNumber = 99; // 超过99显示"99+"
this.Controls.Add(avatar);

图片头像

var avatar = new Avatar();
avatar.Size = new Size(64, 64);
avatar.ContentType = AvatarContent.Image;
avatar.Image = Image.FromFile("avatar.jpg");
this.Controls.Add(avatar);

SVG图标头像

var avatar = new Avatar();
avatar.Size = new Size(48, 48);
avatar.ContentType = AvatarContent.Icon;
avatar.IconSvgName = "user";
avatar.ForeColor = Color.White;
avatar.BgColor = Color.FromArgb(24, 144, 255);
this.Controls.Add(avatar);

角标文字示例

var avatar = new Avatar();
avatar.Size = new Size(48, 48);
avatar.ContentType = AvatarContent.Text;
avatar.Text = "管";
avatar.ShowBadge = true;
avatar.BadgeText = "NEW"; // 自定义角标文字
avatar.BadgeBgColor = Color.Green;
this.Controls.Add(avatar);

设计时支持

Avatar 控件完全支持 Visual Studio 设计器：

• 在属性窗口中可直接切换形状和内容类型
• 实时预览不同样式的外观
• 属性修改即时生效
• 支持拖拽调整大小

注意事项

1. 文本内容：建议使用单个字符，效果最佳
2. 图片尺寸：建议使用正方形图片，避免拉伸变形
3. 图标名称：使用内置 SVG 图标时，请确保图标名称正确
4. 角标显示：BadgeNumber 优先于 BadgeText，超过99自动显示"99+"

三、后记

更多控件，敬请关注，如有需求、好的建议，请留言(xue5zhijing)