Xamarin Tabview Control With More Customization

It explain how to achieve the customized tabbed view/page in xamarin forms by using Xam.Tabview plugin.

Xamarin Forms Custom tab page or view

• Xam.tabview gives the custom tabview or tabpage support for Xamarin mobile applications. 
• We can design the tabview inside of any xamarin layouts like stacklayout or Grid or Relative layout
• We can add the content above or below the tab view component. But it's not possible in xamarin tabbed page. 
• We are not using any native code for this tabview. So, you can install this plugin in your xamain.Forms project and use the tab view design. 

Features

• Tab Header Customization
• Tab contet customization 
• Tab Header Positioning (Top/Bottom)
• Tab page/content change events
• Add tab view to any layouts like (Stack/absolute or grid etc.)

Steps to implement the custom tabview in Xamarin Forms,

• Install the xam.tabview plugin in xamarin forms application.
• Create the tabview control inside of any layouts like stacklayout or Grid or Ralative layout.
• We will create the control by C# code behind or using MVVM Xaml.

Sample Code C# Code

var stack = new StackLayout();
XFTabControl tab = new XFTabControl
{
   //Apply the Styles to Tab
   HeaderColor = Color.Gray,
   HeaderHeight = 30,
   VerticalOptions = LayoutOptions.FillAndExpand,
   //Change the Header Position.
   Position = Position.Top
};
//Create the Tab Page
XFTabPage page1 = new XFTabPage();
//Create the Header title
page1.Header.Title = "Tab1";
Label content1 = new Label
{
   Text = "This Page Displays Tab1 Content"
};
//Assign the tab body content.
page1.Content = content1;
//Add the Page to tab control
tab.AddPage(page1);
//Add the tab control to stack layout
stack.Children.Add(tab);

Code Explanantion

• Create the stacklayout for tabview parent.
• Create the XFTabControl for tab view.
• Add the XFTabPage inside the tab control using the AddPage().
• Add the content views inside the tab pages. 

Like add more tabs to tabview.

 

Nuget link - Xam.TabView

Sample link - TabviewSample

 

Sample output