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