How to make the dialog (that pops up when tapping a picker) have rounded corners in .net MAUI?

FabianK 21

I would like to customize the dialog the pops up when tapping a picker/datepicker in .NET MAUI (Android) by changing the corner radius to make it have rounded corners. I did play around a little with custom handlers but did not manage to achieve the desired effect.

I know that I can work with borders to make the picker itself have rounded corners but this effect does not translate to the popup/dialog that opens upon tapping the picker.

I'd really appreciate help with this - did not find anything truly helpful so far.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 72,251 Reputation points Microsoft Vendor

2023-07-25T09:27:44.5733333+00:00

I did play around a little with custom handlers but did not manage to achieve the desired effect.

Could you minimize code to just what is needed to reproduce the problem?

What is your MAUI version?

If you cannot set it in handler, you can create an entry, when you click this entry and popup a window with popup, you can set rounded corners for this popup window.

FabianK 21

I am using .NET 7. This is what I tried so far but I didn't see any changes.


        Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping(nameof(IView.Background), (handler, view) =>
        {
#if ANDROID        

            handler.PlatformView.BackgroundTintList = 		 ColorStateList.ValueOf(Colors.Transparent.ToAndroid());
            		handler.PlatformView.SetBackgroundColor(Colors.Transparent.ToAndroid());
            handler.PlatformView.SetBackgroundDrawable(GetDrawable());
                                
           
#elif IOS

#endif
        });

#if ANDROID
    private Drawable GetDrawable()
    {

        var context = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity;
        //var context = Android.App.Application.Context;

        var radius = context.ToPixels(30);
        var shape = new GradientDrawable();
        shape.SetShape(ShapeType.Rectangle);
        shape.SetColor(Android.Graphics.Color.White);
        shape.SetCornerRadius(radius);
        return shape;

    }
#endif

I have already thought about implementing it through an entry and a popup but that would require me to create an additional popup for every picker which I have quite a lot so I thought a handler would be nicer since it automatically targets all pickers.

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 72,251 Reputation points Microsoft Vendor

2023-08-01T07:20:56.0666667+00:00

You can add a break point in the handler.PlatformView in this line for android, it is Edittext, when you click the edittext, it will popup a dialog, you need to rewrite the dialog like this similar thread, So I advice you to use MAUI cummuity toolkit popup

Share via

How to make the dialog (that pops up when tapping a picker) have rounded corners in .net MAUI?