Rock Mobile Docs

Segment Picker

M v1.0

Inherits from Xamarin.Forms.ContentView

Think of the Segment Picker as somewhere between a single select field and a set of tabs. Basically, it displays a single horizontal bar with each option making up a segment of the bar. Visually, as the user selects different segments, the control updates to put a border around that segment.

Important

Because the control displays a single row of items, care should be taken to ensure you don't provide too many items or items with names that are too long. Especially on phones which have very limited width.

Properties 

PropertyTypeDescription
OptionsListA collection of PickerItems which provide the values to be displayed inside the Segment Picker. This is also the default content property so PickerItems can be specified as direct child elements.
SegmentSelectedCommandICommandThe command to be executed when the user selects one of the segments. The parameter will be the value of the SelectedValue property.
SelectedIndexintThe integer index of the selected segment. Defaults to 0.
SelectedTextColorColorThe color to use for the text of the selected segment. This should be paired with the TintColor to ensure that the selected item is easily readable. Defaults to White.
SelectedValuestringThe value, as provided by the PickerItem, of the currently selected segment. This property is read-only.
TintColorColorThe color to use when tinting various parts of the control. Defaults to the primary app color.

Note that you cannot set the background-color via CSS, however the BackgroundColor property in XAML works just fine.

Example

<Rock:SegmentPicker>
    <Rock:PickerItem Value="12" Text="All" />
    <Rock:PickerItem Value="13" Text="Men" />
    <Rock:PickerItem Value="14" Text="Women" />
</Rock:SegmentPicker>

Styling

You can target special CSS properties to style certain aspects of the picker.

PropertyTypeDescription
-rock-tint-colorColorSets the tint color of the unselected segments.
-rock-selected-tint-colorColorSets the tint color of the selected segment.
 
^SegmentPicker {
  -rock-tint-color: red;
  -rock-selected-tint-color: orange;
}