Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

TabbedPage - tabs on top iOS

arturmullerarturmuller Member ✭✭✭

Hi,

Is it possible without any 3rd party library to simply put the tabs of a TabbedPage on the top of the screen in iOS? (Like this library is doing: https://github.com/NAXAM/toptabbedpage-xamarin-forms)

Second question on the same topic is how can I change the color of the Tabs for iOS?

Best regards

Best Answer

  • ColeXColeX Member, Xamarin Team Xamurai
    edited March 30 Accepted Answer

    Is it possible without any 3rd party library to simply put the tabs of a TabbedPage on the top of the screen in iOS?
    Second question on the same topic is how can I change the color of the Tabs for iOS?

    Yes, you only need a custom renderer for Page , change the position of Tabbar and Page itself in method ViewDidLayoutSubviews.

    Code

    [assembly: ExportRenderer(typeof(Page), typeof(MyPageRenderer))]
    namespace App2.iOS
    {
        class MyPageRenderer : PageRenderer
        {
    
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
    
                //move up Tab
                var tab = this.TabBarController.TabBar;
                var frame = tab.Frame;
                if (this.NavigationController != null)
                {             
                    frame.Y = 64;          
                }
                else
                {
                    frame.Y = 0;
                }
    
                tab.Frame = frame;
    
    
                //move down this.View
                var viewFrame = View.Frame;
                viewFrame.Y = tab.Frame.Height;
                View.Frame = viewFrame;
    
                //color
                tab.BarTintColor = UIColor.Purple;          
            }
        }
    }
    

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited March 30 Accepted Answer

    Is it possible without any 3rd party library to simply put the tabs of a TabbedPage on the top of the screen in iOS?
    Second question on the same topic is how can I change the color of the Tabs for iOS?

    Yes, you only need a custom renderer for Page , change the position of Tabbar and Page itself in method ViewDidLayoutSubviews.

    Code

    [assembly: ExportRenderer(typeof(Page), typeof(MyPageRenderer))]
    namespace App2.iOS
    {
        class MyPageRenderer : PageRenderer
        {
    
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
    
                //move up Tab
                var tab = this.TabBarController.TabBar;
                var frame = tab.Frame;
                if (this.NavigationController != null)
                {             
                    frame.Y = 64;          
                }
                else
                {
                    frame.Y = 0;
                }
    
                tab.Frame = frame;
    
    
                //move down this.View
                var viewFrame = View.Frame;
                viewFrame.Y = tab.Frame.Height;
                View.Frame = viewFrame;
    
                //color
                tab.BarTintColor = UIColor.Purple;          
            }
        }
    }
    

Sign In or Register to comment.