如何调整 .NET MAUI Picker 窗口大小

Question

Using .NET MAUI (7) Picker to display a selection of say 20 countries,我想限制用于显示选择的窗口（Android）的大小。目前，当更多选项被添加到列表时，选择窗口会扩展，直到选择窗口覆盖整个父框架。我找不到调整选择窗口大小的控件。感谢任何帮助/提示。

浏览了文档 (MAUI 7) 中列出的不同 MAUI Picker 控件。 试图将选择器包含在框架/边框/VerticalStacklayout 中但没有结果（因为不应该，因为这将 - 据我所知 - 只会对选择器显示字段产生影响 - 但绝望导致疯狂的想法： - )

Answer 1

我创建了一个 Picker 并尝试通过 Handler 修改选择窗口大小，但失败了。

但是，您可以使用 .NET MAUI Community Toolkit 的 Popup 通过自定义选择器来实现您的需求。

Popup.xaml.cs:

<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="MauiApp3.SimplePopup">

    <VerticalStackLayout HeightRequest="200" 
                         WidthRequest="300">
        <ListView x:Name="listview" 
                  ItemTapped="listview_ItemTapped">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding Name}" TextColor="Black"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <Button HorizontalOptions="End" Text="Cancel" 
                Clicked="OnCancelButtonClicked" />
    </VerticalStackLayout>
    
</toolkit:Popup>

Popup.xaml.cs:

public partial class SimplePopup : Popup
{
    public ObservableCollection<NameId> NameIdList { get; set; }
    public SimplePopup()
    {
        InitializeComponent();
        createList();
        listview.ItemsSource = NameIdList;
    }
    private void
    OnCancelButtonClicked(object sender, EventArgs e)
    {
        Close("false");
    }
    void createList()
    {
        NameIdList = new ObservableCollection<NameId>
        { 
            new NameId { Id = "Id A", Name = "Name A" },
            new NameId { Id = "Id B", Name = "Name B" },
            new NameId { Id = "Id C", Name = "Name C" },
            new NameId { Id = "Id A", Name = "Name A" },
            new NameId { Id = "Id B", Name = "Name B" },
            new NameId { Id = "Id C", Name = "Name C" },
            new NameId { Id = "Id A", Name = "Name A" },
            new NameId { Id = "Id B", Name = "Name B" },
            new NameId { Id = "Id C", Name = "Name C" },
            new NameId { Id = "Id A", Name = "Name A" },
            new NameId { Id = "Id B", Name = "Name B" },
            new NameId { Id = "Id C", Name = "Name C" } 
        };

    }
    private void listview_ItemTapped(object sender, ItemTappedEventArgs e)
    {
        Close((e.Item as NameId).Name);
    }
}

NameId.class:

namespace MauiApp3.Models
{
    public class NameId
    {
        public string Name { get; set; }
        public string Id { get; set; }
    }
}

Page.xaml（它调用 Popup）：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp3" 
             x:Class="MauiApp3.NewPage2">
    <VerticalStackLayout>
        <Label Text="Select" x:Name="label">
            <Label.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
            </Label.GestureRecognizers>
        </Label>
    </VerticalStackLayout>
</ContentPage>

Page.xaml.cs:

public partial class NewPage2 : ContentPage
{
    public NewPage2()
    {
        InitializeComponent();
    }
    private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
    {
        var popup = new SimplePopup();
        var result = await this.ShowPopupAsync(popup);
        if (result.ToString() == "false")
        {
            return;
        }
        label.Text = result.ToString();
    }
}

效果很好。关于如何将Community Toolkit添加到你的项目中，你可以参考这个官方的doc。