SegmentedControl

Switch between a small number of related modes with an always-visible selection.

SegmentedControl displays a short list of mutually exclusive text options. Its selected index is bindable, so it works equally well as a page filter or as a view-model setting.

var range = new SegmentedControl
{
    Items = { "Day", "Week", "Month" },
    SelectedIndex = Bind(vm => vm.SelectedRangeIndex)
        .TwoWay((vm, val) => vm.SelectedRangeIndex = val)
};

Items is an IList<string>. Replace it when the available segments change. SelectedIndex starts at zero and refers to the matching item position.

For direct handling, assign SelectionChanged:

range.SelectionChanged = index =>
{
    chart.Range = index switch
    {
        0 => ChartRange.Day,
        1 => ChartRange.Week,
        _ => ChartRange.Month
    };
};

Keep labels brief and use segments for one conceptual choice. Once options need descriptions, icons with special behavior, scrolling, or more than a handful of choices, a picker or collection is easier to scan and localize.

Use Picker<TItem> when the choices should collapse into a menu.