syncfusion-maui-date-time-range-selector

实现 .NET MAUI 日期时间范围选择器

Syncfusion .NET MAUI 日期时间范围选择器（SfDateTimeRangeSelector）是一种高度交互式 UI 控件，可让用户在指定的最小值和最大值范围内选择 DateTime 值。它专为与图表及其他可视化内容无缝协作而设计，可直观地筛选和探索基于时间的数据。

何时使用此技能

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

• 实现日期/时间范围选择 - 允许用户选择日期或时间范围
• 交互式筛选图表数据 - 支持用户通过选择时间段缩放或筛选图表
• 创建时间段选择器 - 构建用于选择季度、月份、周或自定义时间段的 UI
• 添加日期范围滑块 - 实现适用于 DateTime 值的滑块控件
• 构建数据探索工具 - 创建用于分析时间序列数据的交互式控件
• 自定义范围选择器外观 - 设置标签、刻度、滑块、轨道和区域的样式
• 处理范围选择事件 - 响应用户的范围更改交互
• 与图表集成 - 在范围选择器中嵌入 Syncfusion Charts 或其他内容

组件概览

• 使用可拖动滑块选择 DateTime 范围
• 集成图表内容以实现数据可视化
• 可自定义标签、刻度和分隔线
• 支持按步长间隔进行离散选择
• 支持工具提示和自定义格式
• 为所有可视元素提供丰富的样式选项
• 区域高亮显示（活动/非活动区域）
• 支持多种拖动行为
• 基于事件的架构，并支持命令
• 适用于现代 UI 的 Liquid Glass 效果（iOS 26+、macOS 26+）

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 安装 NuGet 包（Syncfusion.Maui.Sliders）
• 注册处理程序（ConfigureSyncfusionCore）
• 基本日期时间范围选择器实现
• 添加图表内容
• 配置 Minimum、Maximum、RangeStart、RangeEnd

间隔和格式设置

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

• 配置日期间隔（Interval、IntervalType）
• 间隔类型（年、月、日、小时、分钟、秒）
• 自动计算间隔
• 日期格式模式（DateFormat 属性）
• 自定义间隔场景

标签配置

📄 阅读： references/labels.md

• 启用标签（ShowLabels）
• 自定义日期格式
• 设置标签位置（LabelsPlacement：OnTicks、BetweenTicks）
• 设置边缘标签位置（EdgeLabelsPlacement）
• 设置标签样式（活动/非活动标签的颜色、字体和大小）
• 自定义标签偏移量
• 通过 LabelCreated 事件自定义标签文本

刻度和分隔线

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

• 配置主刻度（ShowTicks）
• 配置次刻度（MinorTicksPerInterval）
• 设置刻度样式（颜色、大小、偏移量）
• 显示分隔线（ShowDividers）
• 自定义分隔线（半径、颜色、描边）
• 活动/非活动刻度状态

轨道和区域

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

• 轨道属性（Minimum、Maximum、范围值）
• 自定义轨道颜色（活动/非活动）
• 轨道高度（ActiveSize、InactiveSize）
• 配置轨道范围
• 区域填充色和描边颜色
• 区域描边粗细
• 区分活动/非活动区域

滑块和叠加层

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

• 配置滑块大小（Radius）
• 设置滑块填充色和描边颜色
• 处理滑块重叠（OverlapStroke）
• 自定义滑块叠加层
• 叠加层大小和颜色
• 提供交互式视觉反馈

工具提示

📄 阅读： references/tooltip.md

• 启用工具提示
• ShowAlways 模式，用于持续显示
• 工具提示样式（填充、描边、内边距）
• 文本自定义（颜色、字体、大小）
• 工具提示中的日期格式
• 通过 TooltipLabelCreated 事件自定义工具提示文本

选择和交互

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

• 离散选择（StepDuration）
• 区间选择模式（EnableIntervalSelection）
• 拖动行为（OnThumb、BetweenThumbs、Both）
• 延迟更新（EnableDeferredUpdate、DeferredUpdateDelay）
• 触摸和鼠标交互
• IsInversed 属性

事件和命令

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

• ValueChangeStart/End 事件
• 携带 DateTimeRangeSelectorValueChangingEventArgs 的 ValueChanging 事件
• 携带 DateTimeRangeSelectorValueChangedEventArgs 的 ValueChanged 事件
• LabelCreated 和 TooltipLabelCreated 事件
• DragStartedCommand 和 DragCompletedCommand
• 命令参数
• MVVM 模式实现

进阶：液态玻璃效果

📄 阅读： references/liquid-glass-effect.md

• 现代半透明玻璃质感 UI 效果
• EnableLiquidGlassEffect 属性
• 平台要求（.NET 10、iOS 26+、macOS 26+）
• 视觉设计原则
• 实现示例