agentsclimarketplace
Sign in

Syncfusion maui segmented control

Skill syncfusion/maui-ui-components-skills/skills/syncfusion-maui-segmented-control

Implements Syncfusion .NET MAUI Segmented Control (SfSegmentedControl). Use when working with segmented controls, segment buttons, tab-like selection, button groups, or filter buttons in MAUI applications. This skill covers installation, item population, selection indicators, appearance customization, layout configuration, disabled segments, and events.From its SKILL.md

Install
npx -y skills add syncfusion/maui-ui-components-skills --skill syncfusion-maui-segmented-control

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

SKILL.md

5.2 KB, 989 tokens by cl100k_base, as published. Nobody here has run it

Implementing Segmented Controls in .NET MAUI

The Syncfusion .NET MAUI Segmented Control (SfSegmentedControl) provides a linear set of segments containing text, icons, or both, allowing users to select from mutually exclusive options. Each segment functions as a discrete button, creating an intuitive way to switch between views, filter content, or select time periods.

When to Use This Skill

Use this skill when you need to:

  • Implement view switchers: Toggle between Day/Week/Month/Year views, list/grid layouts, or different data visualizations
  • Create filter buttons: Allow users to filter content by category, type, or time period
  • Build tab-like navigation: Provide segment-based navigation without traditional tabs
  • Design selection interfaces: Enable users to choose from 2-7 mutually exclusive options
  • Customize segment appearance: Style borders, backgrounds, colors, corner radius, or selection indicators
  • Configure selection behavior: Set up programmatic selection, selection modes, or custom indicators
  • Handle segment events: Respond to selection changes or segment taps
  • Support RTL layouts: Implement right-to-left language support
  • Apply special effects: Add liquid glass effects or custom animations

Common scenarios: Calendar view toggles, chart period selectors, sorting options, display mode switches, category filters, and settings toggles.

Component Overview

Key Features:

  • Multiple display formats (text, icon, or combination)
  • Four selection indicator styles (Fill, Border, TopBorder, BottomBorder)
  • Scrollable segments for large item counts
  • Two selection modes (Single, SingleDeselect)
  • Comprehensive appearance customization
  • Disabled segment support
  • RTL support
  • Ripple effect animations
  • DataTemplate support for custom layouts

Package: Syncfusion.Maui.Buttons
Namespace: Syncfusion.Maui.Buttons
Control Class: SfSegmentedControl

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Start here for initial setup:

  • Installing Syncfusion.Maui.Buttons NuGet package
  • Registering Syncfusion handlers (ConfigureSyncfusionCore)
  • Basic control initialization in XAML and C#
  • Multi-IDE setup (Visual Studio, VS Code, Rider)
  • Namespace imports and minimal examples

Populating Segment Items

📄 Read: references/populating-items.md

For adding segments to the control:

  • Using ItemsSource with string arrays
  • Creating SfSegmentItem objects
  • Adding text, icons, or text+icon combinations
  • Image sources and font icon configuration
  • Dynamic item population
  • Data binding approaches

Selection Features

📄 Read: references/selection.md

For controlling selection behavior and appearance:

  • Programmatic selection with SelectedIndex
  • Selection indicator placements (Fill, Border, TopBorder, BottomBorder)
  • Selection modes (Single, SingleDeselect)
  • Customizing selected segment colors and backgrounds
  • Border customization for selected segments
  • Ripple effect animation (EnableRippleEffect)
  • Per-item selection styling

Appearance Customization

📄 Read: references/customization.md

For styling the control:

  • Border color and thickness (Stroke, StrokeThickness)
  • Corner radius (CornerRadius, SegmentCornerRadius)
  • Text styling (TextStyle, FontAttributes, FontSize)
  • Segment background colors
  • Per-item customization
  • Separator visibility (ShowSeparator)
  • DataTemplate customization (SegmentTemplate)
  • Selected item templates with IsSelected binding

Layout Configuration

📄 Read: references/layout.md

For sizing and layout control:

  • Segment width (SegmentWidth, per-item Width)
  • Segment height (SegmentHeight)
  • Visible segment count (VisibleSegmentsCount)
  • Scrolling behavior
  • Auto-sizing vs fixed dimensions

Disabled Segments

📄 Read: references/disabled-segments.md

For disabling specific segments:

  • Setting IsEnabled per segment
  • Visual feedback for disabled state
  • Preventing user interaction
  • Conditional disabling scenarios

Events

📄 Read: references/events.md

For handling user interactions:

  • SelectionChanged event
  • SegmentTapped event
  • Event arguments and accessing segment data
  • Programmatic response to selection
  • Event-driven UI updates

Advanced Features

📄 Read: references/advanced-features.md

For special capabilities:

  • Right-to-left (RTL) support and FlowDirection
  • Liquid glass effect styling
  • Custom visual effects
  • Platform-specific considerations

What ships with it: 8 files

89.6 KB alongside SKILL.md

references/

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.