SegmentedControl

SegmentedControl

Provides a simple way to choose and option from a linear set of two or more segments.

Features

• Supports displaying the segments with text, font icons, or both.
• Different options to populate the control.
• Supports customizing text and other UI elements in an easy way.
• ControlTemplate support.

Populate

Can populate the segmented control with strings as a data source using the ItemsSource property.

<controls:SegmentedControl
	BackgroundColor="Black"
	BackgroundColorSelected="DarkGray"
	TextColor="LightGray"
	TextColorSelected="White">
	<controls:SegmentedControl.ItemsSource>
		<x:Array Type="{x:Type x:String}">
			<x:String>Item 1</x:String>
			<x:String>Item 2</x:String>
			<x:String>Item 3</x:String>
			<x:String>Item 4</x:String>
		</x:Array>
	</controls:SegmentedControl.ItemsSource>
</controls:SegmentedControl>

Also, can populate the segmented control adding SegmentedItems as below.

<controls:SegmentedControl
	HeightRequest="50"
	CornerRadius="12"
	BackgroundColor="DarkViolet"
	BackgroundColorSelected="Violet"
	TextColor="LightGray"
	TextColorSelected="White">
	<controls:SegmentedItem
		Text="Item 1"
		Icon="rate.png"/>
	<controls:SegmentedItem
		Text="Item 2"
		Icon="shield.png"/>
	<controls:SegmentedItem
		Text="Item 3"
		Icon="tag.png"/>
</controls:SegmentedControl>

Customization

Of course, we can customize text inside the segmented control can be customized by its font size, color, and its font family.

In addition, we can enable or disable the segmented control shadow using the HasShadow property.

<controls:SegmentedControl
	HasShadow="True">
</controls:SegmentedControl>

Can customize the corner radius using the CornerRadius property.

<controls:SegmentedControl
	CornerRadius="12">
</controls:SegmentedControl> 

We can customize the customization properties for the selected element with properties such as:

• BackgroundColorSelected
• TextColorSelected
• FontSizeSelected
• FontAttributesSelected
• FontFamilySelected
• Etc

<controls:SegmentedControl
	BackgroundColorSelected="Green"
	TextColorSelected="White"
	FontSizeSelected="12"
	FontAttributesSelected="Bold">
</controls:SegmentedControl>

We can use icons with the Icon property:

And combine icon and text:

As with the rest of the controls, using the ControlTemplate property we can define our own template achieving the desired appearance:

SelectedIndex

When users navigate from one item to another, selection is changed and the SelectedIndex value is updated. The segmented control provides the SelectionIndexChanged event.