We Keep Coding

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

I am trying to make a list of Entry fields that is loaded N times, with some text and comments together.
This is my layout
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.

Xamarin - Frame Shadow not showing properly

I have a Xamarin Forms project and I'm trying to show frame shadow just like this
But instead it shows like this, the shadow is only appearing on the corners
I can't get it to show everywhere like the first picture
Here is my code:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:viewmodels="clr-namespace:AppCrijoya.ViewModels"
xmlns:model="clr-namespace:AppCrijoya.Models"
x:Class="AppCrijoya.Views.InvoicePage"
x:DataType="viewmodels:InvoiceViewModel"
Title="Facturas">
<!--<ContentPage.BindingContext>
<viewmodels:InvoiceViewModel />
</ContentPage.BindingContext>-->
<ContentPage.Content>
<StackLayout BackgroundColor="White">
<CollectionView x:Name="ListViewCart"
ItemsSource="{Binding ListCart}"
SelectionMode = "Single"
SelectedItem="{Binding CartSelected}"
SelectionChangedCommand="{Binding ShowAlertCommand}"
SelectionChangedCommandParameter="{Binding CartSelected, Source={RelativeSource Self}}"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:Invoice">
<Frame Margin="2" CornerRadius="30" HasShadow="True">
<Grid Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="Center" HeightRequest="160" RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="Nombre del Cliente:" VerticalOptions="Start"/>
<Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Name}" VerticalOptions="Start"/>
<Image Source="arrow_dropdown.png" HeightRequest="20" WidthRequest="20" Grid.Row="0" Grid.Column="3" VerticalOptions="End"/>
<Label Grid.Row="1" Grid.Column="0" Text="Fecha Compra:" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Date}" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="0" Text="Monto Total:" VerticalOptions="Start"/>
<Label Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Text="{Binding Total, Mode=TwoWay, StringFormat='{0:N2}€'}" VerticalOptions="Start"/>
<Label Grid.Row="3" Grid.ColumnSpan="3" Text="Detalle Compra" VerticalOptions="Start"/>
<BoxView Grid.Row="4" Grid.ColumnSpan="3" Color="Gray" HeightRequest="2" HorizontalOptions="Fill" />
<Label Grid.Row="5" Grid.Column="0" Text="Nombre" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="1" Text="Monto" VerticalOptions="Start" TextColor="#9C2424"/>
<Label Grid.Row="5" Grid.Column="2" Text="Cantidad" VerticalOptions="Start" TextColor="#9C2424"/>
<StackLayout Grid.Row="6" Grid.ColumnSpan="3" Margin="0" Padding="0">
<CollectionView x:Name="ListViewOrders"
ItemsSource="{Binding ListOrders}"
SelectionMode = "None"
>
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="model:CrOrder">
<Grid RowSpacing="0" ColumnSpacing="0" Margin="0" MinimumHeightRequest="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding Reference}" TextColor="Black" VerticalOptions="Center" FontSize="12" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding Price, StringFormat='{0:N2}€'}" TextColor="Black" VerticalOptions="End" FontSize="12" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding Quantity}" TextColor="Black" VerticalOptions="End" FontSize="12"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
What can I do to show the shadow all around the frame? Please help and thanks.
EDIT
This is what I have with Margin=2 on Frame
Margin=50
Padding=50
Just to show how it behaves

At first, you can create a new frame in your project to check if the cause is the renderer or not. Such as:
<Frame Margin="20" CornerRadius="10" HasShadow="True">
<Label Text="TestShaw" HorizontalOptions="Center"/>
</Frame>
If the shadow shows correctly, the cause maybe the layout or the margin of your frame. So you can change the values of it.
If the shadow shows incorrectly too, you may need to use a custom renderer for the frame. Such as:
[assembly: ExportRenderer(typeof(Myframe), typeof(MyFrameRenderer))]
namespace App36.Droid
{
public class MyFrameRenderer : Xamarin.Forms.Platform.Android.FastRenderers.FrameRenderer
{
public MyFrameRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
base.OnElementChanged(e);
CardElevation = 50;
SetOutlineSpotShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
SetOutlineAmbientShadowColor(Xamarin.Forms.Color.Black.ToAndroid());
}
}
}
But in my project, both of them shows correctly. So if you need more information, you can check the link following.
Link: Xamarin forms Shadow on Frame in Android
And here is the frame in my project:
If the platform is ios for your project, please check this case:Forms frame isn't the same on iOS

CommandParameter giving null value when use DataTemplate for listview in xamarin forms

