如何在 .NET MAUI 中包含一个选择器作为菜单项？

Question

是否可以将下拉选择器添加到 MAUI Flyout 中？ 我需要为所有页面轻松提供全局选择。 我知道我可以创建一个设置页面，但用户在菜单中这样做会更容易。

我已将 Picker 示例代码插入到 MenuItem 中，但出现此错误：

XLS0502 “MenuItem”类型不支持直接内容。

是否有其他方法可以做到这一点，或者跨平台兼容性是否以某种方式限制了我们的能力？

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="SAE.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:SAE.MVVM.Views"
    Shell.FlyoutBehavior="Locked"
    Shell.FlyoutBackground="DarkGray">

    <FlyoutItem Title="Items" Icon="building_regular.png">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate views:Items}" />
        </Tab>
    </FlyoutItem>

    <MenuItem Text="Color">
            <Picker Title="Color"
                VerticalOptions="CenterAndExpand"
                Margin="10, 0"
                SelectedIndexChanged="OnPickerSelectedIndexChanged">
                <Picker.Items>
                    <x:String>Aqua</x:String>
                    <x:String>Black</x:String>
                    <x:String>Blue</x:String>
                    <x:String>Fuchsia</x:String>
                    <x:String>Gray</x:String>
                    <x:String>Green</x:String>
                    <x:String>Lime</x:String>
                    <x:String>Maroon</x:String>
                    <x:String>Navy</x:String>
                    <x:String>Olive</x:String>
                    <x:String>Purple</x:String>
                    <x:String>Red</x:String>
                    <x:String>Silver</x:String>
                    <x:String>Teal</x:String>
                    <x:String>White</x:String>
                    <x:String>Yellow</x:String>
                </Picker.Items>
            </Picker>
    </MenuItem>


</Shell>

Answer 1

您可以创建一个ColorPage来设置颜色并创建一个全局变量来存储所选颜色，然后您可以从应用程序中的其他页面访问该全局变量。

您可以参考以下代码：

1.在AppShell.xaml中定义一个ColorPage

2.ColorPage.xaml.cs

public partial class ColorPage : ContentPage 
{
    //create a global variable here

    public static string CHOOSEDCOLOR = "";
      public ColorPage()
      {
            InitializeComponent();
      }

      private void Picker_SelectedIndexChanged(object sender, EventArgs e)
      {
        var picker = (Picker)sender;
        int selectedIndex = picker.SelectedIndex;

        if (selectedIndex != -1)
        {
            CHOOSEDCOLOR = (string)picker.ItemsSource[selectedIndex];
            mColorLabel.Text = CHOOSEDCOLOR;
        }
    }
}

ColorPage.xaml的代码

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp925.ColorPage"
             Title="ColorPage">
    <VerticalStackLayout>
        <Label 
            Text=""
            x:Name="mColorLabel"
            VerticalOptions="Start" 
            HorizontalOptions="Center" />

        <Picker Title="Please choose color"
                VerticalOptions="CenterAndExpand"
                Margin="20"
                SelectedIndexChanged="Picker_SelectedIndexChanged">

            <Picker.ItemsSource>
                <x:Array Type="{x:Type x:String}">
                    <x:String>Aqua</x:String>
                    <x:String>Black</x:String>
                    <x:String>Blue</x:String>
                    <x:String>Fuchsia</x:String>
                    <x:String>Gray</x:String>
                    <x:String>Green</x:String>
                    <x:String>Lime</x:String>
                    <x:String>Maroon</x:String>
                    <x:String>Navy</x:String>
                    <x:String>Olive</x:String>
                    <x:String>Purple</x:String>
                    <x:String>Red</x:String>
                    <x:String>Silver</x:String>
                    <x:String>Teal</x:String>
                    <x:String>White</x:String>
                    <x:String>Yellow</x:String>
                </x:Array>
            </Picker.ItemsSource>
           
        </Picker>
    </VerticalStackLayout>
</ContentPage>

4.然后可以在其他页面访问全局变量CHOOSEDCOLOR ，如下：

     string color = ColorPage.CHOOSEDCOLOR;