Lesson 2 - Creating a Linear Gauge
- 7 minutes to read
This is the second tutorial in the Gauges 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:
- Step 1. Create a New Project and Add a Linear Gauge Control
- Step 2. Add a Scale
- Step 3. Add Value Indicators
- Step 4. Add Ranges
- 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. Switch to the MainPage.xaml design view and add the LinearGauge control to the main page by dragging and dropping the LinearGauge 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 LinearGauge 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:LinearGauge/>
</Grid>
</Page>
Step 2. Add a Scale
Scales are the main elements of a Gauge control because they contain all other visual elements. The Linear Gauge control can consist of multiple scales, each with an independent set of elements and options, and all scales are stored in the LinearGauge.Scales collection.
In this lesson, you only need to add one scale for demonstration purposes.
To add a scale, locate the LinearGauge.Scales property in the Properties window and click the ellipsis button to invoke the Scales collection editor. In this editor, add a new LinearScale object using the Add button.
Set Scale.StartValue to 40 and Scale.EndValue to 90.
Set Scale.MajorIntervalCount to 5.
After performing these actions, the gauge should look like the image below.
Step 3. Add Value Indicators
In this step, you can add basic elements that visually represent current values on a Linear scale. In most cases, Linear scales support three indicator types: Level bars, Markers and Range bars.
Add a Level Bar element that will indicate the current measurement value.
To do this, locate the LinearScale.LevelBars property of the linear scale that was added in the previous step, invoke the Level bar collection editor and click Add.
Then, set the ValueIndicatorBase.Value property of the newly created LinearScaleLevelBar object to 72.
Add a Marker that will indicate any “fixed” value on a scale.
To do this, locate the LinearScale.Markers property, invoke the Markers collection editor and click Add.
Then, set the ValueIndicatorBase.Value property of the newly created LinearScaleMarker object to 80.
Step 4. Add Ranges
Ranges are intended to visually identify different intervals on a scale.
To add a range, locate the ArcScale.Ranges property, invoke the Ranges collection editor and click Add.
Set the RangeBase.StartValue property to 40 and the RangeBase.EndValue property to 60.
Specify the color of the range. To do this, set the GaugeOptionsBase.Fill property of an RangeOptions object stored in the RangeBase.Options property. Set the Fill property to (R=68, G=114, B=196).
Repeat these actions to add two ranges with the following parameters.
Start value End value Fill color 60 80 (R=112, G=173, B=71) 80 90 (R=204, G=33, B=14)
Result
The application is done and the XAML should look like the following.
Imports System
Imports System.Collections.Generic
Imports System.IO
Imports System.Linq
Imports System.Runtime.InteropServices.WindowsRuntime
Imports Windows.ApplicationModel
Imports Windows.ApplicationModel.Activation
Imports Windows.Foundation
Imports Windows.Foundation.Collections
Imports Windows.UI.Xaml
Imports Windows.UI.Xaml.Controls
Imports Windows.UI.Xaml.Controls.Primitives
Imports Windows.UI.Xaml.Data
Imports Windows.UI.Xaml.Input
Imports Windows.UI.Xaml.Media
Imports Windows.UI.Xaml.Navigation
Namespace LinearGaugesLesson
''' <summary>
''' Provides application-specific behavior to supplement the default Application class.
''' </summary>
Friend NotInheritable Partial Class App
Inherits Application
''' <summary>
''' Initializes the singleton application object. This is the first line of authored code
''' executed, and as such is the logical equivalent of main() or WinMain().
''' </summary>
Public Sub New()
Me.InitializeComponent()
AddHandler Me.Suspending, AddressOf OnSuspending
End Sub
''' <summary>
''' Invoked when the application is launched normally by the end user. Other entry points
''' will be used such as when the application is launched to open a specific file.
''' </summary>
''' <param name="e">Details about the launch request and process.</param>
Protected Overrides Sub OnLaunched(ByVal e As LaunchActivatedEventArgs)
'#if DEBUG
' if (System.Diagnostics.Debugger.IsAttached)
' {
' this.DebugSettings.EnableFrameRateCounter = true;
' }
'#endif
Dim rootFrame As Frame = TryCast(Window.Current.Content, Frame)
' Do not repeat app initialization when the Window already has content,
' just ensure that the window is active
If rootFrame Is Nothing Then
' Create a Frame to act as the navigation context and navigate to the first page
rootFrame = New Frame()
AddHandler rootFrame.NavigationFailed, AddressOf OnNavigationFailed
If e.PreviousExecutionState = ApplicationExecutionState.Terminated Then
'TODO: Load state from previously suspended application
End If
' Place the frame in the current Window
Window.Current.Content = rootFrame
End If
If rootFrame.Content Is Nothing Then
' When the navigation stack isn't restored navigate to the first page,
' configuring the new page by passing required information as a navigation
' parameter
rootFrame.Navigate(GetType(MainPage), e.Arguments)
End If
' Ensure the current window is active
Window.Current.Activate()
End Sub
''' <summary>
''' Invoked when Navigation to a certain page fails
''' </summary>
''' <param name="sender">The Frame which failed navigation</param>
''' <param name="e">Details about the navigation failure</param>
Private Sub OnNavigationFailed(ByVal sender As Object, ByVal e As NavigationFailedEventArgs)
Throw New Exception("Failed to load Page " & e.SourcePageType.FullName)
End Sub
''' <summary>
''' Invoked when application execution is being suspended. Application state is saved
''' without knowing whether the application will be terminated or resumed with the contents
''' of memory still intact.
''' </summary>
''' <param name="sender">The source of the suspend request.</param>
''' <param name="e">Details about the suspend request.</param>
Private Sub OnSuspending(ByVal sender As Object, ByVal e As SuspendingEventArgs)
Dim deferral = e.SuspendingOperation.GetDeferral()
'TODO: Save application state and stop any background activity
deferral.Complete()
End Sub
End Class
End Namespace
Run the project. The following image illustrates the resulting gauge at runtime.
