Awesome
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 ofSegmentedView
<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 ofSegmentedView
<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 aSegment
<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"