Indicating the selected item

24 Jun 20192 minutes to read

The segmented control indicates the selected item by differentiating it with text color of the item or by using selection strip.

Selection text color

You can change the text color of the selected item to desired color. The selected item’s text color can be customized using the SelectionTextColor property.

  • c#
  • segmentControl.SelectionTextColor = UIColor.FromRGB(4, 142, 172);

    SegmentedControl SelectionTextColor in Xamarin.iOS

    Selection Strip

    A selection strip is used to indicate the selected item in the segmented control. The selection strip can be customized in many forms.

    Position

    The position of the selection indicator can be customized in different ways such as top, bottom, fill, and border.

    Top

    The selection strip can be displayed as a line with customizable color and thickness. It can be positioned at the top of selected item.

  • c#
  • segmentControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() {Position = SelectionIndicatorPosition.Top};

    Selected segment item Top in Xamarin.iOS

    Bottom

    Like top placement, selection strip can be customized by its color and thickness, and it can be positioned at the bottom of selected item.

  • c#
  • segmentControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() {Position = SelectionIndicatorPosition.Bottom};

    Selected segment item Bottom in Xamarin.iOS

    Fill

    The selection strip can be placed over a segment item to indicate the selection. You can customize its color to highlight the item.

  • c#
  • segmentControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() {Position = SelectionIndicatorPosition.Fill};

    Selected segment item Fill in Xamarin.iOS

    Border

    The selection strip can be set as a border to highlight the selected item.

  • c#
  • segmentControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() {Position = SelectionIndicatorPosition.Border};

    Selected segment item Border in Xamarin.iOS

    Color

    The background color of the selection strip can be customized using the Color property of SelectionIndicatorSettings.

  • c#
  • segmentControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() { Color = UIColor.FromRGB(44,123,188)};

    Selected segment item Color in Xamarin.iOS

    Thickness

    The border thickness of the selection strip can be customized using the Thickness property of SelectionIndicatorSettings.

  • c#
  • segmentControl.SelectionIndicatorSettings = new SelectionIndicatorSettings() { StrokeThickness= 10 };