.NET MAUI Custom ComboBox

Question

I would like to implement a ComboBox with autocomplete support in my MAUI app. I am currently using the ViewModel to refresh the ItemSource whenever the TextChanged event is raised by my entry. Initially, I attempted to use the SyncFusion ComboBox, but it seems to struggle with continuous refreshes of the ItemSource.

Subsequently, I created a custom ComboBox in a straightforward manner:

<Grid x:Name="CustomComboBox"
      RowDefinitions="Auto,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"
                                   Margin="0,0,0,-20">
        <Entry TextColor="{StaticResource Primary}"
               TextChanged="OnEntryTextChanged"
               Focused="OnEntryFocused"
               Unfocused="OnEntryUnfocused"
               ClearButtonVisibility="WhileEditing"/>
    </inputLayout:SfTextInputLayout>
    <!-- Border to create a shadow for CollectionView -->
    <Border IsVisible="{Binding IsListViewVisible}"
            StrokeThickness="2"
            Stroke="Transparent"
            WidthRequest="300"
            Grid.Row="1"
            ZIndex="2">
        <Border.Shadow>
            <Shadow Brush="Black"
                    Offset="5,5"
                    Opacity="0.25"/>
        </Border.Shadow>
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="8"/>
        </Border.StrokeShape>
        <!-- CollectionView for displaying results -->
        <CollectionView ItemsSource="{Binding DisplayableResults}"
                        BackgroundColor="Transparent"
                        SelectedItem="{Binding}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:DisplayableAutoCompleteResult">
                    <!-- Border for individual result item -->
                    <Border Background="{StaticResource VeryLightBlue}"
                            Padding="10">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="{Binding CornerRadius}"/>
                        </Border.StrokeShape>
                        <Border.Content>
                            <Label Text="{Binding Result}"
                                   TextColor="{StaticResource Primary}"/>
                        </Border.Content>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </Border>
</Grid>

UnFocused View FocusedView (In theses pictures you can see element that are not in the above code, I remove them for clarity purposes) I'm encountering an issue with the ZIndex property of the Grid. I aim to create a custom control that seamlessly merges the entry and the CollectionView. However, the CollectionView appears above the other elements due to being in the same cell of the grid. How can I achieve this with a custom control? Furthermore, even in the provided example, when the "UnFocusedEntry" is in another "grid cell," it moves below my collectionView.

In summary, how can I ensure that my collectionView consistently remains above the other elements without affecting their positions and is appropriately anchored to another element (in this case, my entry)?

Thank you for your assistance!