Back to Details

syncfusion-wpf-range-selector

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Range Selectors

实现范围选择器

Guide for implementing the Syncfusion® WPF Range Selector (SfDateTimeRangeNavigator) control for time-bound data visualization with interactive scrolling and navigation through large periods of time.
本指南介绍如何在WPF应用中实现Syncfusion® WPF范围选择器（SfDateTimeRangeNavigator）控件，用于支持交互式滚动和导航大型时间周期的时间绑定数据可视化。

When to Use This Skill

适用场景

Use this skill when you need to:
  • Navigate large time-based datasets with scrolling and zooming
  • Select specific date-time ranges from large data periods
  • Create interactive dashboards with range-based data filtering
  • Implement chart zooming with time range selection
  • Display hierarchical time labels (year/month, quarter/month, etc.)
  • Combine with other visualizations (charts, grids) for data exploration
  • Enable data range selection with visual feedback and tooltips
The Range Selector control excels at scenarios where users need to explore and select portions of large time-series data, providing an intuitive scrollbar interface with smart label calculation.
当你需要以下功能时，可以使用本指南：
  • 浏览大型时间数据集：支持滚动和缩放
  • 从大型时间周期中选择特定日期时间范围
  • 创建带范围数据过滤的交互式仪表板
  • 实现带时间范围选择的图表缩放
  • 显示分层时间标签（年/月、季度/月等）
  • 与其他可视化组件结合（图表、表格）进行数据探索
  • 提供带视觉反馈和工具提示的数据范围选择功能
范围选择器控件在用户需要探索和选择大型时间序列数据的部分内容时表现出色，它提供了直观的滚动条界面和智能标签计算功能。

Component Overview

组件概述

The SfDateTimeRangeNavigator is a specialized control for navigating time-bound data with these key capabilities:
Core Features:
  • Interactive Navigation: Scrolling and zooming through large datasets
  • Dual-Level Labels: Hierarchical time display (higher/lower level bars)
  • Smart Labels: Automatic label calculation when zooming
  • Range Selection: Resizable scrollbar for precise region selection
  • Content Integration: Embed charts, sparklines, or any UI element
  • Data Binding: Standard WPF IEnumerable support with property binding
Common Scenarios:
  • Financial data exploration (stock prices, trading volumes)
  • Historical data analysis with date range filtering
  • Dashboard range controls for synchronized views
  • Time-series data selection with visual preview
SfDateTimeRangeNavigator是一款专门用于导航时间绑定数据的控件，具备以下核心功能：
核心特性：
  • 交互式导航：滚动和缩放浏览大型数据集
  • 双层标签：分层时间显示（上层/下层标签栏）
  • 智能标签：缩放时自动计算标签
  • 范围选择：可调整大小的滚动条用于精确选择区域
  • 内容集成：嵌入图表、迷你图或任何UI元素
  • 数据绑定：支持标准WPF IEnumerable及属性绑定
常见应用场景：
  • 金融数据探索（股票价格、交易量）
  • 带日期范围过滤的历史数据分析
  • 用于同步视图的仪表板范围控件
  • 带视觉预览的时间序列数据选择

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md
When you need to:
  • Understand the visual structure (higher/lower bars, content, scrollbar)
  • Add assembly references and install packages
  • Initialize the SfDateTimeRangeNavigator control
  • Set ItemsSource and bind to date-time data
  • Add content inside the navigator (charts, sparklines)
  • Create range navigator from code-behind
  • Apply themes to the control
This reference covers complete setup from installation to first working implementation.
📄 阅读： references/getting-started.md
当你需要以下操作时：
  • 了解视觉结构（上层/下层标签栏、内容区、滚动条）
  • 添加程序集引用并安装包
  • 初始化SfDateTimeRangeNavigator控件
  • 设置ItemsSource并绑定到日期时间数据
  • 在导航器中添加内容（图表、迷你图）
  • 通过代码后台创建范围导航器
  • 为控件应用主题
本参考文档涵盖了从安装到首次实现完整功能的所有设置步骤。

Interactivity and Events

交互性与事件

