Lesson 1 - Creating a Circular Gauge
- 5 minutes to read
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
- Step 2. Add a Scale
- Step 3. Add Value Indicators
- Result
Step 1. Create a New Project and Add a Circular Gauge Control
- Run MS Visual Studio 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.
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.19.2: Visualization toolbox tab.
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.
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.
To add a scale, locate the CircularGauge.Scales property in the Properties window and click the ellipsis button to invoke the Scales collection editor. In this editor, add a new ArcScale object using the Add button.
Set Scale.StartValue to 0 and Scale.EndValue to 12 to count its values from 0 to 12, similar to the hours of an actual clock.
Set ArcScale.StartAngle to -90 and ArcScale.EndAngle to 270 to close the Circular scale and make it similar to an actual clock.
Set Scale.MajorIntervalCount to 12 and Scale.MinorIntervalCount to 5 to show a total of 12 hour ticks and 5 minute ticks in each hour tick.
The Gauge control should look as shown in the image below.
Note, that the start value and end value are shown in the same place. To improve the gauge appearance, set the ScaleLabelOptions.ShowFirst property to False.
After performing these actions the gauge should look like this.
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.
Then set the ValueIndicatorBase.Value property of the newly created ArcScaleNeedle object to 3.
- 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.
Then set the ValueIndicatorBase.Value property of the newly created ArcScaleMarker object to 7.
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.
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.
In the invoked Data Binding Editor select the Value property of the Marker.
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.
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.
