Lesson 1 - Creating a Circular Gauge

This is the first tutorial in the Gauges Getting Started series. It will guide you through the process of creating a Circular Gauge and adjusting its common settings.

This tutorial consists of the following steps:

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

  • Run MS Visual Studio 2015 or 2017.
  • Create a new Universal Windows Platform application by selecting New Project from the File menu or by pressing Ctrl+Shift+N. Next, select Windows| Universal and choose Blank App (Universal Windows).

    Name this application "CircularGaugeLesson" and click OK.

    lesson1-01-create-new

  • Switch to the MainPage.xaml design view and add the CircularGauge control to the main page by dragging and dropping the CircularGauge item from the DX.18.1: Visualization toolbox tab.

    lesson1-02-toolbox

    Note

    The following SDK extensions will be added to the References list in your project: DevExpress.Core and DevExpress.Visualization.

  • Right-click the CircularGauge object and choose the Reset Layout | All option in the context menu. This will stretch the gauge to fill the entire window.

    lesson1-03-reset-layout

Your XAML should look like the following. If it doesn't, you can overwrite your code as follows:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Gauges="using:DevExpress.UI.Xaml.Gauges"
    x:Class="CircularGaugeLesson.MainPage">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Gauges:CircularGauge/>
    </Grid>
</Page>

Step 2. Add a Scale

Scales are the main elements of a Gauge control because they contain all other visual elements. The Gauge control can consist of multiple scales, each with an independent set of elements and options, and all scales are stored in the CircularGauge.Scales collection.

In this lesson, you only need to add one scale for demonstration purposes.

After performing these actions the gauge should look like this.

Lesson1_Step1_Result

Note

The appearance of a Gauge control can be customized using various options. For instance, you can control the visibility of different scale elements via the ArcScale.ShowSpindleCap, Scale.ShowMajorTickmarks, Scale.ShowMinorTickmarks, Scale.ShowLabels and Scale.ShowLine properties.

Step 3. Add Value Indicators

In this step, you can add basic elements that visually represent current values on a Circular scale. In most cases, Circular scales support three indicator types: Needles, Markers and Range Bars.

  • Add a Needle element that will indicate the current measurement value (e.g. the current time in hours).

    To do this, locate the ArcScale.Needles property of the arc scale that was added in the previous step, invoke the Needles collection editor and click Add.

    Lesson1_AddNeedle

    Then set the ValueIndicatorBase.Value property of the newly created ArcScaleNeedle object to 3.

    lesson1-05-hours-needle

  • Add one more needle to our clock to show minutes and set its ValueIndicatorBase.Value property to 12.
  • Add a Marker that will indicate any "fixed" value on a scale (e.g., an alarm that should ring at 7:00).

    To do this, locate the ArcScale.Markers property, invoke the Markers collection editor and click Add.

    Lesson1_AddMarkers

    Then set the ValueIndicatorBase.Value property of the newly created ArcScaleMarker object to 7.

    lesson1-07-marker

  • Now add a Range Bar that will indicate the difference between any "anchored" value and the current value.

    To do this, locate the ArcScale.RangeBars property, invoke the RangeBars collection editor and click Add.

    Lesson1_AddRangeBar

    Then, bind the ArcScaleRangeBar.AnchorValue property of the newly created ArcScaleRangeBar object to the ValueIndicatorBase.Valueproperty of the previously added ArcScaleMarker. To do this, click the property marker and select Create Data Binding... item.

    Lesson1_AnchorValue

    In the invoked Data Binding Editor select the Value property of the Marker.

    Lesson1_AnchorValue_DataBinding

    Bind the ValueIndicatorBase.Value property to the ValueIndicatorBase.Value of the first added needle. To do this, click the property marker, then select the Create Data Binding... item. In the invoked editor, select the Value property of the needle.

    Lesson1_Value_DataBinding

Result

Now our gauge application is ready. Your XAML should appear as follows.

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Gauges="using:DevExpress.UI.Xaml.Gauges"
    x:Class="CircularGaugeLesson.MainPage">

    <Grid 
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Gauges:CircularGauge>
            <Gauges:ArcScale x:Name="arcScale"
                StartAngle="-90"
                EndAngle="270" 
                StartValue="0"
                EndValue="12" 
                MajorIntervalCount="12">
                <Gauges:ArcScale.Markers>
                    <Gauges:ArcScaleMarker 
                        Value="7"/>
                </Gauges:ArcScale.Markers>
                <Gauges:ArcScale.Needles>
                    <Gauges:ArcScaleNeedle 
                        Value="3"/>
                    <Gauges:ArcScaleNeedle 
                        Value="12"/>
                </Gauges:ArcScale.Needles>
                <Gauges:ArcScale.RangeBars>
                    <Gauges:ArcScaleRangeBar
                        AnchorValue="{Binding Markers[0].Value, ElementName=arcScale}"
                        Value="{Binding Needles[0].Value, ElementName=arcScale}"/>
                </Gauges:ArcScale.RangeBars>
                <Gauges:ArcScale.LabelOptions>
                    <Gauges:ArcScaleLabelOptions 
                        ShowFirst="False"/>
                </Gauges:ArcScale.LabelOptions>
            </Gauges:ArcScale>
        </Gauges:CircularGauge>
    </Grid>
</Page>

Run the project. The following image illustrates the resulting gauge at runtime.

lesson1-result