📄 Read: references/interactivity.md
When you need to:
  • Implement zooming and panning functionality
  • Bind ZoomPosition and ZoomFactor to chart axes
  • Retrieve selected data from chosen ranges
  • Handle ValueChanged events for range updates
  • Customize thumb appearance (left/right sliders)
  • Configure SymbolTemplate and LineStyle for thumbs
  • Customize higher and lower bar styles
  • Enable deferred updates for performance
  • Handle LowerBarLabelsCreated/UpperBarLabelsCreated events
This reference covers all interactive features and event handling.
📄 阅读： references/interactivity.md
当你需要以下操作时：
  • 实现缩放和平移功能
  • 将ZoomPosition和ZoomFactor绑定到图表轴
  • 获取所选范围内的数据
  • 处理范围更新的ValueChanged事件
  • 自定义滑块拇指的外观（左/右滑块）
  • 配置拇指的SymbolTemplate和LineStyle
  • 自定义上层和下层标签栏样式
  • 启用延迟更新以提升性能
  • 处理LowerBarLabelsCreated/UpperBarLabelsCreated事件
本参考文档涵盖了所有交互功能和事件处理方式。

Label Customization

标签自定义

📄 Read: references/label-customization.md
When you need to:
  • Set interval types (Year, Quarter, Month, Week, Day, Hour)
  • Customize label formats with LabelFormatters
  • Style selected and unselected labels
  • Position labels inside or outside bars
  • Control label bar visibility
  • Configure RangePadding (None, Round)
  • Customize grid lines and tick lines
  • Understand smart label calculation behavior
This reference covers complete label and interval customization.
📄 阅读： references/label-customization.md
当你需要以下操作时：
  • 设置间隔类型（年、季度、月、周、日、小时）
  • 使用LabelFormatters自定义标签格式
  • 设置选中和未选中标签的样式
  • 设置标签在标签栏内部或外部的位置
  • 控制标签栏的可见性
  • 配置RangePadding（无、取整）
  • 自定义网格线和刻度线
  • 了解智能标签计算逻辑
本参考文档涵盖了标签和间隔的完整自定义方法。

Tooltip Configuration

工具提示配置

📄 Read: references/tooltip-support.md
When you need to:
  • Enable tooltips on slider thumbs
  • Format tooltip date-time display
  • Customize left and right tooltip templates
  • Display selected range values with precision
This reference covers tooltip display and customization.
📄 阅读： references/tooltip-support.md
当你需要以下操作时：
  • 启用滑块拇指的工具提示
  • 格式化工具提示的日期时间显示
  • 自定义左右工具提示模板
  • 精确显示所选范围的值
本参考文档涵盖了工具提示的显示和自定义方法。

Troubleshooting

故障排除

📄 Read: references/troubleshooting.md
When you encounter:
  • Assembly reference problems
  • Data binding issues or ItemsSource errors
  • Content not displaying properly
  • Zoom binding not synchronizing with charts
  • Performance issues with large datasets
  • Theme application problems
  • License-related errors
This reference provides solutions for common issues.
📄 阅读： references/troubleshooting.md
当你遇到以下问题时：
  • 程序集引用问题
  • 数据绑定问题或ItemsSource错误
  • 内容无法正常显示
  • 缩放绑定未与图表同步
  • 大型数据集的性能问题
  • 主题应用问题
  • 许可证相关错误
本参考文档提供了常见问题的解决方案。

Quick Start Example

快速入门示例

Basic Range Navigator with Chart

带图表的基础范围导航器

