Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Create and Customize a RangeTrackBarEdit

  • 2 minutes to read

The Range TrackBarEdit editor allows you to specify a range of values.

This document demonstrates how to create a Range TrackBarEdit control.

#Create a New Project and Add a RangeTrackBarEdit

  1. Run MS Visual Studio 2010.
  2. Create a new WPF Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose WPF Application.
  3. Add a TrackBarEdit component to the project.

    To do this, open the Visual Studio toolbox, locate the “DX: Common Controls” tab, choose the TrackBarEdit toolbox item and drop it onto the window.

    ToolBox TrackBarEdit

  4. In XAML, set the StyleSettings property to “TrackBarZoomRangeStyleSettings”.

    <Window x:Class="TrackBarEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="300" Width="500" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxe:TrackBarEdit HorizontalAlignment="Center" Name="trackBarEdit1" VerticalAlignment="Center" Width="300" Height="40" Minimum="-273" Maximum="120" TickFrequency="10" ShowNullTextForEmptyValue="False" TickPlacement="Both">
                <dxe:TrackBarEdit.StyleSettings>
                    <dxe:TrackBarRangeStyleSettings/>
                </dxe:TrackBarEdit.StyleSettings>
            </dxe:TrackBarEdit>
        </Grid>
    </Window>
    

#Specify the Range

  1. Right click the TrackBarEdit and select Properties. To specify the minimum and maximum values, set the RangeBaseEdit.Minimum property to -273 and the RangeBaseEdit.Maximum property to 120.
  2. To customize the selection, set the TrackBarEdit.SelectionStart property to -45 and the TrackBarEdit.SelectionEnd property to 40.

    <Window x:Class="TrackBarEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="200" Width="400" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxe:TrackBarEdit HorizontalAlignment="Center" Name="trackBarEdit1"
            VerticalAlignment="Center" Width="300" Height="40"
            Minimum="-273" Maximum="120" SelectionStart="-45" SelectionEnd="40">
                <dxe:TrackBarEdit.StyleSettings>
                    <dxe:TrackBarRangeStyleSettings/>
                </dxe:TrackBarEdit.StyleSettings>
            </dxe:TrackBarEdit>
        </Grid>
    </Window>
    
  3. Run the application to see the result.

    TrackBarEdit Window