Awesome

TabStrip for Xamarin.Forms

Tab Strip control for Xamarin.Forms

Screenshots

iOS	Android	UWP

Setup

Available on NuGet:
Install into your PCL/.NET Standard and Client Projects

Build

CI NuGet Feed: https://ci.appveyor.com/nuget/tabstrip

Platform Support

TabStrip is available for use in Xamarin.Forms only targetting the following supported platforms.

Platform	Supported	Version
Xamarin.Android	Yes	API 15 +
Xamarin.iOS	Yes	iOS 10 +
Xamarin 10 UWP	Yes	16299 +
macOS	No
linux	No
tvOS	No
watchOS	No

Usage

UWP (Known Issue)

Add CarouselView.FormsPlugin as a nuget reference otherwise it will not work

iOS, Droid and UWP

Initialize the renderers in your iOS and Android projects

Xamarin.Forms.Init();
TabStripRenderer.Init();

XAML:

Add the namespace in the xmlns:

xmlns:plugin="clr-namespace:TabStrip.FormsPlugin.Abstractions;assembly=TabStrip.FormsPlugin.Abstractions"

Add the control:

<plugin:TabStripControl Position="{Binding CurrentPosition}"
                        ItemsSource="{Binding Views}" />

Add the following code to your BindingContext. The ItemsSource property needs to be mapped to an IEnumerable<TabModel> where TabModel is provided in the TabStrip.FormsPlugin.Abstractions namespace.

BindingContext = new 
{
	Views = new ObservableCollection<TabModel>(new [] 
	{
		new TabModel
        {
            Header = new Tuple<View, object>(new HeaderView(), new { Title = "Tab 1" }),
            View = new Tuple<View, object>(new HelloView(), new HelloPageModel())
        },
        new TabModel
        {
            Header = new Tuple<View, object>(new HeaderView(), new { Title = "Tab 2" }),
            View = new Tuple<View, object>(new HelloView(), new HelloPageModel())
        }

	});
};

Bindable Properties

Property	Description	Default Value
Position	Gets or Sets current tab position of the tab strip.	`0`
ItemsSource	Gets or Sets the `IEnumerable<TabModel>` where the `TabModel` defines the Tab Name and the View/ViewModel relationship for each Tab	`null`
ShowArrows	Gets or Sets the `bool` value that determines if navigation arrows will appear on top of the content area	`fakse`
LeftArrow	Gets or Sets the `ImageSource` for the `LeftArrow` which is displayed when the tab can navigate left	Embedded Left Arrow Image
RightArrow	Gets or Sets the `ImageSource` for the `RightArrow` which is displayed when the tab can navigate right	Embedded Right Arrow Image

Roadmap

Minimal Viable Product (MVP)
Windows Support
macOS Support
linux Support
Native Support

Minimal Viable Product

Implement basic cross-platform Tabstrip that supports Android and iOS via Xamarin.Forms

Windows Support

Implement Windows UWP support via Xamarin.Forms

macOS Support

Implement macOS support via Xamarin.Forms

linux Support

Implement linux support via Xamarin.Forms

Native Support

Implement Xamarin Navite support so it can be consumed in a Xamarin Native project instead of Xamarin.Forms. This will require a larger code re-write since it will be using Xamarin.Forms wrappers prior to this release

Created By: @Andrew_Hoefling

Twitter: @Andrew_Hoefling
Blog: andrewhoefling.com

History

project started from this conversation: https://github.com/alexrainman/CarouselView/issues/232#issuecomment-338496021

Xamarin Dependencies

Thanks to other plugin creators to make this plugin possible

Carousel View

License

The MIT License (MIT) see License File