Customize Segment Colors

RadSegmentedControl has several properties which you can use to customize the text and background colors of the segments.

List of color properties

There are different colors applied to the segments in their different states. The control exposes the following properties:

  • SegmentBackgroundColor: This is the background color applied to the unselected segments.
  • SegmentTextColor: This is the text color applied to the unselected segments.

  • SelectedSegmentBackgroundColor: This is the background color applied to the selected segment.

  • SelectedSegmentTextColor: This is the text color applied to the selected segment.

  • DisabledSegmentTextColor: This is the text color applied to the disabled segments.

Example

This example shows setting the different segment colors.

<telerikInput:RadSegmentedControl x:Name="segmentControl"
                                  Margin="10"
                                  DisabledSegmentTextColor="#C2C3C9"
                                  HeightRequest="60"
                                  SegmentBackgroundColor="#FFFFFF"
                                  SegmentTextColor="#3A9BFD"
                                  SelectedSegmentBackgroundColor="#3A9BFD"
                                  SelectedSegmentTextColor="#FFFFFF"
                                  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>
this.segmentControl.SetSegmentEnabled(2, false);

Figure 1: Customized segment colors

SegmentedControl colors customization

See Also