The requested page is not available for the requested platform. You are viewing the content for Default platform.

Lesson 2 - Creating a Linear Gauge

  • 7 min 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 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.18.2: Visualization toolbox tab.

lesson2-01-toolbox

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.

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: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.

After performing these actions, the gauge should look like the image below.

Lesson2_Step1_Result

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.

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.

    Lesson2_AddRange

  • Set the RangeBase.StartValue property to 40 and the RangeBase.EndValue property to 60.

    Lesson2_Range_StartEndValue

  • 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).

    Lesson2_Range_Options_Fill

  • 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.

lesson2-result