如何在MAUI的Shell Flyout菜单中添加Switch与Picker控件？

完全不需要切换到原生Flyout页面，Shell支持通过自定义DataTemplateSelector实现不同类型的Flyout菜单项，下面是具体实现步骤：

步骤1：定义菜单项的视图模型 #

先创建带类型标识的菜单项模型，用来区分不同的控件类型：

public enum MenuItemType
{
    DarkModeToggle,
    LanguagePicker
}

public class CustomMenuItem : MenuItem
{
    public MenuItemType ItemType { get; set; }
}

步骤2：实现自定义DataTemplateSelector #

创建继承自DataTemplateSelector的类，根据ItemType返回对应模板：

public class MenuItemTemplateSelector : DataTemplateSelector
{
    public DataTemplate DarkModeTemplate { get; set; }
    public DataTemplate LanguagePickerTemplate { get; set; }
    public DataTemplate DefaultTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var menuItem = item as CustomMenuItem;
        return menuItem?.ItemType switch
        {
            MenuItemType.DarkModeToggle => DarkModeTemplate,
            MenuItemType.LanguagePicker => LanguagePickerTemplate,
            _ => DefaultTemplate
        };
    }
}

步骤3：在AppShell.xaml中配置模板和Selector #

在Shell资源中定义控件模板，实例化自定义Selector并关联到Flyout菜单：

<Shell x:Class="YourApp.AppShell"
       xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourApp">

    <Shell.Resources>
        <!-- 深色模式Switch模板 -->
        <DataTemplate x:Key="DarkModeTemplate">
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="15,10">
                    <Label Text="启用深色模式" VerticalOptions="Center"/>
                    <Switch IsToggled="{Binding IsDarkMode}" HorizontalOptions="EndAndExpand"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>

        <!-- 语言Picker模板 -->
        <DataTemplate x:Key="LanguagePickerTemplate">
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="15,10">
                    <Label Text="语言" VerticalOptions="Center"/>
                    <Picker ItemsSource="{Binding Languages}" SelectedItem="{Binding SelectedLanguage}" HorizontalOptions="EndAndExpand"/>
                </StackLayout>
            </ViewCell>
        </DataTemplate>

        <!-- 关联模板的自定义Selector -->
        <local:MenuItemTemplateSelector x:Key="MenuItemSelector"
                                        DarkModeTemplate="{StaticResource DarkModeTemplate}"
                                        LanguagePickerTemplate="{StaticResource LanguagePickerTemplate}"/>
    </Shell.Resources>

    <!-- 配置Flyout菜单组 -->
    <FlyoutItem Title="设置">
        <ShellContent>
            <!-- 可放置设置页面导航内容，或留空仅作为控件容器 -->
        </ShellContent>
        <FlyoutItem.MenuItemTemplate>
            <StaticResource ResourceKey="MenuItemSelector"/>
        </FlyoutItem.MenuItemTemplate>

        <!-- 添加自定义菜单项 -->
        <local:CustomMenuItem ItemType="DarkModeToggle" BindingContext="{Binding DarkModeVM}"/>
        <local:CustomMenuItem ItemType="LanguagePicker" BindingContext="{Binding LanguageVM}"/>
    </FlyoutItem>

    <!-- 其他导航项 -->
    <!-- ... -->
</Shell>

关键说明 #

• 你之前尝试的<ShellContent>无法直接嵌入控件，因为它的核心作用是承载导航页面，而非自定义UI元素；全局<Shell.MenuItemTemplate>仅支持单一模板，因此必须通过Selector实现多模板区分。
• 需确保视图模型（如DarkModeVM、LanguageVM）实现INotifyPropertyChanged接口，包含IsDarkMode、Languages、SelectedLanguage等可绑定属性，保证双向绑定生效。

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