xml
<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    <Grid>
        <!-- Main Chart -->
        <syncfusion:SfChart x:Name="Chart" Margin="10">
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:DateTimeAxis 
                    ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}"
                    ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"/>
            </syncfusion:SfChart.PrimaryAxis>
            
            <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis/>
            </syncfusion:SfChart.SecondaryAxis>
            
            <syncfusion:LineSeries ItemsSource="{Binding Data}" 
                                   XBindingPath="Date" 
                                   YBindingPath="Value"/>
        </syncfusion:SfChart>
        
        <!-- Range Navigator -->
        <syncfusion:SfDateTimeRangeNavigator x:Name="RangeNavigator"
                                             ItemsSource="{Binding Data}"
                                             XBindingPath="Date"
                                             VerticalAlignment="Bottom"
                                             Height="100"
                                             Margin="10">
            <syncfusion:SfDateTimeRangeNavigator.Content>
                <syncfusion:SfLineSparkline ItemsSource="{Binding Data}"
                                            YBindingPath="Value"/>
            </syncfusion:SfDateTimeRangeNavigator.Content>
        </syncfusion:SfDateTimeRangeNavigator>
    </Grid>
</Window>
xml
<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    <Grid>
        <!-- 主图表 -->
        <syncfusion:SfChart x:Name="Chart" Margin="10">
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:DateTimeAxis 
                    ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}"
                    ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"/>
            </syncfusion:SfChart.PrimaryAxis>
            
            <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis/>
            </syncfusion:SfChart.SecondaryAxis>
            
            <syncfusion:LineSeries ItemsSource="{Binding Data}" 
                                   XBindingPath="Date" 
                                   YBindingPath="Value"/>
        </syncfusion:SfChart>
        
        <!-- 范围导航器 -->
        <syncfusion:SfDateTimeRangeNavigator x:Name="RangeNavigator"
                                             ItemsSource="{Binding Data}"
                                             XBindingPath="Date"
                                             VerticalAlignment="Bottom"
                                             Height="100"
                                             Margin="10">
            <syncfusion:SfDateTimeRangeNavigator.Content>
                <syncfusion:SfLineSparkline ItemsSource="{Binding Data}"
                                            YBindingPath="Value"/>
            </syncfusion:SfDateTimeRangeNavigator.Content>
        </syncfusion:SfDateTimeRangeNavigator>
    </Grid>
</Window>

ViewModel

视图模型

csharp
public class DataViewModel : INotifyPropertyChanged
{
    public ObservableCollection<DataPoint> Data { get; set; }
    
