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

dg2k 1,396 Reputation points
2022-09-27T11:41:46.237+00:00

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?

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,709 questions
0 comments No comments
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 45,411 Reputation points Microsoft Vendor
    2022-09-28T02:28:19.07+00:00

    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.


0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.