AtomUI/docs/Desktop.Controls/Notifications/NotificationsStyling.md

Notification 自定义样式指南

Notification 系统的视觉表现通过 ControlTheme + Design Token 系统控制。以下介绍几种常见的自定义方式。

---

1. 使用属性直接控制

设置弹出位置

var manager = new WindowNotificationManager(topLevel)
{
    Position = NotificationPosition.TopLeft,  // 左上角弹出
    MaxItems = 3                              // 最多同时显示 3 条
};

设置通知类型

manager.Show(new Notification(
    title: "操作成功",
    content: "数据已保存",
    type: NotificationType.Success
));

设置自定义图标

manager.Show(new Notification(
    title: "设置提醒",
    content: "请检查系统配置",
    icon: new SettingOutlined()
));

设置永不自动关闭

manager.Show(new Notification(
    title: "重要通知",
    content: "此通知需要手动关闭",
    expiration: TimeSpan.Zero
));

显示倒计时进度条

manager.Show(new Notification(
    title: "通知标题",
    content: "带有进度条的通知",
    showProgress: true
));

控制悬停暂停行为

var manager = new WindowNotificationManager(topLevel)
{
    IsPauseOnHover = false  // 鼠标悬停时不暂停自动关闭
};

📖 完整示例参考：controlgallery/AtomUIGallery/ShowCases/Views/Feedback/NotificationShowCase.axaml

---

2. 通过 Style 覆盖 NotificationCard 样式

全局自定义通知卡片宽度

<Window.Styles>
    <Style Selector="atom|NotificationCard">
        <Setter Property="Width" Value="450" />
    </Style>
</Window.Styles>

按通知类型定制图标颜色

<!-- 自定义 Success 类型的图标颜色 -->
<Style Selector="atom|NotificationCard[NotificationType=Success] /template/ atom|IconPresenter#IconPresenter">
    <Setter Property="IconBrush" Value="#52c41a" />
</Style>

自定义关闭按钮样式

<Style Selector="atom|NotificationCard /template/ atom|IconButton#PART_CloseButton">
    <Setter Property="IconHeight" Value="14" />
    <Setter Property="IconWidth" Value="14" />
</Style>

自定义标题文本样式

<Style Selector="atom|NotificationCard /template/ atom|SelectableTextBlock#HeaderTitle">
    <Setter Property="FontWeight" Value="Bold" />
</Style>

---

3. 通过 Style 覆盖 WindowNotificationManager 样式

自定义容器对齐方式

<Style Selector="atom|WindowNotificationManager /template/ ReversibleStackPanel#PART_Items">
    <Setter Property="Margin" Value="20" />
</Style>

---

4. 通过样式类（Style Classes）定制

Show() 方法支持传入样式类名数组，可为特定通知应用自定义样式：

// 添加自定义样式类
manager.Show(new Notification("标题", "内容"), classes: new[] { "important" });

<!-- 在 AXAML 中定义对应样式 -->
<Style Selector="atom|NotificationCard.important /template/ Border#Frame">
    <Setter Property="BorderBrush" Value="Red" />
    <Setter Property="BorderThickness" Value="2" />
</Style>

---

5. 控制动画行为

// 禁用出入动画
var manager = new WindowNotificationManager(topLevel)
{
    IsMotionEnabled = false
};

---

样式选择器速查

说明：Avalonia 样式选择器中使用 atom|NotificationCard 语法引用 atom XML 命名空间下的 NotificationCard 类型，其中 | 是命名空间分隔符。

按控件类型选择

选择器	说明
atom|NotificationCard	匹配所有通知卡片
atom|WindowNotificationManager	匹配通知管理器容器

按通知类型选择

选择器	说明
atom|NotificationCard[NotificationType=Information]	匹配信息类通知
atom|NotificationCard[NotificationType=Success]	匹配成功类通知
atom|NotificationCard[NotificationType=Warning]	匹配警告类通知
atom|NotificationCard[NotificationType=Error]	匹配错误类通知

按位置选择

选择器	说明
atom|NotificationCard[Position=TopLeft]	匹配左上角位置的通知卡片
atom|NotificationCard[Position=TopRight]	匹配右上角位置的通知卡片
atom|NotificationCard[Position=TopCenter]	匹配顶部居中位置的通知卡片
atom|NotificationCard[Position=BottomLeft]	匹配左下角位置的通知卡片
atom|NotificationCard[Position=BottomRight]	匹配右下角位置的通知卡片
atom|NotificationCard[Position=BottomCenter]	匹配底部居中位置的通知卡片

按状态选择

选择器	说明
atom|NotificationCard[IsClosed=True]	匹配已关闭的通知卡片（动画完成后）
atom|NotificationCard[IsShowProgress=True]	匹配显示进度条的通知卡片

访问模板部件

选择器	说明
atom|NotificationCard /template/ Border#Frame	通知卡片的主框架 Border
atom|NotificationCard /template/ atom|IconPresenter#IconPresenter	类型图标展示器
atom|NotificationCard /template/ DockPanel#HeaderContainer	标题栏容器
atom|NotificationCard /template/ atom|SelectableTextBlock#HeaderTitle	标题文本
atom|NotificationCard /template/ atom|IconButton#PART_CloseButton	关闭按钮
atom|NotificationCard /template/ ContentPresenter#Content	正文内容展示器
atom|NotificationCard /template/ atom|NotificationProgressBar#ProgressBar	进度条

组合选择器示例

选择器	说明
atom|NotificationCard[NotificationType=Error] /template/ Border#Frame	错误类型通知的主框架（可自定义边框颜色）
atom|NotificationCard[Position=TopLeft] /template/ Border#Frame	左上角通知的主框架（可自定义边距）
atom|NotificationCard.important	带有 important 样式类的通知卡片