UWP中创建带动态指向指针的可移动弹出窗口

Flyout确实不适合你的场景——它的位置由系统管控，没法自由拖动，默认样式的背景也很难彻底移除。推荐用Popup控件来实现，完全自定义内容和位置逻辑，完美满足你的需求：

核心实现思路 #

• 用Popup作为容器，完全控制其显示位置
• 自定义弹窗内容：包含主体区域（可拖动）和三角形指针
• 点击Canvas时记录触发点，初始化Popup位置并让指针指向该点
• 拖动弹窗主体时，实时更新Popup偏移量，同时重新计算指针位置保持指向原触发点

完整代码示例 #

XAML 部分

<Canvas x:Name="MainCanvas" Background="Transparent" Tapped="MainCanvas_Tapped">
    <!-- 自定义弹出窗口 -->
    <Popup x:Name="CustomPopup" IsLightDismissEnabled="True">
        <Grid x:Name="PopupRoot" ManipulationMode="TranslateX, TranslateY" ManipulationDelta="PopupRoot_ManipulationDelta">
            <!-- 弹窗主体 -->
            <Border x:Name="PopupContent" Width="200" Height="150" Background="White" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="4">
                <StackPanel Padding="10">
                    <TextBox PlaceholderText="输入内容..." Margin="0 0 0 10"/>
                    <Button Content="确认" HorizontalAlignment="Right"/>
                </StackPanel>
            </Border>
            <!-- 三角形指针 -->
            <Polygon x:Name="PointerTriangle" Fill="White" Stroke="#E0E0E0" StrokeThickness="1" Points="0,0 10,10 20,0"/>
        </Grid>
    </Popup>
</Canvas>

C# 后台代码

private Point _tapPoint; // 记录Canvas上的点击位置

private void MainCanvas_Tapped(object sender, TappedRoutedEventArgs e)
{
    _tapPoint = e.GetPosition(MainCanvas);
    
    // 初始化Popup位置：让弹窗主体左上角靠近点击点，避免遮挡
    CustomPopup.HorizontalOffset = _tapPoint.X + 15;
    CustomPopup.VerticalOffset = _tapPoint.Y - 80;
    
    // 初始化指针位置，指向点击点
    UpdatePointerPosition();
    
    CustomPopup.IsOpen = true;
}

private void PopupRoot_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    // 更新Popup的偏移量，实现拖动
    CustomPopup.HorizontalOffset += e.Delta.Translation.X;
    CustomPopup.VerticalOffset += e.Delta.Translation.Y;
    
    // 实时更新指针位置，保持指向原点击点
    UpdatePointerPosition();
}

private void UpdatePointerPosition()
{
    // 获取Popup在Canvas中的实际位置
    var popupPos = CustomPopup.TransformToVisual(MainCanvas).TransformPoint(new Point(0, 0));
    // 获取弹窗主体的中心位置
    var contentCenter = new Point(popupPos.X + PopupContent.ActualWidth / 2, popupPos.Y + PopupContent.ActualHeight / 2);
    
    // 计算指针指向点击点的方向，调整三角形的位置和旋转角度
    var dx = _tapPoint.X - contentCenter.X;
    var dy = _tapPoint.Y - contentCenter.Y;
    var angle = Math.Atan2(dy, dx) * 180 / Math.PI;
    
    // 设置三角形的位置：让其中心对齐弹窗主体的边缘
    PointerTriangle.RenderTransform = new RotateTransform { Angle = angle + 90 };
    PointerTriangle.Margin = new Thickness(
        contentCenter.X - 10 - popupPos.X,
        contentCenter.Y - 10 - popupPos.Y,
        0, 0);
}

关键细节说明 #

• 移除透明背景：Popup本身没有默认背景，所有样式都由你自定义的Border和Polygon控制，彻底摆脱Flyout的默认样式限制
• 指针始终指向点击点：通过UpdatePointerPosition方法，实时计算弹窗主体与原点击点的相对位置，调整三角形的旋转角度和位置
• 拖动逻辑：给Grid开启ManipulationMode，通过ManipulationDelta事件更新Popup的HorizontalOffset和VerticalOffset，实现自由拖动
• 点击任意位置触发：Canvas设置Background="Transparent"才能响应点击事件，确保空白区域也能触发弹窗

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