syncfusion-maui-range-selector

实现 .NET MAUI 范围选择器

Syncfusion SfRangeSelector 是一个 .NET MAUI 控件，用户可以通过在轨道上拖动滑块来选择数值范围。它的一项独特功能是支持在选择器中嵌入任意内容（通常是图表），因此非常适合按范围筛选图表数据。

何时使用此技能

当用户需要执行以下操作时，请使用此技能：

• 从头开始设置 SfRangeSelector，用于 MAUI 应用
• 嵌入图表内容（SfCartesianChart 或其他视图），以便在范围选择器中交互式筛选数据
• 自定义轨道外观——颜色、高度和范围
• 配置范围刻度的间隔、刻度线、标签和分隔线
• 设置滑块和覆盖层的样式——大小、颜色、描边
• 配置工具提示——始终显示、设置样式、自定义文本
• 实现选择模式——离散选择、间隔选择、拖动行为
• 处理事件——ValueChanged、ValueChanging、LabelCreated
• 使用 MVVM 命令——DragStartedCommand、DragCompletedCommand
• 自定义标签——位置、边缘位置、样式、偏移量
• 设置刻度线和分隔线的样式——颜色、大小、描边
• 添加可视区域——自定义活动区域和非活动区域的颜色及描边
• 使用 IsInversed 反转范围选择器的方向
• 通过 NumberFormat 使用前缀／后缀格式化显示的标签
• 启用 Liquid Glass 效果，打造现代半透明设计
• 将 RangeStart/RangeEnd 绑定到 ViewModel，实现 MVVM 数据绑定

组件概览

SfRangeSelector 是一个 .NET MAUI 控件，用户可以通过在轨道上拖动两个滑块来选择数值范围。它的一项独特功能是支持在选择器中嵌入任意内容（通常是图表），因此非常适合交互式筛选数据。

包：Syncfusion.Maui.Sliders
命名空间：Syncfusion.Maui.Sliders
控件：SfRangeSelector

主要功能：

• 嵌入内容：在选择器内呈现任意 .NET MAUI 视图（例如 SfCartesianChart）
• 两个滑块：通过拖动设定起始值和结束值，并全面设置轨道样式
• 间隔控件：按可配置的间隔显示标签、刻度线、次刻度线和分隔线
• 选择模式：支持离散步进、间隔吸附和多种拖动行为
• 丰富的自定义选项：轨道颜色、滑块样式、工具提示，以及标签／刻度线／分隔线样式
• 区域支持：自定义活动区域和非活动区域
• 支持 MVVM：支持事件、命令和双向数据绑定
• Liquid Glass 效果：适用于 iOS/macOS 26+ 的现代半透明设计

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包（Syncfusion.Maui.Sliders）
• 在 MauiProgram.cs 中注册处理程序
• 最简 XAML 和 C# 设置
• 通过 Content 属性添加图表内容
• 导入命名空间

间隔配置

📄 阅读： references/interval-configuration.md

• 设置 Interval、Minimum、Maximum
• Interval = 0 时自动计算间隔
• 使用 ShowTicks + MinorTicksPerInterval 显示刻度线
• 使用 ShowDividers 显示分隔线
• 间隔对标签和刻度线呈现的影响

显示功能

📄 阅读： references/display-features.md

• 使用 ShowLabels 启用标签
• 启用刻度线和次刻度线
• 使用 NumberFormat 格式化标签（前缀／后缀）
• 使用 IsInversed 反转选择器
• 配置 RangeStart 和 RangeEnd

内容和图表集成

📄 阅读： references/content-and-integration.md

• Content 属性的工作方式
• 嵌入隐藏坐标轴的 SfCartesianChart
• ViewModel + ItemsSource 绑定模式
• 在范围选择器中设置 SplineAreaSeries
• 使用其他图表类型的提示

轨道自定义

📄 阅读： references/track-customization.md

• Minimum 和 Maximum 属性
• RangeStart 和 RangeEnd 值
• 轨道颜色（ActiveFill、InactiveFill）
• 轨道高度（ActiveSize、InactiveSize）
• 轨道范围（延伸轨道边缘）
• TrackStyle 属性及完整样式设置

标签自定义

📄 阅读： references/labels-customization.md

• ShowLabels 属性
• NumberFormat 前缀/后缀（$、% 等）
• LabelsPlacement（OnTicks 与 BetweenTicks）
• EdgeLabelsPlacement（Default 与 Inside）
• LabelStyle（活动/非活动状态的颜色、字体和大小）
• 自定义标签偏移量
• 通过 LabelCreated 事件自定义标签文本

刻度线和分隔线

📄 阅读： references/ticks-and-dividers.md

• ShowTicks 和主刻度线配置
• 使用 MinorTicksPerInterval 设置次刻度线
• MajorTickStyle（颜色、大小、偏移量）
• MinorTickStyle（颜色、大小、偏移量）
• ShowDividers 属性
• DividerStyle（半径、颜色、描边、描边粗细）
• 完整的刻度线和分隔线样式示例

选择模式

📄 阅读： references/selection-modes.md

• 使用 StepSize 进行离散选择
• EnableIntervalSelection 属性
• DragBehavior 选项（OnThumb、BetweenThumbs、Both）
• 启用 EnableDeferredUpdate 以提升性能
• DeferredUpdateDelay 配置
• 选择行为对比

工具提示配置

📄 阅读： references/tooltip-configuration.md

• 使用 SliderTooltip 启用工具提示
• ShowAlways 属性用于持续显示工具提示
• 工具提示样式（Fill、Stroke、StrokeThickness）
• 文本样式（TextColor、FontSize、FontFamily、FontAttributes）
• Padding 和 Position 属性
• 工具提示文本的 NumberFormat
• 通过 TooltipLabelCreated 事件自定义工具提示文本

滑块和样式

📄 阅读： references/thumb-and-styling.md

• ThumbStyle 属性（Radius、Fill、Stroke、StrokeThickness）
• 用于重叠滑块的 OverlapStroke
• ThumbOverlayStyle（Radius、Fill）
• 可视区域（ActiveRegionFill、InactiveRegionFill、描边）
• 完整样式模式
• 启用 EnableLiquidGlassEffect，打造现代半透明设计
• Liquid Glass 的平台要求

事件和命令

📄 阅读： references/events-and-commands.md

• 值更改事件（ValueChangeStart、ValueChanging、ValueChanged、ValueChangeEnd）
• 用于自定义标签文本的 LabelCreated 事件
• 用于自定义工具提示文本的 TooltipLabelCreated 事件
• DragStartedCommand 和 DragCompletedCommand
• 命令参数
• MVVM 模式实现
• 完整的事件处理示例