如何在Xamarin中实现页面覆盖效果（仿Android Picker）

方案1：用Xamarin Community Toolkit的Popup控件（最简便） #

这个控件原生支持自定义弹窗布局，还能设置背景透明度，完美匹配你的需求。

步骤： #

1. 给iOS、Android项目都安装Xamarin.CommunityToolkit NuGet包
2. 写自定义Popup类，继承Popup并布局内容
3. 在主页面触发弹出

代码示例： #

自定义Popup类：

using Xamarin.CommunityToolkit.UI.Views;

public class PickerPopup : Popup
{
    public PickerPopup()
    {
        // 背景半透明遮罩
        BackgroundColor = Color.FromRgba(0, 0, 0, 0.5);
        // 弹窗内容布局
        Content = new StackLayout
        {
            Margin = new Thickness(20),
            BackgroundColor = Color.White,
            Padding = new Thickness(15),
            Children = {
                new Picker {
                    Title = "选择选项",
                    Items = { "选项1", "选项2", "选项3" }
                },
                new Button {
                    Text = "确认",
                    Command = new Command(() => Dismiss(null))
                }
            }
        };
    }
}

主页面调用：

async void ShowPicker()
{
    var popup = new PickerPopup();
    await Navigation.ShowPopupAsync(popup);
    // 可以在这里获取弹窗返回值
    var selectedResult = popup.Result;
}

方案2：原生绝对布局+自定义ContentView（无第三方依赖） #

不想加第三方库的话，直接用绝对布局在主页面上叠加遮罩和选择面板。

步骤： #

1. 把主页面根布局换成AbsoluteLayout
2. 依次放入主页面内容、半透明遮罩、选择面板（初始隐藏）
3. 触发时显示遮罩和面板，点击确认/遮罩隐藏

代码示例： #

主页面XAML：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.MainPage">
    <AbsoluteLayout>
        <!-- 主页面原有内容 -->
        <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
            <StackLayout>
                <Label Text="主页面内容" FontSize="Large"/>
                <Button Text="显示选择器" Clicked="ShowPicker_Clicked"/>
            </StackLayout>
        </ScrollView>

        <!-- 半透明遮罩 -->
        <BoxView x:Name="Mask" Color="#80000000" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" IsVisible="False"/>

        <!-- 选择面板 -->
        <ContentView x:Name="PickerPanel" BackgroundColor="White" 
                     AbsoluteLayout.LayoutFlags="PositionProportional" 
                     AbsoluteLayout.LayoutBounds="0.5,0.5,300,200" IsVisible="False">
            <StackLayout Padding="15">
                <Picker Title="选择选项" Items="{Binding Options}"/>
                <Button Text="确认" Clicked="Confirm_Clicked"/>
            </StackLayout>
        </ContentView>
    </AbsoluteLayout>
</ContentPage>

主页面后台代码：

private void ShowPicker_Clicked(object sender, EventArgs e)
{
    Mask.IsVisible = true;
    PickerPanel.IsVisible = true;
}

private void Confirm_Clicked(object sender, EventArgs e)
{
    Mask.IsVisible = false;
    PickerPanel.IsVisible = false;
}

方案3：半透明模态页面 #

通过设置模态页面的背景透明度，实现覆盖效果。

步骤： #

1. 新建一个ContentPage作为模态页面，设置背景半透明
2. 在模态页面里布局选择器
3. 主页面以模态方式打开该页面

代码示例： #

模态页面XAML：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.PickerModalPage"
             BackgroundColor="#80000000">
    <StackLayout VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="White" WidthRequest="300" HeightRequest="200" Padding="15">
        <Picker Title="选择选项" Items="{Binding Options}"/>
        <Button Text="确认" Clicked="Confirm_Clicked"/>
    </StackLayout>
</ContentPage>

主页面调用：

async void ShowModalPicker()
{
    var modalPage = new PickerModalPage();
    await Navigation.PushModalAsync(modalPage);
}

// 模态页面确认按钮事件
private void Confirm_Clicked(object sender, EventArgs e)
{
    Navigation.PopModalAsync();
}

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