Skip to content
A Segmented Button Control in pure Xamarin.Forms!
C#
Branch: master
Clone or download
Udara Alwis
Udara Alwis old packages
Latest commit ba0802b Nov 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
XFSegmentedControl package update Nov 7, 2018
nuget
screenshots pingggg Aug 3, 2018
.gitignore blingo Aug 3, 2018
LICENSE pling Aug 9, 2018
README.md read me Aug 11, 2018
XFSegmentedControl.sln ping Aug 3, 2018

README.md

A Segmented Button Control for Xamarin.Forms!

Segmented Button Control for Xamarin.Forms (Android, iOS, UWP) with awesome features, such as dynamically adding or removing Tab Button elements, setting Colors, and Selected Index at run time with full native look and feel. Built from pure Xamarin.Forms, lightweight, no custom renders nor platform implementations, and it's awesome! ;)

Setting it up:

XAML Set up

xmlns:xfsegmentedcontrol="clr-namespace:Udara.Plugin.XFSegmentedControl;assembly=Udara.Plugin.XFSegmentedControl"
<xfsegmentedcontrol:SegmentedControl
	x:Name="SegmentedControl1"
	PrimaryColor="White"
	SecondaryColor="Black"
	SelectedTabIndex="2"
	SelectedTabIndexChanged="SegmentedControl1_SelectedTabIndexChanged">
	<xfsegmentedcontrol:SegmentedControl.TabButtonsSource>
		<x:Array Type="{x:Type x:String}">
			<x:String>Tab 1</x:String>
			<x:String>Tab 2</x:String>
			<x:String>Tab 3</x:String>
			<x:String>Tab 4</x:String>
		</x:Array>
	</xfsegmentedcontrol:SegmentedControl.TabButtonsSource>
</xfsegmentedcontrol:SegmentedControl>

SelectedTabIndexChanged Event

private void SegmentedControl1_SelectedTabIndexChanged
		(object sender, SelectedTabIndexEventArgs e)
{
	Label1.Text 
		= $"Currently selected - Tab {e.SelectedTabIndex + 1}";
}

Bindable Properties

TabButtonsSource: Gets or sets Item Source of Tabs, type of IEnumerable

SelectedTabIndex: Gets or sets the current selected Tab/Button/Segment index, type of int

PrimaryColor: Gets or sets the Primary color of the element, type of Color

SecondaryColor: Gets or sets the Secondary color of the element, type of Color

Event Handler / Command

Fires when the selected Tab/Button/Segment is changed

SelectedTabIndexChanged: Gets SelectedTabIndexEventArgs contains updated index, SelectedTabIndex, type of int

SelectedTabIndexChangedCommand: Gets the updated index as a param, type of int

How I built it?

A Segmented Button Control, or as some call it Grouped Button Control, or Tabbed Button Control or some even call the Rocker Control, is what I'm gonna share with yol today, built 100% from Xamarin.Forms!

Yeah such a platform specific UI element, right out of Xamarin.Forms without a single line of native code, how's that even? Well if you've been following my blog for a while, you know that I'm all about pushing them limits of any given platform and achieve the impossibru! ;)

Started this off as a fun experientant implementation which blew into a fool-proof awesomeness which I have broken into two parts, Simple and Advanced implementation in my blog!

Part 1: Simple Segmented Button Control in pure Xamarin.Forms!

A very simple Segmented Button Control which has two Tab Button elements but with cool features such as setting Text, Colors and SelectedIndex, etc... And most of all with full looks and feel of a native Segmented Button control!

Read the full blog post: https://theconfuzedsourcecode.wordpress.com/2018/07/09/a-segmented-control-in-pure-xamarin-forms/

Part 2: Advanced Segmented Button Control in pure Xamarin.Forms!

An advanced Segmented Button Control which has awesome features such as dynamically adding or removing Tab Button elements, setting Colors, and Selected Tab index at run time with full native features and looks and feel!

Read the full blog post: https://theconfuzedsourcecode.wordpress.com/2018/08/02/advanced-segmented-button-control-in-pure-xamarin-forms/

more awesome stuff...

just to show how powerful this awesomeness is, I cooked up bit of a cool demo right here running on iOS and Android!

FULLY DYNAMIC | ADDING/REMOVE TABS | SWITCHING COLORS | SWITCHING TAB

You can’t perform that action at this time.