How do you achieve round edges for controls such as Entry, Editor and Picker for MAUI Android?

Question

How do you achieve round edges for controls such as Entry, Editor and Picker for MAUI Android?

dg2k 1,416

This is my follow-up question to this one, and would like to know how to customize controls for corner smoothing effect using Maui Handlers.

Specifically, how do you apply Maui Handlers to achieve round corners for controls like Entry, Editor and Picker, same smooth effect you get with the CornerRadius property for Button control?

Accepted answer

0 additional answers

Your answer

Answer 1

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Microsoft External Staff

Hello,

It is recommended to use Border to customize controls for corner or shape.

For instance, you could setting the default Border style in Style.xaml as the following:

   <Style TargetType="Border">  
       <Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />  
       <Setter Property="StrokeShape" Value="RoundRectangle 10,10,10,10"/>  
       <Setter Property="StrokeThickness" Value="1"/>  
   </Style>

Then, you could use Border in your pages as:

   <Border >  
       <Entry/>  
   </Border>

You could refer to Border to get more details.

Update:

You could also use handler to setting corners, please refer to the following code:

   Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(nameof(IView.Background), (handler, view) =>   
           {  
               if (view is Entry)  
               {  
   #if ANDROID  
                   float[] outerRadii = { 20, 20, 20, 20, 20, 20, 20, 20 };  
                   RoundRectShape roundRectShape = new RoundRectShape(outerRadii, null, null);  
                   var shape = new Android.Graphics.Drawables.ShapeDrawable(roundRectShape);  
                   shape.Paint.Color = Android.Graphics.Color.Black;  
                   shape.Paint.StrokeWidth = 5;  
                   shape.Paint.SetStyle(Android.Graphics.Paint.Style.Stroke);  
                   handler.PlatformView.SetBackground(shape);  
                   handler.PlatformView.SetPadding(30, 30, 30, 30);  
   #elif IOS || MACCATALYST  
           ...  
   #elif WINDOWS  
           ...  
   #endif  
               }  
           });

Update:

SetBackground and SetBackgroundColor can not work together, therefore, you need to use shape.Paint.SetStyle(Android.Graphics.Paint.Style.Fill); or shape.Paint.SetStyle(Android.Graphics.Paint.Style.FillAndStroke); to fill the background color.

Important: You need to use nameof(IView.Background), as your handle event name.

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.

dg2k 1,416 Reputation points

2022-09-28T05:10:05.55+00:00

Thank you @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.)

I was avoiding the use of Border assuming it has an impact on performance. I am following advice that unless absolutely necessary container elements are better avoided.

I was hoping that Maui handlers can be used to customize controls close to their native counterparts, and also can modify a number of things at once. For example, even if I use a border I will still need to make an element borderless, otherwise looks ugly. Don't kow if possible but my thinking is that with handlers more control is possible.

If the handler approach is definitely impossible, I would then consider custom rendering to remove existing border and then use Border element as you suggest. I thought Maui simplified this route but I could be wrong.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-09-28T08:15:01.897+00:00

I've updated my answer about how to use handler to achieve it, please check it.:)
dg2k 1,416 Reputation points

2022-09-28T21:36:11.02+00:00

Thank you so much @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) .

Yes I can achieve round corners but there is one minor issue I am having and I am sure you have an answer for this. Experimented with some modifications but no luck.

The issue is that if the handler is applied, I cannot set the Background or BackgroundColor property of the elements.
It is as if the handler disables background definition. The only time I can set Background or BackgroundColor as desired is if change Line #9 0f your code to Transparent color as :

shape.Paint.Color = Android.Graphics.Color.Transparent;

Your code does two things: (1) sets smooth edges as desired, and (2) defines the border stroke color. That's fantastic. But somehow this has one downside as I experimented: it inhibits the definition of Background or BackgroundColor.

Can you please look into the code that allows me element Background to be defined in XAML?
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-09-29T02:07:50.883+00:00

I've updated my answer, please check it.
dg2k 1,416 Reputation points

2022-09-30T08:15:32.423+00:00

Sorry to prolong this @Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) .

When I say Background and BackgroundColor, I mean the setting in XAML.

The XAML color setting doesn't work unless the setting in the handler is set to Transparent color, hence:

shape.Paint.Color = Android.Graphics.Color.Transparent;

Could you please comment on if I can set the border round in the handler (which is already possible), but at the same time if possible to set the element background color in XAML?

My suspicion is that what is done in the handler impedes what I want to do in XAML but I could be wrong.
With thanks.
Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff

2022-09-30T09:05:06.517+00:00

Could you please comment on if I can set the border round in the handler (which is already possible), but at the same time if possible to set the element background color in XAML?

No, you can not use both of them at the same time.
dg2k 1,416 Reputation points

2022-09-30T09:20:47.007+00:00

Ok, that's still as good to know. Many thanks.

Share via

How do you achieve round edges for controls such as Entry, Editor and Picker for MAUI Android?

0 additional answers

Your answer