I'm facing issue in CommandParameter which is in DataTemplate for the listView.
I have separate DataTemplate for ListView and i am not able to pass the imagepath in the commandParameter when click on image in the listView.
<?xml version="1.0" encoding="utf-8" ?>
xmlns:local="clr-namespace:RCBazaar.Localization"
xmlns:template="clr-namespace:RCBazaar.Views.Templates"
xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
xmlns:controls="clr-namespace:PanCardView.Controls;assembly=PanCardView"
x:Class="RCBazaar.Views.HomeView" Padding="0" x:Name="HomePage">
</Style>
</ResourceDictionary>
</ContentPage.Resources>-->
<ContentPage.Content>
<Grid Style="{StaticResource MainGrid}">
<Grid.RowDefinitions>
<RowDefinition Height="140"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*" ></RowDefinition>
</Grid.RowDefinitions>
<cards:CarouselView Margin="0" x:Name="carousel" Grid.Row="0" ItemsSource="{Binding ProductImage,Mode=TwoWay}" >
<cards:CarouselView.ItemTemplate>
<DataTemplate>
<ffimageloading:CachedImage HorizontalOptions="FillAndExpand" Source="{Binding ImageName}" Style="{StaticResource CachedImageStyle}">
</ffimageloading:CachedImage>
</DataTemplate>
</cards:CarouselView.ItemTemplate>
<controls:IndicatorsControl ToFadeDuration="1500" BackgroundColor="Gray"/>
<controls:LeftArrowControl ToFadeDuration="2500" BackgroundColor="Gray" />
<controls:RightArrowControl ToFadeDuration="2500" BackgroundColor="Gray"/>
</cards:CarouselView>
<Image Grid.Row="1" Margin="0,0,10,0" Source="ic_sort.png" HeightRequest="30" WidthRequest="30" HorizontalOptions="EndAndExpand">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SortPopupCommand}"/>
</Image.GestureRecognizers>
</Image>
<ListView IsEnabled="True" HeightRequest="{Binding ListHeight}" CachingStrategy="RecycleElement" x:Name="mylist" Style="{StaticResource ListviewStyle}" Grid.Row="2" SelectedItem="{Binding SelectedProduct,Mode=TwoWay}" ItemsSource="{Binding HomeProducts}" >
<ListView.Behaviors>
<behaviors:EventToCommandBehavior EventName="ItemSelected" Command="{Binding HomeProductSelectedCommand}"></behaviors:EventToCommandBehavior>
</ListView.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<template:ProductCell ParentBindingContext="{Binding Source={x:Reference mylist}, Path=BindingContext}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ActivityIndicator Grid.Row="2" VerticalOptions="Start" IsVisible="{Binding IsBusy,Mode=TwoWay}" IsRunning="{Binding IsBusy,Mode=TwoWay}" Color="Blue"/>
</Grid>
</ContentPage.Content>
ProductCell
<ViewCell.View>
<Grid RowSpacing="5" Style="{StaticResource ProductTemplateGrid}" >
<Grid.RowDefinitions>
<RowDefinition Height="28*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40*"/>
<ColumnDefinition Width="60*"/>
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage x:Name="img" VerticalOptions="FillAndExpand" Style="{StaticResource CachedImageStyle}" Aspect="AspectFit" Grid.Row="0" Source="{Binding PictureBinary,Converter={StaticResource Base64StringToImageConverter}}" Grid.RowSpan="5" Grid.Column="0">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer BindingContext="{Binding Source={x:Reference mylist}, Path=ParentBindingContext}" Command="{Binding ViewImageCommand}" CommandParameter="{Binding PictureBinary}"/>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label Grid.Row="0" Grid.Column="1" MaxLines="2" LineBreakMode="TailTruncation" Style="{StaticResource lblDarkBody}" Text="{Binding Name}" ></Label>
<Label Grid.Row="1" Grid.Column="1" Text="{local:Translate SKU}" Style="{StaticResource lblNormal}"></Label>
<Label Margin="35,0,0,0" Grid.Row="1" Grid.Column="1" Text="{Binding upc}" Style="{StaticResource lblNormal}" />
<Label Grid.Row="2" Grid.Column="1" Text="{local:Translate Stock}" Style="{StaticResource lblNormal}" VerticalOptions="Center" ></Label>
<Image Margin="45,0,0,0" Grid.Row="2" Grid.Column="1" VerticalOptions="Center" HorizontalOptions="StartAndExpand" Source="{Binding qtyonhand,Converter={StaticResource QuantityToColorConverter}}" />
<uc:CustomRatingBar Grid.Row="3" Grid.Column="1" Style="{StaticResource RatingsStyle}" x:Name="CusRatingBar" Rating="{Binding RatingSum}" />
<Image Grid.Row="4" Grid.Column="1" Source="in.png" HorizontalOptions="Start" VerticalOptions="Center"/>
<Label Margin="30,0,0,0" Grid.Row="4" Grid.Column="1" VerticalOptions="Center" Style="{StaticResource lblEmphasis}" Text="{Binding pricelist,StringFormat='Rs {0:#,0.#0}'}" ></Label>
<Image Grid.Row="4" Grid.Column="1" Margin="0,0,10,0" WidthRequest="30" HeightRequest="30" VerticalOptions="Center" Style="{StaticResource StockCachedImageStyle}" Source="heartdark.png" HorizontalOptions="End">
<Image.GestureRecognizers>
<TapGestureRecognizer BindingContext="{Binding Source={x:Reference mylist}, Path=ParentBindingContext}" Command="{Binding AddtoWishlistCommand}" CommandParameter="{Binding .}" />
</Image.GestureRecognizers>
</Image>
</Grid>
</ViewCell.View>

