Lesson 2 - Create a Linear Gauge

  • 6 minutes to read

This is the second tutorial of the DXGauges Getting Started series. It will guide you through the process of creating a Linear gauge and adjusting its common settings.

This tutorial consists of the following steps.

  1. Create a New Project and Add a Gauge Control
  2. Add a Scale and a Level Bar
  3. Add a Secondary Scale
  4. Add a Marker and Custom Labels
  5. Specify Ranges
  6. Result

Step 1. Create a New Project and Add a Gauge Control

In this step we will perform the common actions that are required when you add a Gauge control to your application.

  • Run MS Visual Studio 2012, 2013, 2015, 2017 or 2019.
  • Create a new WPF Application project.
  • Now add the LinearGaugeControl component to your project. To do this, locate the LinearGaugeControl item in a Visual Studio toolbox on the DX.20.1: Data & Analytics tab and drop it onto the main window.

    Lesson2_01_SelectionLinearGauge

In this lesson we demonstrate how to create a simple thermometer using LinearGaugeControl.

  • To set a style for a conventional thermometer, set the LinearGaugeControl.Model property to LinearRedThermometerModel.
  • To adjust a gauge's layout, set its Margin property to 0, 24, 0, 20.

After performing these steps, your MainWindow may look as follows.

Lesson 2_02_MainWindow

Also your XAML should be similar to the following.

<Window x:Class="DXGauges_Linear.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges">
        Title="MainWindow" Height="450" Width="525" 
    <Grid>
        <dxga:LinearGaugeControl Name="linearGaugeControl1" Margin="0,24,0,20">                                 
            <dxga:LinearGaugeControl.Model>
                <dxga:LinearRedThermometerModel />
            </dxga:LinearGaugeControl.Model>
        </dxga:LinearGaugeControl>
    </Grid>
</Window>

Now we have a Gauge control added to our application and can customize it to meet our requirements.

Step 2. Add a Scale and a Level Bar

Scales are the main elements of a Gauge control because they contain all other elements, and a level bar is critical for a thermometer because it demonstrates the current temperature value.

After that our XAML for the first scale will look as follows.

<dxga:LinearGaugeControl.Scales>
      <dxga:LinearScale StartValue="-40" EndValue="120" 
                        MajorIntervalCount="8" Width="60">
          <dxga:LinearScale.Layers>
              <dxga:LinearScaleLayer />
          </dxga:LinearScale.Layers>
          <dxga:LinearScale.LevelBars>
              <dxga:LinearScaleLevelBar Value="59" />
          </dxga:LinearScale.LevelBars>
      </dxga:LinearScale>
  </dxga:LinearGaugeControl.Scales>

And the gauge control will be similar to the following.

Lesson2_05_Thermometer_with_one scale

Step 3. Add a Secondary Scale

In many cases some thermometers display two scales - to the left and to the right of the level bar - to better indicate the current value. In this step we will demonstrate how to add a secondary scale to create a similar thermometer.

After performing these actions, XAML for the second scale should look like the following.

<dxga:LinearScale StartValue="-40" EndValue="120" 
                  MajorIntervalCount="8" Margin="68,0,0,0" >
    <dxga:LinearScale.LabelOptions>
        <dxga:LinearScaleLabelOptions Offset="3" />
    </dxga:LinearScale.LabelOptions>
    <dxga:LinearScale.MinorTickmarkOptions>
        <dxga:MinorTickmarkOptions Offset="-16" />
    </dxga:LinearScale.MinorTickmarkOptions>
</dxga:LinearScale>

MainWindow should be similar to this.

Lesson2_06_Thermometer_with_two_scalws

Step 4. Add a Marker and Custom Labels

