Xamarin Forms中Shell页面点击菜单项弹出Picker的实现问题

问题原因 #

Shell的Items集合仅支持添加FlyoutItem、ShellContent、MenuItem等导航结构类对象，不支持直接添加Picker、Entry这类视图控件，所以你现有代码里往this.Items加Picker的写法无法生效。

不需要新建正式的业务ContentPage，两种方案可以实现直接弹出Picker的需求：

方案1：模态弹窗承载Picker（推荐） #

用半透明背景的临时ContentPage承载Picker，作为模态弹窗弹出，用完自动销毁，不侵入现有Shell结构，代码如下：

private async void editHistoryLbl_Clicked(object sender, EventArgs e)
{
    List<int> numbersLst = new List<int>(){ -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5 };
    // 构造临时弹窗页
    var pickerPopup = new ContentPage
    {
        BackgroundColor = Color.FromRgba(0,0,0,0.6),
        Content = new Frame
        {
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.Center,
            CornerRadius = 8,
            Padding = 15,
            WidthRequest = 300,
            Content = new Picker
            {
                ItemsSource = numbersLst,
                Title = "请选择数值"
            }
        }
    };

    var picker = (pickerPopup.Content as Frame).Content as Picker;
    // 选中后自动关闭弹窗并处理逻辑
    picker.SelectedIndexChanged += (s, arg) =>
    {
        if (picker.SelectedItem != null)
        {
            int selectedVal = (int)picker.SelectedItem;
            // 这里写选中后的业务逻辑
        }
        pickerPopup.Navigation.PopModalAsync();
    };

    await Navigation.PushModalAsync(pickerPopup);
}

方案2：预先在Shell内嵌入Picker #

如果你不想用弹窗，可以直接在Shell的内容层嵌入Picker，默认隐藏，点击菜单项时控制显示：

1. 修改Shell的XAML代码，新增Shell.Content节点：

<?xml version="1.0" encoding="utf-8" ?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:Bufib.Tools"
            xmlns:static="clr-namespace:Bufib.Tools"
            xmlns:flyout="clr-namespace:Bufib.Views.FlyoutPages"
            xmlns:others="clr-namespace:Bufib.Views.Others"
            x:Class="Bufib.MainPage"
            BackgroundImageSource="{local:ImageResource Bufib.Logos.bg.jpg}">
    
    <!-- 原有样式、导航、菜单项代码全部保留 -->
    <!-- 新增以下内容 -->
    <Shell.Content>
        <AbsoluteLayout>
            <Picker x:Name="NumberPicker"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                    AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1"
                    IsVisible="False"
                    WidthRequest="280"
                    Title="请选择数值"/>
        </AbsoluteLayout>
    </Shell.Content>
</Shell>

2. 修改点击事件代码：

private void editHistoryLbl_Clicked(object sender, EventArgs e)
{
    List<int> numbersLst = new List<int>(){ -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5 };
    NumberPicker.ItemsSource = numbersLst;
    NumberPicker.IsVisible = true;
    // 可选：添加选中后隐藏逻辑
    NumberPicker.SelectedIndexChanged += (s, arg) =>
    {
        if(NumberPicker.SelectedItem != null)
        {
            // 处理选中逻辑
        }
        NumberPicker.IsVisible = false;
    };
}

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