Is there a way to have a list where each item has an optional dropdown, that overlaps the list items below it?

Question

I am trying to make a list of Entry fields that is loaded N times, with some text and comments together.

And when the text is typed I am trying to make a suggestion of text back from a predefined text collection but, the suggestion layout push all the controls below but not get over top.

This is how the suggested text will look like

I tried using absolute layout but actually cannot get what I am wanting. Each Enter Text has its suggestion and since there can be N times. So I want to fix it for all some text. And all have different text suggestion length.

<StackLayout BindableLayout.ItemsSource="{Binding MyTextList}"  VerticalOptions="FillAndExpand">
      <BindableLayout.ItemTemplate>
            <DataTemplate>
                  <Frame Margin="0,10,0,10" Padding="0" HasShadow="False" BackgroundColor="Transparent">
                        <Grid Margin="20">
                             <Grid.ColumnDefinitions>
                                   <ColumnDefinition Width="*" ></ColumnDefinition>
                                   <ColumnDefinition Width="*"></ColumnDefinition>
                             </Grid.ColumnDefinitions>
                             <StackLayout Orientation="Vertical" Grid.Column="0" Grid.Row="0" HorizontalOptions="FillAndExpand">
                                  <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                                       <Grid Margin="0" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1">
                                             <Grid.RowDefinitions>
                                                   <RowDefinition Height="auto" ></RowDefinition>
                                                   <RowDefinition Height="*"></RowDefinition>
                                             </Grid.RowDefinitions>
                                           <Label Text="{x:Static Rec:VestParkResource.SomeText}" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
                                           <Frame Grid.Column="0" Grid.Row="1" Padding="5" 
                                             BorderColor="{StaticResource GrayBorderColor}" CornerRadius="30" 
                                             HeightRequest="55" HorizontalOptions="FillAndExpand" >
                                                 <controls:BorderlessEntry TextTransform="Uppercase" 
                                                         Text="{Binding Text}"
                                                         Index = "{Binding Index}"
                                                         TextChanged ="SuggestShow" Completed="SuggestShow"
                                                         MaxLength="50" x:Name="LicensePlate" Keyboard="Text" 
                                                         Placeholder="{x:Static Rec:VestParkResource.SomeText}"
                                                         FontFamily="OpenSansRegular" />
                                          </Frame>
                                    </Grid>
                                    <StackLayout BindableLayout.ItemsSource="{Binding SuggestedText}" BindableLayout.EmptyView="No Suggestions"
                                          x:Name="SuggestedTextView"  Orientation="Vertical" IsVisible="{Binding IsVisible}"
                                          BackgroundColor="White" 
                                          AbsoluteLayout.LayoutBounds="0,65,1,1" AbsoluteLayout.LayoutFlags="None">
                                         <BindableLayout.ItemTemplate>
                                               <DataTemplate>
                                                     <StackLayout BackgroundColor="White" Padding="5" Margin="0" >
                                                           <Label Text="{Binding .}" FontSize="16" TextColor="#FF464859"/>
                                                     </StackLayout>
                                               </DataTemplate>
                                          </BindableLayout.ItemTemplate>
                                     </StackLayout>
                                  </AbsoluteLayout>
                             </StackLayout>
                             <StackLayout Grid.Column="1" Grid.Row="0" Orientation="Vertical"  HorizontalOptions="FillAndExpand">
                                    <Grid Margin="0">
                                           <Grid.RowDefinitions>
                                                 <RowDefinition Height="auto" ></RowDefinition>
                                                 <RowDefinition Height="*"></RowDefinition>
                                           </Grid.RowDefinitions>
                                           <Label Text="{x:Static Rec:VestParkResource.Comment}" TextColor="Black" FontAttributes="Bold" Grid.Column="0" Grid.Row="0" />
                                           <Frame Grid.Column="0" Grid.Row="1" Padding="5" HasShadow="False" BorderColor="{StaticResource GrayBorderColor}" CornerRadius="30" HeightRequest="55" HorizontalOptions="FillAndExpand">
                                                   <controls:BorderlessEntry 
                                                             TextTransform="Uppercase" 
                                                             Text="{Binding Comment}"
                                                             MaxLength="50" x:Name="Comment" Keyboard="Text" 
                                                             Placeholder="{x:Static Rec:VestParkResource.Comment}"
                                                             FontFamily="OpenSansRegular" />
                                            </Frame>
                                    </Grid>
                             </StackLayout>
                     </Grid>
              </Frame>
           </DataTemplate>
       </BindableLayout.ItemTemplate>
</StackLayout>

I have tried different combination of Absolute Layout's LayoutFlags and LayoutBounds but cannot achieve what I want. Can any one how can I achieve it? If it is possible using something other than absolute layout then please suggest.

If you want to overlay two elements, instead of `StackLayout`, use `Grid`. Give the items the same `Grid.Row`. Bind `IsVisible` to a boolean property, to control when each of the overlaid elements is seen. — ToolmakerSteve, Jan 06 '23 at 23:19
But this will just come up the input, I want it such that it seems like a drop-down. And it would be over other controls. — Amature123, Jan 09 '23 at 08:36
My mistake; I did not notice this code is inside `ItemTemplate`. I've edited Title to clarify. AFAIK, it is impossible to get one item to overlap other items. You could try a third-party `combobox` control; that acts like a dropdown. But I don't know if it can overlap other items. The only standard Xamarin.Forms control for selecting is a `Picker`. That would be a modal popup in screen center. I realize that doesn't look the same as you requested. — ToolmakerSteve, Jan 10 '23 at 01:18

Is there a way to have a list where each item has an optional dropdown, that overlaps the list items below it?

0 Answers0