syncfusion-maui-date-time-slider

实现 .NET MAUI 日期时间滑块

Syncfusion .NET MAUI 日期时间滑块（SfDateTimeSlider）是一种交互性很强的 UI 控件，可从一系列日期/时间值中选择单个 DateTime 值。它提供丰富的自定义选项，可用于标签、刻度、工具提示、轨道、滑块拇指和分隔线，非常适合在 MAUI 应用程序中选择时间数据。

何时使用此技能

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

• 实现日期选择，在 .NET MAUI 应用程序中使用滑块界面
• 创建时间选择器或带有视觉反馈的日期时间范围选择器
• 构建时间 UI 控件，用于选择日期、时间或日期时间值
• 自定义滑块外观，包括轨道颜色、滑块拇指样式、标签、刻度和工具提示
• 处理日期时间值变更，在 MVVM 模式中使用事件和命令
• 启用离散选择，设置特定的日期/时间步长（每日、每月、每年、每小时）
• 支持 RTL 和无障碍功能，提供符合 WCAG 标准的日期时间滑块
• 添加现代玻璃效果，使用 Liquid Glass Effect（.NET 10+）

在处理时间数据选择、基于日历的输入、日期范围筛选、时间安排界面，或任何需要直观地选择日期时间值的场景时，此技能都必不可少。

组件概述

主要功能：

• 日期时间支持：通过灵活的范围配置选择 DateTime 值
• 双向布局：支持水平和垂直滑块方向
• 丰富的标签：可自定义日期格式标签，并设置活动和非活动状态
• 刻度和分隔线：用于显示主要/次要间隔的视觉指示器
• 交互式工具提示：交互过程中显示选定值
• 离散模式：按步长选择，并可配置间隔
• 视觉自定义：全面控制颜色、大小、字体和样式
• 事件和命令：跟踪值变更并支持 MVVM 命令
• 视觉状态管理器：支持启用/禁用状态
• Liquid Glass Effect：现代半透明设计（.NET 10、iOS/macOS 26）

文档和导航指南

入门

📄 阅读： references/getting-started.md

阅读时机： 首次实现、安装或基本设置时。

涵盖主题：

• 安装 Syncfusion.Maui.Sliders NuGet 包
• 使用 ConfigureSyncfusionCore 注册处理程序
• 基本日期时间滑块实现（XAML 和 C#）
• 设置 Minimum、Maximum 和 Value 属性
• 配置方向（Horizontal/Vertical）
• 使用 IsInversed 反转滑块方向
• 特定平台的设置（Visual Studio、VS Code、JetBrains Rider）

轨道配置

📄 阅读： references/track-customization.md

阅读时机： 自定义轨道外观、颜色或尺寸时。

涵盖主题：

• Minimum、Maximum 和 Value 属性详解
• 活动和非活动轨道颜色（ActiveFill、InactiveFill）
• 自定义轨道高度（ActiveSize、InactiveSize）
• 设置轨道延伸范围，延长轨道边缘
• TrackStyle 类及其属性
• 使用视觉状态管理器设置禁用轨道状态

标签和格式

📄 阅读： references/labels.md

阅读时机： 显示格式化的日期标签或自定义标签外观时。

涵盖主题：

• 使用 ShowLabels 属性启用标签
• 使用 DateFormat 属性设置自定义日期/时间格式
• 标签位置选项（OnTicks、BetweenTicks）
• 边缘标签位置（Default、Inside）
• 自定义标签样式（颜色、字体、大小）
• 设置活动和非活动标签样式
• 调整标签偏移量
• 使用 LabelCreated 事件自定义标签文本
• 禁用标签状态

刻度线和分隔线

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

阅读时机： 添加可视化间隔指示器或自定义刻度线/分隔线外观时。

涵盖主题：

• 用于主刻度线的 ShowTicks 属性
• 用于次刻度指示器的 MinorTicksPerInterval
• 主刻度线和次刻度线的样式（颜色、尺寸）
• 刻度线偏移配置
• 用于分隔线标记的 ShowDividers 属性
• 分隔线样式（半径、颜色、描边）
• 活动和非活动刻度线/分隔线自定义
• 使用 Visual State Manager 设置禁用状态

滑块拇指和叠加层自定义

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

阅读时机： 自定义可拖动的滑块拇指或其交互叠加层时。

涵盖主题：

• 滑块拇指的定义和用途
• 使用 Radius 属性设置滑块拇指尺寸
• 滑块拇指颜色（Fill、Stroke、StrokeThickness）
• ThumbStyle 类属性
• 滑块拇指叠加层的定义和行为
• 叠加层尺寸和颜色自定义
• ThumbOverlayStyle 属性
• 使用 Visual State Manager 设置滑块拇指的禁用状态

工具提示配置

📄 阅读： references/tooltip.md

阅读时机： 在交互过程中显示工具提示或自定义工具提示外观时。

涵盖主题：

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

间隔和数值选择

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

阅读时机： 配置日期间隔、离散选择或延迟更新时。

涵盖主题：

• 用于标签/刻度线/分隔线间距的 Interval 属性
• IntervalType 枚举（Years、Months、Days、Hours、Minutes、Seconds）
• 自动间隔计算
• 用于离散选择模式的 StepDuration
• EnableDeferredUpdate 和 DeferredUpdateDelay
• 使用 DateFormat 的不同间隔类型示例

事件和命令

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

阅读时机： 处理数值变化、实现 MVVM 命令或动态自定义标签/工具提示时。

涵盖主题：

• ValueChangeStart、ValueChanging、ValueChanged、ValueChangeEnd 事件
• 事件处理程序实现
• 用于动态自定义标签的 LabelCreated 事件
• 用于工具提示文本格式化的 TooltipLabelCreated 事件
• DragStartedCommand 和 DragCompletedCommand
• 用于 MVVM 绑定的命令参数
• Liquid Glass Effect（EnableLiquidGlassEffect 属性）