Lesson 4 - Creating a RangeControl

This document demonstrates how to create a RangeControl and bind it to data.

Follow these steps.

  1. Run MS Visual Studio 2015.
  2. Create a new Windows Universal Application project. Choose New Project on the File menu or press Ctrl+Shift+N, choose the Windows Universal template category, and then choose Blank App (XAML).

    New_Project

  3. Open the MainPage.xaml.cs file and add data classes. In XAML, set DataContext:

    <Grid>
        <Grid.DataContext>
            <local:DateTimeViewModel Count="1000" Step="06:00:00" Start="10000" />
        </Grid.DataContext>
    </Grid>
    
  4. Open the Visual Studio toolbox and locate the "DX.18.2: Common Controls" tab. Choose the RangeControl toolbox item and drop it onto the window.

    Note

    Dropping the RangeControl toolbox item onto the window will automatically add all of the required references (DevExpress.Core and DevExpress.Controls). To add the RangeControl in code, reference these assemblies manually.

  5. Right-click the RangeControl and select Reset Layout - All.
  6. Press the F4 key to invoke the Properties window. Set the editor's ShowRangeThumbs and ShowRangeBar properties to true.

    <Controls:RangeControl ShowRangeThumbs="True" ShowRangeBar="True"/>
    
  7. Set the Range Control Client. Locate the Content property and press the New button to invoke a SelectObject dialog box.

    rangecontrol content

  8. Select SparkPointClient and press OK.
  9. Bind the Range Control Client to data using its ItemsSource, ValueMember and DisplayMember properties. The code below shows how to do it in XAML.

    <Controls:RangeControl ShowRangeThumbs="True" ShowRangeBar="True">
        <Controls:SparkPointClient DisplayMember="DisplayValue" ValueMember="Value" ItemsSource="{Binding Path=ItemsSource}" />
    </Controls:RangeControl>
    
  10. Customize the Range Control Client. Set its ValueScaleType property to DateTime and the DisplayScaleType to Numeric to process data correctly. Set the ShowAxisLabels, ShowAxisXGridLines and ShowAxisXMinorGridLines properties to true to display the vertical axis.

    <Controls:RangeControl ShowRangeThumbs="True" ShowRangeBar="True">
                <Controls:SparkPointClient
                                ShowAxisLabels="True" 
                                ShowAxisXGridLines="True" 
                                ShowAxisXMinorGridLines="True"
                                DisplayMember="DisplayValue"
                                ValueMember="Value"
                                DisplayScaleType="DateTime"
                                ValueScaleType="Numeric" ItemsSource="{Binding Path=ItemsSource}" >
                </Controls:SparkPointClient>
            </Controls:RangeControl>
    
  11. Locate the Range Control Client's IntervalFactories property and invoke the IntervalFactory Collection Editor:

    intervalfactories_property

  12. Add a MonthIntervalFactory and a DayIntervalFactory (to limit zooming) and press OK.

    intervalfactory collection editor

    The XAML should look like the following:

    <Page
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:RangeControl_example"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:Controls="using:DevExpress.UI.Xaml.Controls"
        x:Class="RangeControl_example.MainPage"
        mc:Ignorable="d">
    
        <Grid>
            <Grid.DataContext>
                <local:DateTimeViewModel Count="1000" Step="06:00:00" Start="10000" />
            </Grid.DataContext>
            <Controls:RangeControl ShowRangeThumbs="True" ShowRangeBar="True">
                <Controls:SparkPointClient
                                ShowAxisLabels="True" 
                                ShowAxisXGridLines="True" 
                                ShowAxisXMinorGridLines="True"
                                DisplayMember="DisplayValue"
                                ValueMember="Value"
                                DisplayScaleType="DateTime"
                                ValueScaleType="Numeric" ItemsSource="{Binding Path=ItemsSource}" >
                    <Controls:SparkPointClient.IntervalFactories>
                        <Controls:MonthIntervalFactory/>
                        <Controls:DayIntervalFactory/>
                    </Controls:SparkPointClient.IntervalFactories>
                </Controls:SparkPointClient>
            </Controls:RangeControl>
    
        </Grid>
    </Page>
    
  13. Run the example to see the result:

    RangeControl_gettingstarted