WPF 中的非模态浮动对话框答案

【问题标题】：Non-Modal floating dialog in WPFWPF 中的非模态浮动对话框
【发布时间】：2009-05-27 12:33:11
【问题描述】：

我想创建一个 UI 序列，其中用户单击一个按钮，它会在其下方弹出一个小面板，其中包含一个按钮和一个文本框，可能还有一个小项目列表。该对话框是非模态的，更重要的是，当您单击主窗口中的其他位置时，它就会消失。

例如，当您在 Internet Explorer 7 中单击“收藏夹”星形图标或在 Firefox 中单击位置栏中的星形两次时，它会弹出书签编辑器对话框。

实现这一目标的最简洁方法是什么？

我应该使用 UserControl 并在单击按钮时完全修复它的位置吗？如果是这样，当用户点击其他地方时如何隐藏它？

【问题讨论】：

【解决方案1】：

我想说最干净的方法是使用Popup。 Popup 类显示一个浮动在屏幕上其余元素之上的元素，但它是非模态的，并且可以配置为在用户点击离开它时消失 - 非常适合您的非模态对话框。 Popup 类的属性允许您控制它相对于另一个控件的显示位置（在您的情况下，您希望用户按下以打开弹出窗口的按钮）。

这是一个全 XAML 示例：

<Grid>
    <ToggleButton HorizontalAlignment="Center" VerticalAlignment="Top" 
                  x:Name="PopButton" Content="Pop"/>
    <Popup Placement="Bottom" PlacementTarget="{Binding ElementName=PopButton}" StaysOpen="False" 
           IsOpen="{Binding ElementName=PopButton, Path=IsChecked, Mode=TwoWay}">
        <Rectangle Height="100" Width="200" Fill="Blue"/>
    </Popup>
</Grid>

您还可以使用命令或事件处理程序从代码中打开/关闭弹出窗口。

Placement 和 PlacementTarget 属性设置弹出窗口将出现的位置，以及它将相对于哪个控件出现（还有其他选项允许您使其相对于其当前位置和相对于鼠标出现）。将 StaysOpen 设置为 False 将使 WPF 在用户单击弹出窗口外部时自动关闭它。

默认情况下，弹出窗口没有自己的样式 - 它只是浮动内容的容器 - 因此您必须将其样式设置为看起来像您的窗口 chrome/toolbar/etc。视情况而定。

【讨论】：

这正是我所需要的！谢谢。