Getting Started

This article demonstrates how to create a sample application that contains RadSegmentedControl.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:

You can find the assemblies needed by the control in the Required Telerik Assemblies article.

Populating with data

The segment control allows you to work with two types of data - string and image. You can use the ItemsSource property of RadSegmentedControl to provide IEnumerable collection of strings or image sources. The control will display a segment for each item in the items source.

Setting segment colors

You can set the background of the segments via the SegmentBackgroundColor property. The color will be applied to all segments except the selected one. To change the background of the selected item you can set the SelectedSegmentBackgroundColor

To set the text color of the strings in the items via the SegmentTextColor property. The color of the selected segment can be set via the SelectedSegmentTextColor property.

You can find an example with the selected color properties in the Selection article.

Setting up RadSegmentControl

To use the tabview control you can include the following namespaces:

xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
using Telerik.XamarinForms.Input;

To display any segments you can set the control's ItemsSource property and populate it with some data.

<telerikInput:RadSegmentedControl x:Name="segmentControl"
                                  HeightRequest="60"
                                  VerticalOptions="Start">
    <telerikInput:RadSegmentedControl.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Popular</x:String>
            <x:String>Library</x:String>
            <x:String>Playlists</x:String>
            <x:String>Friends</x:String>
        </x:Array>
    </telerikInput:RadSegmentedControl.ItemsSource>
</telerikInput:RadSegmentedControl>
RadSegmentedControl segmentControl = new RadSegmentedControl()
{
    VerticalOptions = LayoutOptions.Start, HeightRequest = 60,
    ItemsSource = new List<string>() { "Popular", "Library", "Playlists", "Friends" },                
};

Figure 1: RadSegmentedControl example

SegmentControl example

See Also