👁 Image
Vapolia.SegmentedViews 1.0.8

Vapolia.SegmentedViews

👁 NuGet

👁 Nuget

👁 Publish To Nuget

dotnet add package Vapolia.SegmentedViews

builder.UseSegmentedView();

Platforms:

• Android API 27+
• iOS 15+
• MacOS 14.0+
• Windows 10.0.19041.0+

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"

Windows

On windows, this control uses CommunityToolkit.WinUI.Controls.Segmented