.NET MAUI自定义自动完成ComboBox：解决CollectionView层级与锚定问题

核心思路 #

用MAUI的Popup（或CommunityToolkit.Maui的Popup）替代原来Grid里的CollectionView容器，因为Popup是全局顶层容器，天然能保证在所有UI元素上方，同时可以精准锚定到Entry的位置，不会影响其他布局元素的排列。

具体实现步骤 #

1. 重构XAML结构

把原来的Border+CollectionView移到Popup中，保留Entry所在的Grid结构：

<Grid x:Name="CustomComboBox"
      RowDefinitions="Auto"
      WidthRequest="300">
    <!-- Entry for user input -->
    <inputLayout:SfTextInputLayout Hint="Query"
                                   ContainerType="Outlined"
                                   OutlineCornerRadius="10"
                                   ContainerBackground="{StaticResource VeryLightBlue}"
                                   BackgroundColor="{StaticResource White}"
                                   Stroke="{StaticResource Primary}"
                                   WidthRequest="300"
                                   HeightRequest="80"
                                   Grid.Row="0">
        <Entry x:Name="AutoCompleteEntry"
               TextColor="{StaticResource Primary}"
               TextChanged="OnEntryTextChanged"
               Focused="OnEntryFocused"
               Unfocused="OnEntryUnfocused"
               ClearButtonVisibility="WhileEditing"/>
    </inputLayout:SfTextInputLayout>
</Grid>

<!-- 全局顶层的Popup承载下拉列表 -->
<Popup x:Name="AutoCompletePopup"
       IsVisible="{Binding IsListViewVisible}"
       BackgroundColor="Transparent"
       HorizontalOptions="Start"
       VerticalOptions="Start">
    <Border StrokeThickness="2"
            Stroke="Transparent"
            WidthRequest="300">
        <Border.Shadow>
            <Shadow Brush="Black"
                    Offset="5,5"
                    Opacity="0.25"/>
        </Border.Shadow>
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="8"/>
        </Border.StrokeShape>
        <CollectionView ItemsSource="{Binding DisplayableResults}"
                        BackgroundColor="Transparent"
                        SelectedItem="{Binding SelectedResult}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:DisplayableAutoCompleteResult">
                    <Border Background="{StaticResource VeryLightBlue}"
                            Padding="10">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="{Binding CornerRadius}"/>
                        </Border.StrokeShape>
                        <Label Text="{Binding Result}"
                               TextColor="{StaticResource Primary}"/>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Border>
</Popup>

2. 实现Popup的精准锚定

在后台代码中，获取Entry的屏幕坐标，动态设置Popup的位置：

private void OnEntryFocused(object sender, FocusEventArgs e)
{
    // 获取Entry在屏幕上的位置
    var entryBounds = AutoCompleteEntry.GetScreenBounds();
    // 设置Popup的位置：在Entry正下方，对齐左侧
    AutoCompletePopup.AnchorX = 0;
    AutoCompletePopup.AnchorY = 0;
    AutoCompletePopup.SetValue(VisualElement.XProperty, entryBounds.X);
    AutoCompletePopup.SetValue(VisualElement.YProperty, entryBounds.Y + entryBounds.Height);
    
    // 刷新下拉数据并显示Popup
    ViewModel.LoadAutoCompleteResults(AutoCompleteEntry.Text);
    ViewModel.IsListViewVisible = true;
}

private void OnEntryUnfocused(object sender, FocusEventArgs e)
{
    // 延迟关闭，避免点击下拉项时直接关闭
    Task.Delay(200).ContinueWith(_ => 
    {
        MainThread.BeginInvokeOnMainThread(() => 
        {
            ViewModel.IsListViewVisible = false;
        });
    });
}

private void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    ViewModel.LoadAutoCompleteResults(e.NewTextValue);
}

3. 处理下拉项选中逻辑

在ViewModel中绑定SelectedResult，选中后同步到Entry并关闭Popup：

private DisplayableAutoCompleteResult _selectedResult;
public DisplayableAutoCompleteResult SelectedResult
{
    get => _selectedResult;
    set
    {
        if (_selectedResult != value)
        {
            _selectedResult = value;
            OnPropertyChanged();
            if (_selectedResult != null)
            {
                AutoCompleteText = _selectedResult.Result;
                IsListViewVisible = false;
            }
        }
    }
}

关键说明 #

• 为什么不用Grid的ZIndex？Grid的ZIndex仅作用于当前Grid容器内部，无法跨Grid/布局容器提升层级，而Popup是全局独立容器，默认在所有UI元素上方。
• 延迟关闭Popup：避免用户点击下拉项时，Entry先失去焦点触发关闭，导致选中逻辑失效。
• 如果需要更复杂的定位（比如屏幕边缘自适应），可以在计算Popup位置时判断是否超出屏幕，调整Y坐标或限制CollectionView高度。

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