0

The main goal of the task to create AutoSuggest control. In my case AutoSuggest control is custom control inherited from Grid

<Grid xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ...
             xmlns:handlers ="clr-namespace:CrowdExchangeV2.Controls.Handlers"
             WidthRequest="150">
    <Grid.RowDefinitions>
        <RowDefinition Height="35"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <Frame  Grid.Row="0" 
           ...>
        <handlers:BorderlessEntry Placeholder="{Binding Source={x:Reference this}, Path=Placeholder}"   
           WidthRequest="150"
           .../>
    </Frame>
    <AbsoluteLayout
        WidthRequest="150"
        MaximumHeightRequest="100" 
        Grid.Row="1"
        x:Name="resAl">
        <ScrollView               
            MaximumHeightRequest="100"
            MaximumWidthRequest="160"
            x:Name="resSV">
            <CollectionView  x:Name="list">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <HorizontalStackLayout VerticalOptions="Center"
                                                   HorizontalOptions="Start">
                            <Label Text="{Binding Key}" Padding="0,0,4,0"/>
                            <Label Text="{Binding Value}"/>
                        </HorizontalStackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ScrollView>
    </AbsoluteLayout>
</Grid>

So, control looking for suggestions in Dictionary while user typing text in Entry. The thing is - when CollectionView updates suggestions it pushes all the other elements on ContentPage down... but suppose to overlay them. All right lets wrap Suggester in AbsoluteLayout on contentPage and setBounds to a desirable position. (PS: Suggester name is suggester 0_o)

<?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"
             ...
             Title=" ">
    <AbsoluteLayout x:Name="mainAbs">
        <AbsoluteLayout Margin="0,0,0,0" 
                        x:Name="suggestAl">
            <suggester:Suggester Placeholder="USD"
                                 SearchDictionary="{Binding SearchCurrency}"
                                 MaximumHeightRequest="150"
                                 MaximumWidthRequest="150"/>
        </AbsoluteLayout>
        <Grid Padding="10" AbsoluteLayout.LayoutBounds="0,0,1,1"
                 AbsoluteLayout.LayoutFlags="All">
            <ScrollView>
                <VerticalStackLayout>
                    ...
                    <Frame HorizontalOptions="Fill">
                        <VerticalStackLayout>
                            ...
                            <VerticalStackLayout HeightRequest="80" 
                                                 x:Name="currVSL">
                                <Label Text="Currency out:"
                                        VerticalOptions="Start"
                                       HorizontalOptions="Start"
                                        FontSize="Header"
                                       x:Name="curLbl"/>
                 **SUggester should be here**
                            </VerticalStackLayout>
                        </VerticalStackLayout>
                    </Frame>
                </VerticalStackLayout>
            </ScrollView>
        </Grid>
    </AbsoluteLayout>
</ContentPage>

The first idea is - to grab x:Name="currVSL" bounds, adjust it for size of Label, and place x:Name="suggestAl" there, but i cant get absolute position of x:Name="currVSL" only relative and in absolute terms it's wrong

I don't want to hardcode position in static numbers, because the position highly depends on a particular device. So the question is how to achieve a desirable result - Place x:Name="currVSL" under the x:Name="curLbl" label. OR Might be there is a more elegant solution to show suggestion results without pushing all the other elements down?(Read:overlay other elements on UI)

Image to visualise UI

Ant T
  • 7
  • 3
  • You can **overlap two elements** on top of each other, by putting them inside a grid with same `Grid.Row` and `Grid.Column`. If needed, tell Suggestions to overlap multiple rows: `Grid.RowSpan="3"` or similar. – ToolmakerSteve Jan 20 '23 at 21:22
  • Thank you for the advice) It should work, you're right. But the technical question is the same. just for self-education, how to bind AbsoluteLoyout in an area of particular control with no hardcoding... For example, .NET MAUI Autocomplete Control from syncfusion, it's payable, some crazy amount of money, but most of their control could be easily reproduced... So, how they did it? How their results just overlay all other controls on the page? – Ant T Jan 20 '23 at 22:31
  • **1)** Since it works without requiring a specific container such as AbsoluteLayout, I assume they wrote platform-specific code on each platform (windows, ios, android) that they support. That's an advanced topic. Maui needs more examples and more detailed docs of platform customization. **2)** Re AbsoluteLayout: In code behind, assuming container is an `AbsoluteLayout`, you'd write `AbsoluteLayout.SetLayoutBounds(myControl, someRectangle);`, computing the rectangle from screen dimensions and/or bounds of some control on the screen. Maybe you can find Xamarin example of SetLayoutBounds. – ToolmakerSteve Jan 21 '23 at 01:35

0 Answers0