Implementing Range Selectors

When to Use This Skill

• 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

Component Overview

• 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

• 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

• 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

Interactivity and Events

• 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

Label Customization

• 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

Tooltip Configuration

• Enable tooltips on slider thumbs
• Format tooltip date-time display
• Customize left and right tooltip templates
• Display selected range values with precision

Troubleshooting

• 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

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

<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

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

<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

<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

System Monitoring

Sales Analytics

Weather Data Visualization

IoT Sensor Data

Integration with Other Controls

• 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

• 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