add a corner radius to tapped page in xamarin forms

Question

how I can add a corner radius to a tapped page and use it in MVVM with prism like this UI in xamarin forms

Answer 1

Hello,

Welcome to Microsoft Q&A!

We can implement it on each specific platform .

Android

Add a shape xml and apply it as background on Tabbar.xml

Refer to https://forums.xamarin.com/discussion/comment/395014/#Comment_395014 .

iOS

Create the custom renderer of TabbedPage ,refer to https://stackoverflow.com/a/55163797/8187800 .

   [assembly:ExportRenderer(typeof(TabbedPage),typeof(MyRenderer))]  
   namespace FormsApp.iOS  
   {  

       class MyRenderer : TabbedRenderer  
       {  

           public override void ViewDidLoad()  
           {  
               base.ViewDidLoad();  

               this.TabBar.Layer.MasksToBounds = true;  
               this.TabBar.Translucent = true;  
               //this.TabBar.BarTintColor = UIColor.White;  
               this.TabBar.BarStyle = UIBarStyle.Black;  
               this.TabBar.Layer.CornerRadius = 20;  
               this.TabBar.Layer.MaskedCorners = CoreAnimation.CACornerMask.MaxXMinYCorner | CoreAnimation.CACornerMask.MinXMinYCorner;  
           }  

       }  

   }  

Thank you.

---

If the response is helpful, please click "Accept Answer" and upvote it.
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.