Vapolia.SegmentedViews — nugetz
Vapolia/ Vapolia.SegmentedViews v1.0.9-ci16728423757 ✓ Verified .NET 9.0 .NET 9.0-android35.0 .NET 9.0-ios18.0 .NET 9.0-maccatalyst18.0
Powerful segmented control view for MAUI (Android, iOS)
Get Started dotnet CLI PackageReference Package Manager
$ dotnet add package Vapolia.SegmentedViewsReadme Vapolia.SegmentedViews
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
using Vapolia.SegmentedViews;
...
builder.UseSegmentedView();
Examples
See the SampleApp in this repo.
<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 Make sure your SupportedOSPlatformVersion is at least these:
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">15.0</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">15.0</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.19041.0</SupportedOSPlatformVersion>
<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.19041.0</TargetPlatformMinVersion>
replace xmlns:segmented="https://vapolia.eu/Vapolia.SegmentedViews"xmlns:segmented="clr-namespace:Vapolia.SegmentedViews;assembly=Vapolia.SegmentedViews"
This looks like a bug in the xamlc compiler.
Windows On windows, this control uses CommunityToolkit.WinUI.Controls.Segmented
Compatibility .NET 9.0
.NET 9.0-android35.0
.NET 9.0-ios18.0
.NET 9.0-maccatalyst18.0
.NET 9.0-windows10.0.19041
