Xamarin Datapicker how customize it to be an calender image - xamarin

Question

I'm new to Xamarin and I would like to know how can I set the DatePicker to be an image for example a calender instead of being text with a line under it (default).
The goal is to have an entry and next to it a calender image to have it's behaviour like a DatePicker like in the image below:
I have the following code but i have DatePicker commented. I tried to set isVisible = 'false' and have the image on it's position but it didn't work.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="360" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame Style="{StaticResource FrameStyle}">
<controls:CustomEntry x:Name="DataDocEntry" Grid.Column="0" Text="{Binding Date, StringFormat='{0:d/M/yy}', Source={x:Reference MainDatePicker}}" IsEnabled="false" Style="{StaticResource EntryStyle}" />
</Frame>
<!--<DatePicker x:Name="MainDatePicker" Grid.Column="1" MinimumDate="1/1/2018" MaximumDate="12/31/2030" HeightRequest="30" />-->
<Image VerticalOptions="Center" Grid.Column="1" HorizontalOptions="End" Source="icalendar.png" HeightRequest="30" WidthRequest="30">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Calendario_Clicked" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
I also created a DatePickerRenderer to customize the DatePicker to try to set it's background as image but wasn't sucessful either.
DatePickerRenderer.cs
using Android.Content;
using FormsApp.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(DatePicker), typeof(MyRenderer))]
namespace FormsApp.Droid
{
class MyRenderer : DatePickerRenderer
{
public MyRenderer(Context context) : base(context)
{
}
protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
{
base.OnElementChanged(e);
if (Control != null)
{
//Control.Background = "icalendar.png";
}
}
}
}
Best regards

Answer 1

You could hide the DataPicker and use the Focus in the click event of image.
xaml:
<StackLayout Orientation="Horizontal" VerticalOptions="StartAndExpand">
<Entry x:Name="entry" />
<Image
HeightRequest="20"
HorizontalOptions="EndAndExpand"
Source="calendar.png"
WidthRequest="20">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Image.GestureRecognizers>
</Image>
<DatePicker
x:Name="dataPicker"
IsVisible="false"
Unfocused="dataPicker_Unfocused" />
</StackLayout>
Code behind:
private void dataPicker_Unfocused(object sender, FocusEventArgs e)
{
entry.Text =dataPicker.Date.ToString();
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
dataPicker.Focus();
}