Xamarin tabbed page slide tab bar instead of “more” button

Question

I am working with Xamarin Forms creating both Android and iOS application. I have tabbed page - at Android tabbed page is being shown at top and when I have a lot of tabs, not all of them are being shown, but they can be slided in horizontal direction. At iOS when I have more than 5 tabs, then there is a "more button" created, that I can open and see rest of tabs.

How to delete "more" button when have more than 5 tabs at iOS tabbed page and put slideable tabs (similar to android) ?

Answer 1

You can use Naxam.TopTabbedPage.Forms from Nuget

Usage:

in your iOS project AppDelegate.cs file

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    global::Xamarin.Forms.Forms.Init();

    TopTabbedRenderer.Init(); //add this line

    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
}

And in your forms

in xaml

<?xml version="1.0" encoding="utf-8" ?>
<forms:TopTabbedPage             
         xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:App11"
         x:Class="App11.MainTabbedPage"
         xmlns:forms="clr-namespace:Naxam.Controls.Forms;assembly=Naxam.TopTabbedPage.Forms"
         BarBackgroundColor="#2196F3">


  <local:Page1 Title="PAGE 1"/>
  <local:Page2 Title="PAGE 2"/>
  <local:Page3 Title="PAGE 3"/>
  <local:Page4 Title="PAGE 4"/>
  <local:Page5 Title="PAGE 5"/>


</forms:TopTabbedPage>

in xaml.cs

using Naxam.Controls.Forms;

namespace TopTabbedPageDemo
{

 public partial class MainTabbedPage : TopTabbedPage
  {
      public MainTabbedPage()
      {
          InitializeComponent();
      }
  }
} 

Answer 2

Is it possible to move first tab title starting position that it is not cut in half? the problem happens only if there are a lot of tabs. After moving between tabs the problem disapears, but when page is initialize it happens.

Answer 3

Try to setup the CurrentPage to the corresponding Content Page; ie;

if you want 1st contentpage to display while initialization set as;

this.CurrentPage = tab1; // where tab1 is the x:Name for the contentpage

hope it helps;

thanks