https://github.com/vapolia/SegmentedViews

Powerful segmented view for MAUI
https://github.com/vapolia/SegmentedViews

Last synced: 3 months ago
JSON representation

Powerful segmented view for MAUI

• Host: GitHub
• URL: https://github.com/vapolia/SegmentedViews
• Owner: vapolia
• License: apache-2.0
• Created: 2024-02-03T09:01:41.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-03-31T08:04:31.000Z (9 months ago)
• Last Synced: 2024-04-01T08:15:28.252Z (9 months ago)
• Language: C#
• Homepage:
• Size: 311 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-dotnet-maui - SegmentedViews - square)](https://github.com/vapolia/SegmentedViews/stargazers)|[](https://github.com/vapolia/SegmentedViews/commits) (UI)

README

        
# Vapolia.SegmentedViews

[![NuGet][nuget-img]][nuget-link]  

![Nuget](https://img.shields.io/nuget/dt/Vapolia.SegmentedViews)  

[![Publish To Nuget](https://github.com/vapolia/SegmentedViews/actions/workflows/main.yaml/badge.svg)](https://github.com/vapolia/SegmentedViews/actions/workflows/main.yaml)

```cs

dotnet add package Vapolia.SegmentedViews

builder.UseSegmentedView();

```

[nuget-link]: https://www.nuget.org/packages/Vapolia.SegmentedViews/

[nuget-img]: https://img.shields.io/nuget/v/Vapolia.SegmentedViews

![image](https://github.com/vapolia/SegmentedViews/assets/190756/27ec1108-0e5d-47a0-a85c-c592694a9b52)

![image](https://github.com/vapolia/SegmentedViews/assets/190756/3d0e359b-92aa-49a4-9e91-26883b2e6e1f)

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:

```c#

using Vapolia.SegmentedViews;

...

builder.UseSegmentedView();

```

# Examples

See the SampleApp in this repo.

Declare the namespace:

```xaml

```

Add a static segment view:

```xaml

    

    

    

    

    

    

    

```

Or a dynamic segment view:

```xaml

        

```

## 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`

```xml

```

* On the `ItemsWidthDefinitions` property of `SegmentedView`

```xml

```

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`

```xml

```

# 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:  

![image](https://github.com/vapolia/SegmentedViews/assets/190756/0c20a415-4a77-48f7-994e-9691d1a12c70)

# FAQ

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

Make sure your SupportedOSPlatformVersion is at least those:

```xml

13.0

27.0

```

## (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"`