How to: Create and Customize a RangeTrackBarEdit

• May 22, 2020
• 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.

   

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

   XAML

   <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

5. 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.

6. To customize the selection, set the TrackBarEdit.SelectionStart property to -45 and the TrackBarEdit.SelectionEnd property to 40.

   XAML

   <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>
   

7. Run the application to see the result.