UI changes required for Datepicker control in .Net MAUI.

Question

Hi Team,

I am working on a .Net MAUI app (in Visual Studio 2022), Android emulator used is Pixel 5 API 33.

I have a requirement where I have to show MAUI Date Picker control in a box like view and an image(like calendar ) in same box.

I am able to achieve above requirement, I am facing below 2 issues -

1. DatePicker control is causing one horizontal line, I need to remove this line so that only date is visible in the box. So far all changes I have done in XAML file, it would be great if the solution could involve change in XAML file only.
2. In above mentioned box, I could see that when I am clicking on date text, only then date popup gets shown. When I click on the image, as expected there is no date selection popup gets shown. Is there a way that even after clicking on image control, date selection pop up could get shown.

Please let me know if any of above requirements are not clear, I will clarify.

Thanks,

Salil

Answer 1

Hello,

You'll need to use Handler to do both, please refer to the code below:

DatePicker control is causing one horizontal line, I need to remove this line

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
#if ANDROID
    var v = test.Handler.PlatformView as EditText;
    GradientDrawable gd = new GradientDrawable();
    gd.SetColor(global::Android.Graphics.Color.Transparent);
    // handler.PlatformView.SetBackgroundDrawable(gd); deprecated  
    v.SetBackground(gd);
#endif
}

Is there a way that even after clicking on image control, date selection pop up could get shown.

In xaml:

<VerticalStackLayout Padding="20">
    <DatePicker x:Name="test"/>
    <Image Source="dotnet_bot.png" Focused="Image_Focused">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
                          NumberOfTapsRequired="1" />
        </Image.GestureRecognizers>
    </Image>
</VerticalStackLayout>

In code-behind

private void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
{
#if ANDROID
    var v = test.Handler.PlatformView as EditText;
    v.CallOnClick();
#endif
}

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.