如何创建可以自动重新调整不相互重叠的通知弹出窗口

Question

我创建了一个如下所示的小部件。有 3 个面板将跟踪 3 个不同的项目并显示它们各自的信息。在它们旁边是一个滚动查看器，它输出所有发生的事件。

==============================================================
* This is  *          *          *|                          |
*    a     *          *          *| This is a scrollviewer   |
*  panel   *          *          *|                          |
==============================================================

我试图在 item 发生事件时弹出通知，并在消失前显示几秒钟。例如

==================
| Battery empty! |
|                |
|                |
==================
   ==============================================================
   * Item:1   * Item:2    * Item:3   *|Item 1 battery empty!     |
   *          *           *          *|                          |
   * Batt: 0  * Batt:55%  * Batt:80% *|                          |
   ===============================================================

但是通知的宽度 window 比面板大。因此，如果有任何其他项目的警报，通知弹出窗口将相互重叠。

============================
| Battery em|Battery full! |
|           |              |
|           |              |
============================
   ==============================================================
   * Item:1   * Item:2    * Item:3   *|Item 2 battery full!      |
   *          *           *          *|Item 1 battery empty!     |
   * Batt: 0  * Batt:100% * Batt:80% *|                          |
   ===============================================================

有没有办法让我对弹出窗口进行编程，使其相互避开并自动重新调整到一边？如果太难了，有没有其他方法，比如使用window作为弹出窗口？

================   ===============  ===============
| Battery empty |  |Battery full!|  | Battery empty |
|               |  |             |  |               |
|               |  |             |  |               |
=================  ===============  =================
       ==============================================================
       * Item:1   * Item:2    * Item:3   *|Blah blah                 |
       *          *           *          *|.....                     |
       * Batt: 0  * Batt:100% * Batt: 0  *|.....                     |
       ===============================================================

*面板是存储在主 window 的项目控件中的用户控件。

Answer 1

为了显示相邻的Popups，我们可以将Placement设置为Relative，并将后续Popups的HorizontalOffset 属性设置为增加200（popup的宽度）。

例如；第一个弹出窗口的 HorizontalOffset 为 0，第二个为 200，第三个为 400，依此类推。

<Popup x:Name="Popup1" PlacementTarget="{Binding MyCanvas}" IsOpen="False" Placement="Relative">
    <Grid Background="Red" Width="200" Height="200"></Grid>
</Popup>

<Popup x:Name="Popup2" PlacementTarget="{Binding MyCanvas}" IsOpen="False" Placement="Relative" HorizontalOffset="200">
    <Grid Background="Yellow" Width="200" Height="200"></Grid>
</Popup>

<Popup x:Name="Popup3" PlacementTarget="{Binding MyCanvas}" IsOpen="False" Placement="Relative" HorizontalOffset="400">
    <Grid Background="Yellow" Width="200" Height="200"></Grid>
</Popup>

这将使弹出窗口彼此相邻，如下所示。

如何创建可以自动重新调整不相互重叠的通知弹出窗口

How to create notification popups that can automatically re-adjust not to overlap each other

c#

wpf

notifications

popup