question

EyeveyE-7256 avatar image
0 Votes"
EyeveyE-7256 asked ColeXia-MSFT edited

Xamarin Forms - How to create such shape?

I wanted to create such navigation at the bottom of the apps. What is the best way to do this? I tried the customer renderer but is too tedious.

85710-image.png


dotnet-xamarin
image.png (9.9 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered ColeXia-MSFT edited

Hello,

Welcome to Microsoft Q&A!

Which platform do you develop on ?

If on iOS , we can customize the tabbar with Custom renderer , check my post .

I made a little modification to meet your requirement .

iOS Custom Renderer

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabRenderer))]
namespace FormsA.iOS
{
    public class MyTabRenderer : TabbedRenderer
    {
        public override void ViewDidLoad()
        {
            base.ViewDidLoad();


            for(int i = 0; i < 3; i++)
            {
                UIButton btn = new UIButton(frame: new CoreGraphics.CGRect(0, 0, i==1?80:60, i == 1 ? 80 : 60));
                btn.Tag = i;
                this.View.Add(btn);

                //customize button
                btn.ClipsToBounds = true;
                btn.Layer.CornerRadius = btn.Frame.Width/2;
                btn.BackgroundColor = UIColor.Red;
                btn.AdjustsImageWhenHighlighted = false;

                //move button up
                CGPoint center = this.TabBar.Center;
                center.X = center.X + (i-1) * 100;
                center.Y = center.Y - 20;
                btn.Center = center;

                //button click event
                btn.TouchUpInside += (sender, ex) =>
                {
                    //use mssage center to inkove method in Forms project

                    nint tag = ((UIButton)sender).Tag;
                    MessagingCenter.Send<object, int>(this,"Hi", (int)tag);
                };
            }

            //you need to create a curving background image and set here.
            this.TabBar.BackgroundImage = UIImage.FromBundle("yourimage.png");
       

            //disable original behavior
            this.ShouldSelectViewController += (UITabBarController tabBarController, UIViewController viewController) =>
            {          
                return false;               
            };
        }
    }
}

Forms

//xaml


    <ContentPage Title="" BackgroundColor="Green"/>
    <ContentPage Title="" BackgroundColor="Red"/>
    <ContentPage Title="" BackgroundColor="Blue"/>

//code behind 

  public TabbedPage1()
        {
            InitializeComponent();

            //this.BarBackgroundColor = Color.Yellow;
            //this.BarTextColor = Color.Red;

            MessagingCenter.Subscribe<object, int>(this, "Hi", (sender,index) =>
            {
                this.CurrentPage = this.Children[index];
            });
        }


86092-capture.png


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.






capture.png (45.0 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.