    public DataViewModel()
    {
        Data = new ObservableCollection<DataPoint>();
        DateTime startDate = DateTime.Today.AddYears(-1);
        
        for (int i = 0; i < 365; i++)
        {
            Data.Add(new DataPoint 
            { 
                Date = startDate.AddDays(i), 
                Value = 50 + (i % 30) 
            });
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
}

public class DataPoint
{
    public DateTime Date { get; set; }
    public double Value { get; set; }
}
csharp
public class DataViewModel : INotifyPropertyChanged
{
    public ObservableCollection<DataPoint> Data { get; set; }
    
    public DataViewModel()
    {
        Data = new ObservableCollection<DataPoint>();
        DateTime startDate = DateTime.Today.AddYears(-1);
        
        for (int i = 0; i < 365; i++)
        {
            Data.Add(new DataPoint 
            { 
                Date = startDate.AddDays(i), 
                Value = 50 + (i % 30) 
            });
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
}

public class DataPoint
{
    public DateTime Date { get; set; }
    public double Value { get; set; }
}

Common Patterns

常见模式

Pattern 1: Chart Synchronization with Range Navigator

模式1：范围导航器与图表同步

Bind the navigator's zoom properties to chart axes for synchronized navigation:
xml
<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis 
            ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}"
            ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"/>
    </syncfusion:SfChart.PrimaryAxis>
</syncfusion:SfChart>

<syncfusion:SfDateTimeRangeNavigator x:Name="RangeNavigator"
                                     ItemsSource="{Binding Data}"
                                     XBindingPath="Date"/>
将导航器的缩放属性绑定到图表轴以实现同步导航：
xml
<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis 
            ZoomPosition="{Binding ElementName=RangeNavigator, Path=ZoomPosition, Mode=TwoWay}"
            ZoomFactor="{Binding ElementName=RangeNavigator, Path=ZoomFactor, Mode=TwoWay}"/>
    </syncfusion:SfChart.PrimaryAxis>
</syncfusion:SfChart>

<syncfusion:SfDateTimeRangeNavigator x:Name="RangeNavigator"
                                     ItemsSource="{Binding Data}"
                                     XBindingPath="Date"/>

Pattern 2: Selected Data Retrieval

模式2：获取所选数据

Access the data within the selected range:
csharp
private void OnRangeChanged(object sender, EventArgs e)
{
    var navigator = sender as SfDateTimeRangeNavigator;
    var selectedData = navigator.SelectedData;
    
    // Process selected data
    ProcessDataInRange(selectedData);
}
访问所选范围内的数据：
csharp
private void OnRangeChanged(object sender, EventArgs e)
{
    var navigator = sender as SfDateTimeRangeNavigator;
    var selectedData = navigator.SelectedData;
    
    // 处理所选数据
    ProcessDataInRange(selectedData);
}

Pattern 3: Custom Interval Configuration

模式3：自定义间隔配置

Set specific interval types for label bars:
xml
<syncfusion:SfDateTimeRangeNavigator ItemsSource="{Binding Data}" 
                                     XBindingPath="Date">
    <syncfusion:SfDateTimeRangeNavigator.Intervals>
        <syncfusion:Interval IntervalType="Year"/>
        <syncfusion:Interval IntervalType="Month"/>
    </syncfusion:SfDateTimeRangeNavigator.Intervals>
</syncfusion:SfDateTimeRangeNavigator>
为标签栏设置特定的间隔类型：
xml
<syncfusion:SfDateTimeRangeNavigator ItemsSource="{Binding Data}" 
                                     XBindingPath="Date">
    <syncfusion:SfDateTimeRangeNavigator.Intervals>
        <syncfusion:Interval IntervalType="Year"/>
        <syncfusion:Interval IntervalType="Month"/>
    </syncfusion:SfDateTimeRangeNavigator.Intervals>
</syncfusion:SfDateTimeRangeNavigator>

Pattern 4: Deferred Update for Performance

模式4：启用延迟更新提升性能

Enable deferred updates for large datasets:
xml
<syncfusion:SfDateTimeRangeNavigator EnableDeferredUpdate="True"
                                     DeferredUpdateDelay="500"
                                     ItemsSource="{Binding LargeDataset}"
                                     XBindingPath="Date"/>
为大型数据集启用延迟更新：
xml
<syncfusion:SfDateTimeRangeNavigator EnableDeferredUpdate="True"
                                     DeferredUpdateDelay="500"
                                     ItemsSource="{Binding LargeDataset}"
                                     XBindingPath="Date"/>

Key Properties

关键属性

Data Binding

数据绑定

  • ItemsSource - The data collection (must implement IEnumerable)
  • XBindingPath - Property name for date-time values
  • Content - UI element to display inside navigator (chart, sparkline, etc.)
  • ItemsSource - 数据集合（必须实现IEnumerable）
  • XBindingPath - 日期时间值的属性名称
  • Content - 导航器内部显示的UI元素（图表、迷你图等）

Range and Zoom

范围与缩放

  • ZoomPosition - Current zoom position (0.0 to 1.0)
  • ZoomFactor - Current zoom level (0.0 to 1.0)
  • Minimum - Starting range of the navigator
  • Maximum - Ending range of the navigator
  • ViewRangeStart - Start value of selected range (read-only)
  • ViewRangeEnd - End value of selected range (read-only)
  • SelectedData - Collection of data within selected range (read-only)
  • ZoomPosition - 当前缩放位置（0.0至1.0）
  • ZoomFactor - 当前缩放级别（0.0至1.0）
  • Minimum - 导航器的起始范围
  • Maximum - 导航器的结束范围
  • ViewRangeStart - 所选范围的起始值（只读）
  • ViewRangeEnd - 所选范围的结束值（只读）
  • SelectedData - 所选范围内的数据集合（只读）

Intervals and Labels

间隔与标签

  • Intervals - Collection of interval configurations for label bars
  • HigherLevelBarStyle - Style for upper label bar
  • LowerLevelBarStyle - Style for lower label bar
  • RangePadding - Padding type (None, Round)
  • Intervals - 标签栏的间隔配置集合
  • HigherLevelBarStyle - 上层标签栏的样式
  • LowerLevelBarStyle - 下层标签栏的样式
  • RangePadding - 填充类型（无、取整）

Interactivity

交互性

  • EnableDeferredUpdate - Delays updates during scrolling/panning
  • DeferredUpdateDelay - Delay in milliseconds for deferred updates
  • ShowGridLines - Show/hide gridlines inside content
  • ShowToolTip - Enable/disable tooltips on thumbs
  • ToolTipLabelFormat - Date-time format for tooltips
  • EnableDeferredUpdate - 滚动/平移时延迟更新
  • DeferredUpdateDelay - 延迟更新的毫秒数
  • ShowGridLines - 显示/隐藏内容区的网格线
  • ShowToolTip - 启用/禁用拇指的工具提示
  • ToolTipLabelFormat - 工具提示的日期时间格式

Customization

自定义

  • LeftThumbStyle - Style for left slider thumb
  • RightThumbStyle - Style for right slider thumb
  • LeftToolTipTemplate - Template for left tooltip
  • RightToolTipTemplate - Template for right tooltip
  • LeftThumbStyle - 左侧滑块拇指的样式
  • RightThumbStyle - 右侧滑块拇指的样式
  • LeftToolTipTemplate - 左侧工具提示的模板
  • RightToolTipTemplate - 右侧工具提示的模板

Common Use Cases

常见用例

Financial Dashboard

金融仪表板

Display stock price charts with range selection for detailed analysis of specific time periods. Users can scroll through years of data and zoom into specific trading days.
显示股票价格图表，支持范围选择以分析特定时间段的详细数据。用户可以滚动浏览多年数据并缩放至特定交易日。

System Monitoring

系统监控

Monitor system metrics over time with the ability to select and analyze specific time ranges when anomalies occurred.
随时间监控系统指标，能够选择并分析异常发生的特定时间段。

Sales Analytics

销售分析

Explore sales data across multiple years, quarters, and months with hierarchical time labels showing patterns at different time scales.
浏览多年、多季度和多月的销售数据，通过分层时间标签查看不同时间尺度的模式。

Weather Data Visualization

天气数据可视化

Navigate historical weather data with the ability to select specific date ranges for comparison and analysis.
浏览历史天气数据，能够选择特定日期范围进行比较和分析。

IoT Sensor Data

IoT传感器数据

Browse sensor readings over extended periods and select specific time windows for detailed investigation.
浏览长时间的传感器读数，选择特定时间窗口进行详细调查。

Integration with Other Controls

与其他控件的集成

The Range Selector works seamlessly with:
  • SfChart - Synchronized zooming and panning
  • SfLineSparkline - Lightweight data preview in content area
  • DataGrid - Filter grid data based on selected range
  • Custom Visualizations - Any UI element can be embedded as content
范围选择器可与以下控件无缝协作：
  • SfChart - 同步缩放和平移
  • SfLineSparkline - 内容区的轻量级数据预览
  • DataGrid - 根据所选范围过滤表格数据
  • 自定义可视化组件 - 任何UI元素都可嵌入为内容

Performance Considerations

性能注意事项

For optimal performance with large datasets:
  • Enable EnableDeferredUpdate to reduce update frequency
  • Use SfLineSparkline instead of full charts in content area for lightweight rendering
  • Consider data virtualization for extremely large datasets
  • Set appropriate DeferredUpdateDelay based on data size
针对大型数据集实现最佳性能的建议：
  • 启用EnableDeferredUpdate以减少更新频率
  • 在内容区使用SfLineSparkline而非完整图表，实现轻量级渲染
  • 针对超大型数据集考虑使用数据虚拟化
  • 根据数据大小设置合适的DeferredUpdateDelay

Related Skills

相关技能

  • Implementing Charts - For detailed chart implementation
  • Parent Library: Implementing Syncfusion WPF Components
Next Steps: Navigate to the appropriate reference file above based on your current implementation needs.
  • 实现图表 - 用于详细的图表实现
  • 父级库：实现Syncfusion WPF组件
下一步： 根据当前实现需求，导航至上述相应的参考文档。