syncfusion-maui-segmented-control

在 .NET MAUI 中实现分段控件

Syncfusion .NET MAUI 分段控件（SfSegmentedControl）提供一组线性排列的分段，其中包含文本、图标或两者兼有，供用户从互斥选项中进行选择。每个分段都作为一个独立按钮，让用户能够直观地切换视图、筛选内容或选择时间段。

何时使用此技能

在以下情况下使用此技能：

• 实现视图切换器： 在日／周／月／年视图、列表／网格布局或不同数据可视化之间切换
• 创建筛选按钮： 允许用户按类别、类型或时间段筛选内容
• 构建类似标签页的导航： 提供基于分段的导航，无需使用传统标签页
• 设计选择界面： 让用户能够从 2–7 个互斥选项中进行选择
• 自定义分段外观： 设置边框、背景、颜色、圆角或选择指示器的样式
• 配置选择行为： 设置程序化选择、选择模式或自定义指示器
• 处理分段事件： 响应选择变更或分段点击
• 支持 RTL 布局： 实现从右到左的语言支持
• 应用特殊效果： 添加液态玻璃效果或自定义动画

常见场景：日历视图切换、图表周期选择器、排序选项、显示模式切换、类别筛选器和设置切换。

组件概览

主要功能：

• 多种显示格式（文本、图标或组合）
• 四种选择指示器样式（Fill、Border、TopBorder、BottomBorder）
• 支持大量项目的可滚动分段
• 两种选择模式（Single、SingleDeselect）
• 全面的外观自定义
• 支持禁用分段
• 支持 RTL
• 涟漪效果动画
• 支持自定义布局的 DataTemplate

包： Syncfusion.Maui.Buttons
命名空间： Syncfusion.Maui.Buttons
控件类： SfSegmentedControl

文档与导航指南

入门

📄 阅读： references/getting-started.md

从这里开始进行初始设置：

• 安装 Syncfusion.Maui.Buttons NuGet 包
• 注册 Syncfusion 处理程序（ConfigureSyncfusionCore）
• 在 XAML 和 C# 中初始化基本控件
• 多种 IDE 设置（Visual Studio、VS Code、Rider）
• 命名空间导入和最简示例

填充分段项目

📄 阅读： references/populating-items.md

了解如何向控件添加分段：

• 使用包含字符串数组的 ItemsSource
• 创建 SfSegmentItem 对象
• 添加文本、图标或文本与图标组合
• 配置图像源和字体图标
• 动态填充项目
• 数据绑定方法

选择功能

📄 阅读： references/selection.md

了解如何控制选择行为和外观：

• 使用 SelectedIndex 进行程序化选择
• 选择指示器位置（Fill、Border、TopBorder、BottomBorder）
• 选择模式（Single、SingleDeselect）
• 自定义选中分段的颜色和背景
• 自定义选中分段的边框
• 涟漪效果动画（EnableRippleEffect）
• 为各个项目设置选择样式

外观自定义

📄 阅读： references/customization.md

了解如何设置控件样式：

• 边框颜色和粗细（Stroke、StrokeThickness）
• 圆角（CornerRadius、SegmentCornerRadius）
• 文本样式（TextStyle、FontAttributes、FontSize）
• 分段背景颜色
• 各个项目的自定义设置
• 分隔线可见性（ShowSeparator）
• DataTemplate 自定义（SegmentTemplate）
• 使用 IsSelected 绑定的选中项目模板

布局配置

📄 阅读： references/layout.md

了解尺寸和布局控制：

• 分段宽度（SegmentWidth、各项目的 Width）
• 分段高度（SegmentHeight）
• 可见分段数量（VisibleSegmentsCount）
• 滚动行为
• 自动调整尺寸与固定尺寸

禁用分段

📄 阅读： references/disabled-segments.md

用于禁用特定分段：

• 为每个分段设置 IsEnabled
• 为禁用状态提供视觉反馈
• 阻止用户交互
• 条件禁用场景

事件

📄 阅读： references/events.md

用于处理用户交互：

• SelectionChanged 事件
• SegmentTapped 事件
• 事件参数及访问分段数据
• 以编程方式响应选择
• 事件驱动的 UI 更新

高级功能

📄 阅读： references/advanced-features.md

用于了解特殊功能：

• 从右到左（RTL）支持和 FlowDirection
• Liquid glass 效果样式
• 自定义视觉效果
• 特定平台注意事项