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