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
  1. var stack = new StackLayout();
  2. XFTabControl tab = new XFTabControl
  3. {
  4. //Apply the Styles to Tab
  5. HeaderColor = Color.Gray,
  6. HeaderHeight = 30,
  7. VerticalOptions = LayoutOptions.FillAndExpand,
  8. //Change the Header Position.
  9. Position = Position.Top
  10. };
  11. //Create the Tab Page
  12. XFTabPage page1 = new XFTabPage();
  13. //Create the Header title
  14. page1.Header.Title = "Tab1";
  15. Label content1 = new Label
  16. {
  17. Text = "This Page Displays Tab1 Content"
  18. };
  19. //Assign the tab body content.
  20. page1.Content = content1;
  21. //Add the Page to tab control
  22. tab.AddPage(page1);
  23. //Add the tab control to stack layout
  24. 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
Xamarin Custom Tabview Or Tabbed Page