If you give the page in question an x:Name in your XAML you can then refer to the origional BindingContext (should be your ViewModel) while also having access to the item itself as BindingContext for the commandparameter. Looks something like this:
<ContentPage x:Name="MyContentPage"
....
<!--inside your DataTemple you can now reference the BindingContext of your page-->
Command="{Binding Path=BindingContext.HomeProductSelectedCommand, Source={x:Reference MyContentPage}} CommandParameter="{Binding .}"
…
This example passes the bindingcontext of the item (by default that's the item itself) to the command parameter

Xamarin forms Android Listview issue with ContextActions and GestureRecognizer

I'm writing an xamarin forms app. I have A ListView with custom cell (xaml):
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="Btn_delete_Clicked" CommandParameter="{Binding .}" Text="Удалить" IsDestructive="True" />
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Grid.Row="0" Grid.Column="0" Margin="5" VerticalOptions="Center"
HorizontalOptions="Center" Aspect="AspectFit" WidthRequest="170" HeightRequest="170" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Btn_fullscr_Clicked" />
</Image.GestureRecognizers>
</Image>
<Entry x:Name="EditTextPhoto" Placeholder="[Комментарий отсутствует]" Grid.Row="1" Grid.Column="0"
Margin="5" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" FontSize="14"
Text="{Binding Comment}" BackgroundColor="#44104e8b" IsEnabled="{Binding IsPreview}" TextColor="Black" HorizontalTextAlignment="Center" />
</Grid>
</ViewCell>
As you can see, I have ContextActions and a TapGestureRecognizer for my Image.
A have a bug on android: if you click on a view cell, the contextaction appears. ContextAction has to be done only on long press, as you know. But when I remove gesturerecognizer from Image, everything works fine.
Does anybody know how to workaround this issue? Thanks in advance.

Finally I've found a workaround for this issue. I added a transparent button in the same row where my image is and deleted tapgesturerecognizer. So the final code is:
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Clicked="Btn_delete_Clicked" CommandParameter="{Binding .}" Text="Удалить" IsDestructive="True" />
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding Image}" Grid.Row="0" Grid.Column="0" Margin="5" VerticalOptions="Center"
HorizontalOptions="Center" Aspect="AspectFit" WidthRequest="170">
</Image>
<Button Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" Clicked="Btn_fullscr_Clicked"
WidthRequest="170" VerticalOptions="FillAndExpand" BackgroundColor="Transparent" BorderColor="Transparent" />
<Entry x:Name="EditTextPhoto" Placeholder="[Комментарий отсутствует]" Grid.Row="1" Grid.Column="0"
Margin="5" VerticalOptions="FillAndExpand" HorizontalOptions="Fill" FontSize="14"
Text="{Binding Comment}" IsEnabled="{Binding IsPreview}" TextColor="Black" HorizontalTextAlignment="Center" />
</Grid>
</ViewCell>
Hope maybe it helps someone in future!

How to add rating bar in xamarin forms

here Im getting list of data to which Im assigning it to a listview... In that i need to display user ratings to every Item.. So when the user rating is $.. I need to display 4stars in greeen color and another 1 star in gray color.. Im unable to do this.. Can anyone please tell me
<ListView ItemSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="White" Padding="5" >
<Grid Padding="3" BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage HeightRequest="100" Aspect="AspectFill"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding Images}" Grid.Row="0" Grid.Column="0"/>
<!--<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<Label x:Name="Label"
Text="{Binding FileName}" />
<Label Text="uhfuiehuegirtj"/>
<Label Text="ufoidjgoidrjiojkgorij"/>
</StackLayout>-->
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding CourseName}" FontAttributes="Bold" TextColor="Black" Grid.Row="0" Grid.Column="0" LineBreakMode="WordWrap"/>
<Label Text="{Binding CourseDescription}" TextColor="Black" Grid.Row="1" Grid.Column="0" LineBreakMode="WordWrap"/>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal">
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img1"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img2"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img3"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img4"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img5"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal">
<Label Text="{Binding CoursePrice}" TextColor="Black" HorizontalTextAlignment="Start" FontAttributes="Bold" VerticalTextAlignment="Center"/>
<Button Image="wishlist.png" HorizontalOptions="Fill" BackgroundColor="Transparent" Clicked="btn_clicked"/>
</StackLayout>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

There are plenty of samples and controls out there. You don't really need to do it yourself. Syncfusion offers some nice controls for Xamarin. There is a free Community License too.
I think that's what you want -> https://www.syncfusion.com/products/xamarin