How to set a Visual Element to an absolute position on the screen in .net maui?

CrowdedFuzzball 5 Reputation points
2023-01-22T18:46:07.9233333+00:00

Hello! I'm trying to create an autocomplete control in .net maui Shell App.

How it might look can be seen in the picture. At the same time, the hint block itself can be shown both above and below the input field (depending on the position of the block on the page and the opening/closing of the keyboard)

9b1wc

The control can be added to any screen, so binding to the Page's AbsoluteLayout should not be used. And the AbsoluteLayout is almost deprecated as i see.

I understand how to do it in most "correctly" - create a Handler and in each of the handlers - separately for Android and separately for iOS, add a native view. But this approach is too complicated for cross-platform development, since need to work with bindings separately, create separate handler parts for each platform, and so on.

The simplest and most convenient is to create a .net maui TableView with desired data and place it in the right place on the screen relative to the input field.

Can you please answer me how can I place an element with position relative to the screen on top of other UI elements using .net maui?


I tried to test following control layout

<?xml version="1.0" encoding="utf-8" ?>

<VerticalStackLayout

xmlns                   = "http://schemas.microsoft.com/dotnet/2021/maui"    xmlns:x                 = "http://schemas.microsoft.com/winfx/2009/xaml"    x:Class                 = "Controls.Autocomplete"   

HeightRequest           = "30"

IsClippedToBounds       = "False"

InputTransparent        = "True"

ZIndex                  = "99999999">



<Entry       

 HeightRequest       = "30"        

Text                = "Text to find"        

VerticalOptions     = "Center"         

HorizontalOptions   = "Fill">    

</Entry>        



<ListView        

x:Name              = "SuggestionsList"        

ZIndex              = "999999"       

BackgroundColor     ="Red"        

HorizontalOptions   = "Fill"    

/>

</VerticalStackLayout>

But seems like .net maui ignores ZIndex in this case and shows following controls above autocomplete block

zindex ignored

There are Layout.RaiseChild(View) in Xamarin Forms, but i cant find something like that in .net maui.

How can i replace this functions?

thank you!

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,605 questions
{count} vote