如何在.NET 8.0的MAUI XAML/C#中设置弹窗底部锚定目标

问题分析 #

你设置了弹窗的VerticalOptions="End"，这会强制弹窗固定在屏幕底部，直接覆盖了Anchor属性的定位逻辑，导致弹窗无法关联到三点按钮的位置。同时多余的TranslateTo(0,0)调用对定位没有帮助，反而可能干扰布局。

解决方案 #

1. 修改Popup的XAML配置

移除强制屏幕底部的布局选项，改用Placement属性指定相对于Anchor的位置：

<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
               x:Class="PopupPosition.PopupView"
               Placement="Bottom"
               HorizontalOptions="Start"
               VerticalOptions="Start">
    <!-- 弹窗内容区域 -->
</toolkit:Popup>

• Placement="Bottom"：让弹窗显示在Anchor控件（三点按钮）的正下方
• HorizontalOptions="Start"/VerticalOptions="Start"：确保弹窗以自身左上角为起点对齐Anchor的对应位置，避免自动居中或拉伸

2. 简化后台代码

移除无用的TranslateTo调用，仅保留Anchor关联：

private void btnShow_Clicked(object sender, EventArgs e)
{
    var popupview = new PopupView();
    popupview.Anchor = btnShow;
    
    // 可选：如果需要微调位置，添加Offset参数
    // 例如让弹窗左边缘对齐按钮左边缘：popupview.Offset = new Point(0, 0);
    // 让弹窗居中对齐按钮：popupview.Offset = new Point((btnShow.Width - popupview.Width)/2, 0);
    
    this.ShowPopup(popupview);
}

3. 特殊需求适配（弹窗需保持屏幕底部）

如果需要弹窗整体位于屏幕底部且对齐按钮，可以通过计算控件绝对位置调整偏移：

private void btnShow_Clicked(object sender, EventArgs e)
{
    var popupview = new PopupView();
    popupview.Anchor = btnShow;
    
    // 获取按钮在屏幕上的绝对位置
    var buttonBounds = btnShow.GetAbsoluteBounds();
    // 获取屏幕高度（转换为设备独立像素）
    var screenHeight = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
    
    // 计算偏移量：让弹窗顶部对齐按钮底部，同时确保弹窗底部贴紧屏幕底部
    var offsetY = screenHeight - buttonBounds.Bottom - popupview.HeightRequest;
    // 水平方向让弹窗居中对齐按钮
    var offsetX = buttonBounds.Left + (btnShow.Width / 2) - (popupview.WidthRequest / 2);
    
    popupview.Offset = new Point(offsetX, offsetY);
    this.ShowPopup(popupview);
}

注意：需提前设置弹窗的WidthRequest和HeightRequest以确保计算准确。

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