Markers are usually intended to indicate any "fixed" value on a scale. In our example, we will use a marker to display an average month temperature (e.g. New York's temperature in May). And custom labels will be used to display units of measurement of our thermometer.

See the result.

Lesson2_07_Thermometer_with_labels_and_marker

Step 5. Specify Ranges

Ranges are intended to visually identify different intervals on a scale. On our scales, for demonstration purposes, we will show several equal ranges that indicate values lower or higher than water freezing temperature.

  • Select the first LinearScale object, for the LinearScale.Ranges property, invoke the Ranges Collection editor and add two LinearScaleRange objects. Then set its properties as follows.
  • For the first range, set its RangeBase.StartValue property to -40 and RangeBase.EndValue to 32, DefaultLinearScaleRangePresentation.Fill to LightBlue.

    Lesson2_08_First_Range

  • For the secondary range, set its RangeBase.StartValue property to 32 and RangeBase.EndValue to 120, DefaultLinearScaleRangePresentation.Fill to Tomato.

    Lesson2_09_Secondary_Range

  • Perform the same actions for the secondary LinearScale object.

Step 6. Result

Now our Gauge control is ready.

<Window x:Class="DXGauges_Linear.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxga="http://schemas.devexpress.com/winfx/2008/xaml/gauges"
        Title="MainWindow" Height="450" Width="525" >
    <Grid>
        <dxga:LinearGaugeControl Name="linearGaugeControl1" Margin="0,24,0,20">                                
            <dxga:LinearGaugeControl.Model>
                <dxga:LinearRedThermometerModel />
            </dxga:LinearGaugeControl.Model>
            <dxga:LinearGaugeControl.Scales>
                <dxga:LinearScale StartValue="-40" EndValue="120" 
                                  MajorIntervalCount="8" Width="60">
                    <dxga:LinearScale.Ranges>
                        <dxga:LinearScaleRange StartValue="-40" EndValue="32">
                            <dxga:LinearScaleRange.Presentation>
                                <dxga:DefaultLinearScaleRangePresentation Fill="LightBlue" />
                            </dxga:LinearScaleRange.Presentation>
                        </dxga:LinearScaleRange>
                        <dxga:LinearScaleRange StartValue="32" EndValue="120">
                            <dxga:LinearScaleRange.Presentation>
                                <dxga:DefaultLinearScaleRangePresentation Fill="Tomato" />
                            </dxga:LinearScaleRange.Presentation>
                        </dxga:LinearScaleRange>
                    </dxga:LinearScale.Ranges>
                    <dxga:LinearScale.CustomLabels>
                        <dxga:ScaleCustomLabel Content="??F" Offset="-45" Value="-45" />
                    </dxga:LinearScale.CustomLabels>
                    <dxga:LinearScale.Layers>
                        <dxga:LinearScaleLayer />
                    </dxga:LinearScale.Layers>
                    <dxga:LinearScale.LevelBars>
                        <dxga:LinearScaleLevelBar Value="59" />
                    </dxga:LinearScale.LevelBars>
                </dxga:LinearScale>
                <dxga:LinearScale StartValue="-40" EndValue="120" 
                                  MajorIntervalCount="8" Margin="68,0,0,0" >
                    <dxga:LinearScale.Ranges>
                        <dxga:LinearScaleRange StartValue="-40" EndValue="32">
                            <dxga:LinearScaleRange.Presentation>
                                <dxga:DefaultLinearScaleRangePresentation Fill="LightBlue" />
                            </dxga:LinearScaleRange.Presentation>
                        </dxga:LinearScaleRange>
                        <dxga:LinearScaleRange StartValue="32" EndValue="120">
                            <dxga:LinearScaleRange.Presentation>
                                <dxga:DefaultLinearScaleRangePresentation Fill="Tomato" />
                            </dxga:LinearScaleRange.Presentation>
                        </dxga:LinearScaleRange>
                    </dxga:LinearScale.Ranges>
                    <dxga:LinearScale.Markers>
                        <dxga:LinearScaleMarker Value="68" />
                    </dxga:LinearScale.Markers>
                    <dxga:LinearScale.CustomLabels>
                        <dxga:ScaleCustomLabel Content="??F" Offset="-7" Value="-45" />
                    </dxga:LinearScale.CustomLabels>
                    <dxga:LinearScale.MinorTickmarkOptions>
                        <dxga:MinorTickmarkOptions Offset="-16" />
                    </dxga:LinearScale.MinorTickmarkOptions>
                    <dxga:LinearScale.LabelOptions>
                        <dxga:LinearScaleLabelOptions Offset="3" />
                    </dxga:LinearScale.LabelOptions>
                </dxga:LinearScale>
            </dxga:LinearGaugeControl.Scales>
        </dxga:LinearGaugeControl>
    </Grid>
</Window>

Run the application and see the result.

Lesson2_10_Final_thermometer

TIP

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E3254.

See Also