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: alexrainman/CarouselView#232 (comment)

Xamarin Dependencies

Thanks to other plugin creators to make this plugin possible

• Carousel View

License

The MIT License (MIT) see License File