Correct AbsoluteLayout positioning/overlay

1.3k Views Asked by At

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

0

There are 0 best solutions below