# Message 自定义样式指南 Message 系统由 `MessageCard`(单条消息)和 `WindowMessageManager`(容器管理器)两部分组成,各自有独立的 `ControlTheme`。由于 Message 是通过代码创建(而非 AXAML 声明式使用),自定义样式主要通过 Style 选择器和 Token 资源覆盖实现。 --- ## 1. 通过构造参数控制 最直接的方式是通过 `Message` 构造函数参数控制消息的表现: ```csharp // 不同消息类型 _messageManager?.Show(new Message("操作成功", MessageType.Success)); _messageManager?.Show(new Message("发生错误", MessageType.Error)); _messageManager?.Show(new Message("请注意", MessageType.Warning)); _messageManager?.Show(new Message("正在加载...", MessageType.Loading)); // 自定义过期时间 _messageManager?.Show(new Message( content: "这条消息 10 秒后关闭", expiration: TimeSpan.FromSeconds(10) )); // 永不自动关闭 _messageManager?.Show(new Message( content: "需要手动关闭", expiration: TimeSpan.Zero )); // 自定义图标 _messageManager?.Show(new Message( content: "自定义图标消息", icon: new HeartFilled() )); ``` > 📖 完整示例参考:`controlgallery/AtomUIGallery/ShowCases/Views/Feedback/MessageShowCase.axaml.cs` --- ## 2. 通过 Style 覆盖 MessageCard 样式 可以在 AXAML 中对 `MessageCard` 进行全局样式覆盖: ### 自定义消息卡片外观 ```xml ``` ### 按消息类型定制图标颜色 ```xml ``` ### 通过样式类附加自定义样式 `WindowMessageManager.Show` 方法支持附加样式类名,可以为特定消息指定独立样式: ```csharp // 显示消息时附加样式类 _messageManager?.Show( new Message("Important!", MessageType.Warning), classes: new[] { "important" } ); ``` ```xml ``` --- ## 3. 通过 WindowMessageManager 属性控制 ```csharp // 在 OnAttachedToVisualTree 中初始化 var topLevel = TopLevel.GetTopLevel(this); _messageManager = new WindowMessageManager(topLevel) { MaxItems = 10, // 最多同时显示 10 条消息 Position = NotificationPosition.TopCenter // 顶部居中(默认行为) }; ``` --- ## 4. 控制动画行为 ```csharp // 禁用消息入场/出场动画 _messageManager = new WindowMessageManager(topLevel) { IsMotionEnabled = false }; ``` 当 `IsMotionEnabled = false` 时,消息将直接显示/消失,不播放滑入/滑出动画。 --- ## 5. 通过 ControlTheme 替换主题 如果需要彻底替换 MessageCard 的模板,可以定义自定义 `ControlTheme`: ```xml ``` > ⚠️ 注意:替换 ControlTheme 时必须保留 `MotionActor`(名称为 `PART_MotionActor`),否则入场/出场动画将失效。 --- ## 样式选择器速查 > 说明:Avalonia 样式选择器中使用 `atom|MessageCard` 语法引用 `atom` XML 命名空间下的 `MessageCard` 类型,其中 `|` 是命名空间分隔符。 ### 按控件类型选择 | 选择器 | 说明 | |---|---| | `atom\|MessageCard` | 匹配所有消息卡片实例 | | `atom\|WindowMessageManager` | 匹配消息容器管理器 | ### 按消息类型选择 | 选择器 | 说明 | |---|---| | `atom\|MessageCard[MessageType=Information]` | 匹配信息类型消息 | | `atom\|MessageCard[MessageType=Success]` | 匹配成功类型消息 | | `atom\|MessageCard[MessageType=Warning]` | 匹配警告类型消息 | | `atom\|MessageCard[MessageType=Error]` | 匹配错误类型消息 | | `atom\|MessageCard[MessageType=Loading]` | 匹配加载中类型消息 | ### 按伪类选择 | 选择器 | 说明 | |---|---| | `atom\|MessageCard:information` | 信息类型伪类(等效于属性选择器) | | `atom\|MessageCard:success` | 成功类型伪类 | | `atom\|MessageCard:warning` | 警告类型伪类 | | `atom\|MessageCard:error` | 错误类型伪类 | | `atom\|MessageCard:loading` | 加载中类型伪类 | ### 按状态选择 | 选择器 | 说明 | |---|---| | `atom\|MessageCard[IsClosed=True]` | 匹配已关闭的消息(此时 Margin 被清零) | ### 模板部件选择 | 选择器 | 说明 | |---|---| | `atom\|MessageCard /template/ Border#PART_Frame` | 消息卡片主框架(背景、阴影、圆角) | | `atom\|MessageCard /template/ atom\|IconPresenter#PART_IconContent` | 消息图标展示器 | | `atom\|MessageCard /template/ SelectableTextBlock#PART_Message` | 消息文本 | | `atom\|MessageCard /template/ DockPanel#PART_HeaderContainer` | 内容布局容器 | ### 组合选择器示例 | 选择器 | 说明 | |---|---| | `atom\|MessageCard[MessageType=Error] /template/ atom\|IconPresenter` | 错误消息的图标展示器 | | `atom\|MessageCard.important /template/ Border#PART_Frame` | 带 "important" 样式类的消息主框架 | | `atom\|WindowMessageManager:topcenter /template/ ReversibleStackPanel#PART_Items` | 顶部居中位置时的消息列表面板 |