WPF 如何将 Popup 附加到像矩形这样的简单 UIElement

Question

我花了好几个小时才找到这个问题的答案，所以我想我应该为我找到的内容写一个常见问题解答或答案。 (它基于以下线程 Binding Textbox IsFocused to Popup IsOpen plus additional conditions )

我发现了很多将弹出窗口绑定(bind)到诸如切换按钮和其他基于 windows chrome 并内置触发器的东西的例子。但在我的应用程序中，我想将弹出窗口绑定(bind)到一个带有自定义画笔填充的简单矩形。我找不到有关如何在用户将鼠标悬停在矩形上时打开弹出窗口并保持打开状态的示例。

所以我发布了这个问题，我会立即发布我找到的答案，希望其他人可以从中受益。我还会为任何可以帮助我了解 stackoverflow 是否允许这样的帖子或我本可以采用的更好方式的人标记一个答案。

编辑 1)

我不能自己回答 8 个小时，所以这里是工作代码:下面是一个简单的示例，说明如何在矩形/椭圆形等基本 UIElement 上使用弹出窗口...

<Grid HorizontalAlignment="Stretch" Height="Auto">
    <Rectangle x:Name="PopupRec"
               Grid.Row="0"
               Width="20" Height="20"
               HorizontalAlignment="Right" 
               Fill="Gray" Margin="0,0,0,10" />
    <Popup x:Name="SortPopup" 
           PlacementTarget="{Binding ElementName=PopupRec}" 
           StaysOpen="False" 
           PopupAnimation="Slide" 
           AllowsTransparency="True">
        <Border Background="White" Padding="15">
            <StackPanel Orientation="Vertical">
                <Button Command="{Binding MyCommand}" CommandParameter="5">5</Button>
                <Button Command="{Binding MyCommand}" CommandParameter="10">10</Button>
                <Button Command="{Binding MyCommand}" CommandParameter="15">15</Button>
                <Button Command="{Binding MyCommand}" CommandParameter="20">20</Button>
            </StackPanel>
        </Border>
        <Popup.Style>
            <Style TargetType="{x:Type Popup}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ElementName=PopupRec, Path=IsMouseOver}" Value="True">
                        <Setter Property="IsOpen" Value="True" />
                    </DataTrigger>
                    <DataTrigger Binding="{Binding ElementName=SortPopup, Path=IsMouseOver}" Value="True">
                        <Setter Property="IsOpen" Value="True" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Popup.Style>
    </Popup>
</Grid>

只需将其粘贴到 window/usercontrol/etc...

Answer 1

我建议进行以下改进。它将使 Popup Style 独立于任何元素名称，从而使您能够通过将其放入 Window 或 UserControl 的 Resources 中将其用作默认样式。

<Style TargetType="{x:Type Popup}">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=IsMouseOver,
                               RelativeSource={RelativeSource Self}}"
                     Value="True">
            <Setter Property="IsOpen" Value="True" />
        </DataTrigger>
        <DataTrigger Binding="{Binding Path=PlacementTarget.IsMouseOver,
                               RelativeSource={RelativeSource Self}}"
                     Value="True">
            <Setter Property="IsOpen" Value="True" />
        </DataTrigger>
    </Style.Triggers>
</Style>

---

请注意 Rectangle 不是“基本 UIElement”。这是一个Shape ，它本身就是一个 FrameworkElement .