Vapolia.SegmentedViews

dotnet add package Vapolia.SegmentedViews

builder.UseSegmentedView();

Platforms:

• Android API 27+
• iOS 13+

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.

For quick ref:

FAQ

(1) Cannot resolve type "https://vapolia.eu/Vapolia.SegmentedViews:segmented:Segment"

Make sure your SupportedOSPlatformVersion is at least those:

<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">13.0</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">27.0</SupportedOSPlatformVersion>

(2) Cannot resolve type "https://vapolia.eu/Vapolia.SegmentedViews:segmented:Segment"

replace xmlns:segmented="https://vapolia.eu/Vapolia.SegmentedViews"
by xmlns:segmented="clr-namespace:Vapolia.SegmentedViews;assembly=Vapolia.SegmentedViews"