如何修改WPF Popup窗口样式并控制动态箭头位置

一、实现指定样式的Popup #

默认WPF Popup无箭头样式，需通过重写ControlTemplate自定义弹窗结构，包含圆角主体和箭头元素，匹配示例图的视觉风格：

<Style x:Key="StyledPopup" TargetType="{x:Type Popup}">
    <Setter Property="AllowsTransparency" Value="True"/>
    <Setter Property="PopupAnimation" Value="Fade"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Popup}">
                <Grid>
                    <!-- 弹窗主体：圆角、边框、背景匹配示例 -->
                    <Border x:Name="PopupContainer"
                            Background="#FFFFFF"
                            BorderBrush="#E0E0E0"
                            BorderThickness="1"
                            CornerRadius="8"
                            Padding="12">
                        <ContentPresenter/>
                    </Border>

                    <!-- 各位置箭头元素，默认隐藏 -->
                    <!-- 顶部箭头（居中） -->
                    <Path x:Name="ArrowTopCenter"
                          Data="M0,0 L10,10 L20,0 Z"
                          Fill="#FFFFFF"
                          Stroke="#E0E0E0"
                          StrokeThickness="1"
                          Visibility="Collapsed"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Top"
                          Margin="0,-1,0,0"/>
                    <!-- 底部箭头（居中） -->
                    <Path x:Name="ArrowBottomCenter"
                          Data="M0,10 L10,0 L20,10 Z"
                          Fill="#FFFFFF"
                          Stroke="#E0E0E0"
                          StrokeThickness="1"
                          Visibility="Collapsed"
                          HorizontalAlignment="Center"
                          VerticalAlignment="Bottom"
                          Margin="0,0,0,-1"/>
                    <!-- 左侧箭头（居中） -->
                    <Path x:Name="ArrowLeftCenter"
                          Data="M10,0 L0,10 L10,20 Z"
                          Fill="#FFFFFF"
                          Stroke="#E0E0E0"
                          StrokeThickness="1"
                          Visibility="Collapsed"
                          HorizontalAlignment="Left"
                          VerticalAlignment="Center"
                          Margin="-1,0,0,0"/>
                    <!-- 右侧箭头（居中） -->
                    <Path x:Name="ArrowRightCenter"
                          Data="M0,0 L10,10 L0,20 Z"
                          Fill="#FFFFFF"
                          Stroke="#E0E0E0"
                          StrokeThickness="1"
                          Visibility="Collapsed"
                          HorizontalAlignment="Right"
                          VerticalAlignment="Center"
                          Margin="0,0,-1,0"/>
                    <!-- 扩展：顶部左/右、底部左/右、左侧上/下、右侧上/下箭头，按相同逻辑添加 -->
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

关键说明： #

• AllowsTransparency必须设为True，否则弹窗透明区域会显示黑底；
• 箭头使用Path绘制，填充色与弹窗主体背景一致、描边色与边框一致，保证视觉融合；
• 所有箭头默认隐藏，后续通过逻辑控制显示对应位置的箭头。

二、动态调整箭头位置 #

需结合目标元素位置、屏幕可用空间计算最优弹窗位置，同时匹配箭头显示。以下是后台代码实现逻辑：

核心步骤： #

1. 获取目标元素在屏幕中的坐标范围；
2. 计算弹窗在四个方向的可用空间；
3. 选择可用空间最大的方向放置弹窗；
4. 显示对应位置的箭头，并调整箭头偏移使其对齐目标元素。

代码示例： #

