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.
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
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.
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.
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.
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.
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.
Quick Start Example
Basic Range Navigator with Chart
<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>ViewModel
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
Bind the navigator's zoom properties to chart axes for synchronized navigation:
<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
Access the data within the selected range:
private void OnRangeChanged(object sender, EventArgs e)
{
var navigator = sender as SfDateTimeRangeNavigator;
var selectedData = navigator.SelectedData;
// Process selected data
ProcessDataInRange(selectedData);
}Pattern 3: Custom Interval Configuration
Set specific interval types for label bars:
<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
Enable deferred updates for large datasets:
<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.)
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)
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)
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
Customization
- LeftThumbStyle - Style for left slider thumb
- RightThumbStyle - Style for right slider thumb
- LeftToolTipTemplate - Template for left tooltip
- RightToolTipTemplate - Template for right tooltip
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
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
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
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.