NotificationList

按位置堆叠的通知，带 id 与操作，即 uikit:NotificationList。

<Panel MinWidth="560" MinHeight="300">
  <WrapPanel ItemSpacing="8" LineSpacing="8" VerticalAlignment="Top" MaxWidth="160" HorizontalAlignment="Left">
    <Button Classes="info" Content="Info" Tag="Information" Click="OnShowType" />
    <Button Classes="success" Content="Success" Tag="Success" Click="OnShowType" />
    <Button Classes="warning" Content="Warning" Tag="Warning" Click="OnShowType" />
    <Button Classes="danger" Content="Error" Tag="Error" Click="OnShowType" />
    <Button Classes="outline" Content="With action" Click="OnShowAction" />
    <Button Classes="outline" Content="Unique" Click="OnShowUnique" />
    <Button Classes="outline" Content="Dismiss all" Click="OnClear" />
  </WrapPanel>
  <!-- Over the content: only the cards take input. -->
  <uikit:NotificationList Name="Notifications" Padding="16" />
</Panel>

#用法

uikit:NotificationList 按位置把通知堆叠显示，卡片的外观与 通知 一致。在顶层创建一个实例，它便覆盖在窗口内容之上；也可以在 XAML 中把它放到内容之上；只有卡片接收输入。Show 会添加一个 uikit:NotificationItem，作为所在堆叠中最新的卡片。

_notifications ??= new NotificationList(TopLevel.GetTopLevel(this)!);
_notifications.Show(new NotificationItem(NotificationType.Success, "Your changes have been saved.") { Title = "Saved" });

一个堆叠最多把最新的三张卡片叠放在一起，最新的在最前，每张更早的卡片向外偏移 14px 并收窄 5%；指针位于堆叠之上或焦点在堆叠内时，卡片会以 14px 的间隔展开。卡片通过弹簧动画移动到各自的位置。卡片出现 5 秒后自动关闭，堆叠展开时倒计时暂停；AutoHide 可改变这一行为，带 Action 的卡片会保留，除非 AutoHide 为 true。MaxItems（10）限制显示的最大打开卡片数，更早的卡片等待空位。列表的 Placement 是卡片的默认位置，卡片自身的 Placement 会覆盖它：四个角、上下边缘的中点，以及左右边缘的中点；位于边缘中点时堆叠居中，卡片淡入而不滑动。Padding 是与边缘的间距（顶部 50px，其他位置 16px），ItemWidth 是卡片宽度（382px）。

NotificationItem 有 Type（按其类型着色显示图标），或在不设 Type 时使用自己的 Icon（IconName、几何数据或控件）、Title、Message、位于其下方的任意内容，以及 Action（通常是按钮，使用 small 尺寸）。点击卡片会触发 Click，若 Click 被处理则关闭卡片；中键点击与关闭按钮同样可关闭。卡片消失后触发 NotificationClosed。Id 与 Key 与某张已显示卡片相同的卡片会立即替换它；Remove(id) 关闭该 id 的卡片，Remove(id, key) 关闭该 id 且该 key 的卡片，Clear() 关闭全部。

在演示中，将指针移到堆叠上即可展开；每个按钮添加一张卡片，Unique 替换自己的那张，Dismiss all 关闭全部。

#示例

每个位置一张卡片。

<Panel MinWidth="600" MinHeight="420">
  <UniformGrid Columns="3" Width="330" Height="120" HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button Classes="outline small" Content="TopLeft" Click="OnShow" />
    <Button Classes="outline small" Content="TopCenter" Click="OnShow" />
    <Button Classes="outline small" Content="TopRight" Click="OnShow" />
    <Button Classes="outline small" Content="LeftCenter" Click="OnShow" />
    <Panel />
    <Button Classes="outline small" Content="RightCenter" Click="OnShow" />
    <Button Classes="outline small" Content="BottomLeft" Click="OnShow" />
    <Button Classes="outline small" Content="BottomCenter" Click="OnShow" />
    <Button Classes="outline small" Content="BottomRight" Click="OnShow" />
  </UniformGrid>
  <uikit:NotificationList Name="Notifications" Padding="16" />
</Panel>