Vapolia.SegmentedViews

dotnet add package Vapolia.SegmentedViews

builder.UseSegmentedView();

Platforms:

Android
iOS

Supports both static segments and ItemsSource to build segments dynamically.

Quick start

Add the above nuget package to your Maui project
then add this line to your maui app builder:

using Vapolia.SegmentedViews;
...
builder.UseSegmentedView();

Examples

See the SampleApp in this repo.

Declare the namespace:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         ...
         xmlns:segmented="https://vapolia.eu/Vapolia.SegmentedViews">

Add a static segment view:

<segmented:SegmentedView  
    x:Name="TheSegmentView"
    SelectedIndex="0"
    SelectedTextColor="White" TextColor="Black" SelectedBackgroundColor="Blue" DisabledColor="LightGray"
    SelectionChangedCommand="{Binding SegmentSelectionChangedCommand}"
    SelectedItem="{Binding SegmentSelectedItem}">
    
    <segmented:Segment Item="Item1" />
    <segmented:Segment Item="Item2" />
    <segmented:Segment Item="Item3" />
    <segmented:Segment Item="Item4" />
    <segmented:Segment Item="{Binding Item5Title}" />
    
</segmented:SegmentedView>

Or a dynamic segment view:

        <segmented:SegmentedView
            ItemsSource="{Binding Persons}"
            TextPropertyName="LastName"
            SelectedIndex="0"
            SelectedItem="{Binding SegmentSelectedItem}"
            SelectedTextColor="White" TextColor="Black" SelectedBackgroundColor="Blue" DisabledColor="LightGray"
            SelectionChangedCommand="{Binding SegmentSelectionChangedCommand}" />

Width of segment items

The width of a segment can be set in the following 3 ways, in reverse order of priority:

On the ItemsDefaultWidth property of SegmentedView

<segmented:SegmentedView  
    x:Name="TheSegmentView"
    SelectedIndex="0"
    SelectedTextColor="White" TextColor="Black" SelectedBackgroundColor="Blue" DisabledColor="LightGray"
    SelectionChangedCommand="{Binding SegmentSelectionChangedCommand}"
    SelectedItem="{Binding SegmentSelectedItem}"
    ItemsDefaultWidth="150" />

On the ItemsWidthDefinitions property of SegmentedView

<segmented:SegmentedView  
    x:Name="TheSegmentView"
    SelectedIndex="0"
    SelectedTextColor="White" TextColor="Black" SelectedBackgroundColor="Blue" DisabledColor="LightGray"
    SelectionChangedCommand="{Binding SegmentSelectionChangedCommand}"
    SelectedItem="{Binding SegmentSelectedItem}"
    ItemsWidthDefinitions="150,Auto,*,2*">

This width follow the format of a Grid's ColumnsDefinition, so it should be straightforward to use.

Directly on the Width property of a Segment

<segmented:Segment Item="Item1" Width="150" />
<segmented:Segment Item="Item1" Width="Auto" />

IsSelectionRequired feature

By default, the control requires a selected item. By setting IsSelectionRequired to False, it won't try to constraint the SelectedIndex between 0 and the number of segments. The visual result is no segment is selected.

TLDR: set IsSelectionRequired="False" and SelectedIndex="-1" to visually see no selection.

Highlight color on Android

This is standard Material design on the native Android platform. Check the native doc for more info.