Forum Xamarin Xamarin.Forms

How to make Top Tab Bar to Top Bar ?

RedRaRedRa Member ✭✭✭

Hi all,

According the documentation it is only possible to display Top Tab Bar to Bottom Bar:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs#bottom-and-top-tabs

But how to move Top Tab Bar to Top ? For example to have navigation at the top ?
Is it possible at all ?

Answers

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    So you just want the tab bar without a navigation bar above it?

  • RedRaRedRa Member ✭✭✭

    @JoeManke said:
    So you just want the tab bar without a navigation bar above it?

    Yes

  • JoeMankeJoeManke USMember ✭✭✭✭✭
    edited August 21

    I don't know if this will work well with top tabs, but try setting Shell.NabBarIsVisible=false.

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/configuration#disable-the-navigation-bar

  • RedRaRedRa Member ✭✭✭

    @JoeManke said:
    I don't know if this will work well with top tabs, but try setting Shell.NabBarIsVisible=false.

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/configuration#disable-the-navigation-bar

    No, I want something like https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page Tabbed Page with icons at the top (not the bottom)

  • jezhjezh Member, Xamarin Team Xamurai

    For android:

    There is a property ToolbarPlacement, you can set it's value to Top or Bottom:

           android:TabbedPage.ToolbarPlacement="Top"
    

    For this, you can refer to the official sample code :AndroidTabbedPageSwipePage.xaml

    In IOS, you can use PageRenderer to achieve this .

    [assembly: ExportRenderer(typeof(ContentPage), typeof(PageiOS))]
    namespace TabBarDemo1.iOS.Renderer
    {
    public class PageiOS : PageRenderer
    {
        public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();
    
            nfloat tabSize = 44.0f;
    
            UIInterfaceOrientation orientation = UIApplication.SharedApplication.StatusBarOrientation;
    
            if (UIInterfaceOrientation.LandscapeLeft == orientation || UIInterfaceOrientation.LandscapeRight == orientation)
            {
                tabSize = 32.0f;
            }
    
            CGRect rect = this.View.Frame;
            rect.Y = this.NavigationController != null ? tabSize : tabSize+20;
            this.View.Frame = rect;
    
            if(TabBarController != null) {
                CGRect tabFrame = this.TabBarController.TabBar.Frame;
                tabFrame.Height = tabSize;
                tabFrame.Y = this.NavigationController != null?64:20;
                this.TabBarController.TabBar.Frame = tabFrame;
                this.TabBarController.TabBar.BarTintColor = UIColor.Red;
            }
        }
    }
    }
    

    The result is:

  • RedRaRedRa Member ✭✭✭

    @jezh said:
    For android:

    There is a property ToolbarPlacement, you can set it's value to Top or Bottom:

           android:TabbedPage.ToolbarPlacement="Top"
    

    For this, you can refer to the official sample code :AndroidTabbedPageSwipePage.xaml

    In IOS, you can use PageRenderer to achieve this .

    [assembly: ExportRenderer(typeof(ContentPage), typeof(PageiOS))]
    namespace TabBarDemo1.iOS.Renderer
    {
    public class PageiOS : PageRenderer
    {
        public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();
    
            nfloat tabSize = 44.0f;
    
            UIInterfaceOrientation orientation = UIApplication.SharedApplication.StatusBarOrientation;
    
            if (UIInterfaceOrientation.LandscapeLeft == orientation || UIInterfaceOrientation.LandscapeRight == orientation)
            {
                tabSize = 32.0f;
            }
    
            CGRect rect = this.View.Frame;
            rect.Y = this.NavigationController != null ? tabSize : tabSize+20;
            this.View.Frame = rect;
    
            if(TabBarController != null) {
                CGRect tabFrame = this.TabBarController.TabBar.Frame;
                tabFrame.Height = tabSize;
                tabFrame.Y = this.NavigationController != null?64:20;
                this.TabBarController.TabBar.Frame = tabFrame;
                this.TabBarController.TabBar.BarTintColor = UIColor.Red;
            }
        }
    }
    }
    

    The result is:

    Okay, but is it possible to do for Xamarin.Forms Shell ?

Sign In or Register to comment.