Segment Picker
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.
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
Property | Type | Description |
Options | List<PickerItem> | A 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. |
SegmentSelectedCommand | ICommand | The command to be executed when the user selects one of the segments. The parameter will be the value of the SelectedValue property. |
SelectedIndex | int | The integer index of the selected segment. Defaults to 0. |
SelectedTextColor | Color | The 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. |
SelectedValue | string | The value, as provided by the PickerItem, of the currently selected segment. This property is read-only. |
TintColor | Color | The 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
Styling
You can target special CSS properties to style certain aspects of the picker.
Property | Type | Description |
---|---|---|
-rock-tint-color | Color | Sets the tint color of the unselected segments. |
-rock-selected-tint-color | Color | Sets the tint color of the selected segment. |
Last updated