private void UpdatePopupArrowAndPlacement(Popup targetPopup, FrameworkElement triggerElement)
{
    if (targetPopup == null || triggerElement == null) return;

    // 获取目标元素在主窗口中的坐标
    var targetRect = triggerElement.TransformToAncestor(Application.Current.MainWindow)
                                   .TransformBounds(new Rect(0, 0, triggerElement.ActualWidth, triggerElement.ActualHeight));
    var screenWorkArea = SystemParameters.WorkArea;

    // 计算各方向可用空间
    double availableTop = targetRect.Top;
    double availableBottom = screenWorkArea.Height - targetRect.Bottom;
    double availableLeft = targetRect.Left;
    double availableRight = screenWorkArea.Width - targetRect.Right;

    // 优先选择可用空间最大的方向
    double maxSpace = Math.Max(Math.Max(availableTop, availableBottom), Math.Max(availableLeft, availableRight));

    // 获取模板中的元素
    var popupContainer = targetPopup.Template.FindName("PopupContainer", targetPopup) as Border;
    var arrowTopCenter = targetPopup.Template.FindName("ArrowTopCenter", targetPopup) as Path;
    var arrowBottomCenter = targetPopup.Template.FindName("ArrowBottomCenter", targetPopup) as Path;
    var arrowLeftCenter = targetPopup.Template.FindName("ArrowLeftCenter", targetPopup) as Path;
    var arrowRightCenter = targetPopup.Template.FindName("ArrowRightCenter", targetPopup) as Path;

    // 隐藏所有箭头
    arrowTopCenter.Visibility = Visibility.Collapsed;
    arrowBottomCenter.Visibility = Visibility.Collapsed;
    arrowLeftCenter.Visibility = Visibility.Collapsed;
    arrowRightCenter.Visibility = Visibility.Collapsed;

    // 根据空间选择位置并显示对应箭头
    if (maxSpace == availableBottom)
    {
        targetPopup.Placement = PlacementMode.Bottom;
        arrowTopCenter.Visibility = Visibility.Visible;
        // 调整箭头水平位置，对齐目标元素中心
        arrowTopCenter.Margin = new Thickness(
            targetRect.Left + targetRect.Width / 2 - popupContainer.ActualWidth / 2 - 10,
            -1, 0, 0);
    }
    else if (maxSpace == availableTop)
    {
        targetPopup.Placement = PlacementMode.Top;
        arrowBottomCenter.Visibility = Visibility.Visible;
        arrowBottomCenter.Margin = new Thickness(
            targetRect.Left + targetRect.Width / 2 - popupContainer.ActualWidth / 2 - 10,
            0, 0, -1);
    }
    else if (maxSpace == availableRight)
    {
        targetPopup.Placement = PlacementMode.Right;
        arrowLeftCenter.Visibility = Visibility.Visible;
        arrowLeftCenter.Margin = new Thickness(
            -1,
            targetRect.Top + targetRect.Height / 2 - popupContainer.ActualHeight / 2 - 10,
            0, 0);
    }
    else if (maxSpace == availableLeft)
    {
        targetPopup.Placement = PlacementMode.Left;
        arrowRightCenter.Visibility = Visibility.Visible;
        arrowRightCenter.Margin = new Thickness(
            0,
            targetRect.Top + targetRect.Height / 2 - popupContainer.ActualHeight / 2 - 10,
            -1, 0);
    }

    // 扩展：如需支持左/右/上/下的子位置（如顶部左对齐），可增加判断逻辑，调整箭头的HorizontalAlignment/VerticalAlignment
}

使用方式： #

在Popup显示前调用此方法，例如绑定触发按钮的Click事件：

private void ShowPopup_Click(object sender, RoutedEventArgs e)
{
    var triggerBtn = sender as Button;
    MyPopup.IsOpen = true;
    UpdatePopupArrowAndPlacement(MyPopup, triggerBtn);
}

扩展优化 #

• 若需更细粒度的箭头位置（如顶部左、底部右等），可在模板中添加对应箭头元素，并在逻辑中增加目标元素边角位置的判断；
• 可封装为自定义Popup控件，将位置计算逻辑内置，简化使用；
• 若希望完全在XAML中实现，可使用MultiBinding结合IValueConverter，绑定目标元素位置和屏幕参数来控制箭头显示。

内容的提问来源于stack exchange，提问作者Willy