syncfusion-maui-date-time-range-slider

实现 .NET MAUI 日期时间范围滑块

此技能全面介绍如何实现 Syncfusion .NET MAUI 日期时间范围滑块（SfDateTimeRangeSlider）控件。这是一个高度交互式 UI 组件，可让用户通过两个滑块拇指选择 DateTime 值范围。

何时使用此技能

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

• 在 .NET MAUI 应用中实现用于选择 DateTime 范围的范围滑块
• 创建带有可视轨道、滑块拇指和标签的日期范围选择器
• 构建具有小时／分钟／秒粒度的时间范围选择器
• 添加用于选择日期／时间最小值和最大值的双滑块拇指滑块
• 实现通过滑块选择范围的交互式日历
• 自定义轨道、滑块拇指、刻度、标签、分隔线或工具提示的外观
• 配置 DateTime 值的离散步进
• 处理值更改事件或实现 MVVM 命令
• 在 iOS 26+／macOS 26+ 平台上应用现代液态玻璃效果
• 支持 RTL 下的水平和垂直方向
• 分别设置所选范围的活动／非活动区域样式

此技能涵盖完整的 API，包括安装、配置、样式、事件、命令，以及延迟更新和间隔选择等高级功能。

组件概述

控件： SfDateTimeRangeSlider（Syncfusion .NET MAUI 范围滑块）
命名空间： Syncfusion.Maui.Sliders
包： Syncfusion.Maui.Sliders（NuGet）
平台支持： .NET MAUI（iOS、Android、macOS、Windows）

主要功能

• DateTime 支持 - 使用内置日期／时间格式设置选择 DateTime 范围
• 双滑块拇指 - 使用起始和结束滑块拇指选择范围
• 灵活的间隔 - 年、月、日、小时、分钟、秒
• 标签和刻度 - 可自定义标签、主刻度／次刻度和分隔线
• 工具提示 - 显示所选值的交互式工具提示
• 方向 - 支持反向布局的水平和垂直布局
• 离散模式 - 按特定间隔逐步调整值
• 拖动行为 - OnThumb、BetweenThumbs 或 Both 模式
• 丰富的样式 - 可分别设置所有元素的活动／非活动样式
• 事件和命令 - 完整的生命周期事件，并支持 MVVM
• 液态玻璃效果 - 现代半透明设计（iOS 26+／macOS 26+／.NET 10+）
• 视觉状态管理器 - 自定义启用／禁用状态

文档和导航指南

入门

📄 阅读： references/getting-started.md

适用于以下需求：

• 安装和包配置
• 处理程序注册（ConfigureSyncfusionCore）
• 基本日期时间范围滑块实现
• 最简可运行示例
• 快速入门代码（XAML 和 C#）
• 初始配置故障排除

轨道和范围配置

📄 阅读： references/track-and-range.md

适用于以下需求：

• 设置最小和最大 DateTime 值
• 配置 RangeStart 和 RangeEnd（所选范围）
• 更改方向（水平／垂直）
• 反转滑块方向
• 自定义轨道颜色（ActiveFill／InactiveFill）
• 调整轨道高度／尺寸
• 延伸边缘处的轨道（TrackExtent）
• 使用视觉状态管理器设置禁用状态的样式

标签、间隔和格式设置

📄 阅读： references/interval-and-labels.md

适用于以下需求：

• 配置间隔值和类型（年、月、日等）
• 启用自动间隔计算
• 设置 DateTime 标签格式（DateFormat 字符串）
• 显示／隐藏标签
• 设置标签位置（OnTicks 或 BetweenTicks）
• 设置边缘标签位置（Default 或 Inside）
• 分别设置活动／非活动标签的样式
• 自定义标签颜色、字体和尺寸
• 调整标签与刻度之间的偏移量
• 通过 LabelCreated 事件创建自定义标签文本

刻度和分隔线

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

当你需要：

• 显示/隐藏主刻度和次刻度
• 配置每个间隔的刻度数
• 自定义刻度颜色（活动/非活动）
• 调整刻度大小
• 设置刻度与轨道之间的偏移
• 在轨道上启用分隔线
• 设置分隔线的圆角、颜色和描边样式
• 为禁用状态应用 Visual State Manager

工具提示和滑块

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

当你需要：

• 启用并配置工具提示
• 始终显示工具提示（无需交互）
• 设置工具提示的外观样式（填充、描边、文本）
• 设置工具提示中 DateTime 值的格式
• 通过 TooltipLabelCreated 事件自定义工具提示文本
• 配置滑块的大小、颜色和描边样式
• 设置滑块重叠行为的样式
• 自定义滑块叠加层（交互光晕）
• 应用禁用状态

选择和交互

📄 阅读： references/selection-and-interaction.md

当你需要：

• 启用离散选择（StepDuration）
• 配置间隔选择模式
• 设置拖动行为（OnThumb、BetweenThumbs、Both）
• 启用延迟更新以提升性能
• 调整延迟更新时间
• 处理触摸和手势交互
• 了解不同的选择模式

事件和命令

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

当你需要：

• 处理值更改生命周期事件
• 监听 ValueChangeStart、ValueChanging、ValueChanged、ValueChangeEnd
• 访问事件参数（OldStart、OldEnd、NewStart、NewEnd）
• 取消值更改
• 通过 LabelCreated 事件自定义标签
• 通过 TooltipLabelCreated 事件自定义工具提示
• 使用 DragStartedCommand/DragCompletedCommand 实现 MVVM
• 使用命令参数
• 启用 Liquid Glass Effect（特定平台）