CircularGaugeControl Class

A Circular Gauge control shipped with the DXGauges Suite.

Namespace: DevExpress.Xpf.Gauges

Assembly: DevExpress.Xpf.Gauges.v18.2.dll

Declaration

C#

public class CircularGaugeControl :
    AnalogGaugeControl

VB.NET

Public Class CircularGaugeControl
    Inherits AnalogGaugeControl

Remarks

The CircularGaugeControl class is a visual gauge control intended for creating speedometers, tachometers, stopwatches, clocks, etc.

The following images show some examples of a circular gauge.

Weather Forecast	World Time

A gauge control is comprised of separate elements, such as needles, scales, markers, range bars, ranges, etc. To learn more about them, refer to the Visual Elements (Circular Gauge) section.

Example

This example illustrates how to create a CircularGaugeControl instance with a single ArcScale object.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/dxgauges-getting-started-lesson-1-create-a-circular-gauge-e3199.

MainWindow.xaml

<Window x:Class="DXGauges_Circular.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="350" Width="525">
    <Grid>
        <dxga:CircularGaugeControl Name="circularGaugeControl1" >
            <dxga:CircularGaugeControl.Model>
                <dxga:CircularRedClockModel />
            </dxga:CircularGaugeControl.Model>
            <dxga:CircularGaugeControl.Scales>
                <dxga:ArcScale StartValue="0" EndValue="12" 
                               StartAngle="-90" EndAngle="270"
                               MajorIntervalCount="12" MinorIntervalCount="5">
                    <dxga:ArcScale.LabelOptions>
                        <dxga:ArcScaleLabelOptions ShowFirst="False" Orientation="LeftToRight" />
                    </dxga:ArcScale.LabelOptions>
                    <dxga:ArcScale.Needles>
                        <dxga:ArcScaleNeedle Value="3" />
                        <dxga:ArcScaleNeedle Value="12" />
                    </dxga:ArcScale.Needles>
                    <dxga:ArcScale.Markers>
                        <dxga:ArcScaleMarker Value="7" />
                    </dxga:ArcScale.Markers>
                    <dxga:ArcScale.RangeBars>
                        <dxga:ArcScaleRangeBar AnchorValue="7" Value="3" />
                    </dxga:ArcScale.RangeBars>
                    <dxga:ArcScale.Layers>
                        <dxga:ArcScaleLayer />
                    </dxga:ArcScale.Layers>
                    <dxga:ArcScale.Ranges>
                        <dxga:ArcScaleRange StartValue="0" EndValue="4" />
                        <dxga:ArcScaleRange StartValue="4" EndValue="8" />
                        <dxga:ArcScaleRange StartValue="8" EndValue="12" />
                    </dxga:ArcScale.Ranges>
                </dxga:ArcScale>
            </dxga:CircularGaugeControl.Scales>
        </dxga:CircularGaugeControl>
    </Grid>
</Window>

Related GitHub Examples

The following code snippets (auto-collected from DevExpress Examples) contain references to the CircularGaugeControl class.

Note

The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.

C#

how-to-determine-whether-an-indicators-value-falls-into-a-particular-range-e3328/CS/MainWindow.xaml#L16

<!---->
<dxga:CircularGaugeControl Grid.RowSpan="2"
                           EnableAnimation= "True">

pivotgridcontrol-and-gaugecontrol-integration-e3332/CS/PivotGauges/MainWindow.xaml#L76

<TextBlock Text="Progress to Target" FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" />
<dxga:CircularGaugeControl Name="circularGaugeControl1" Width="290" Height="290">
    <dxga:CircularGaugeControl.Scales>

how-to-display-tooltips-for-gauge-elements-e3406/CS/DXGauges_ShowTooltips/MainWindow.xaml#L18

</dxe:CheckEdit>
<dxga:CircularGaugeControl Name="circularGaugeControl1" Grid.Row="1"
                           MouseMove="circularGaugeControl1_MouseMove"

how-to-edit-time-with-dateedit-in-vista-mode-t159077/CS/DatetimeEditor/Clock.xaml#L10

<Grid>
    <dxga:CircularGaugeControl>
        <dxga:CircularGaugeControl.Model>

how-to-resize-gaugecontrol-on-printing-exporting-t274220/CS/WpfApplication72/MainWindow.xaml#L17

<Grid>
    <dxga:CircularGaugeControl x:Name="gauge">
        <dxga:CircularGaugeControl.Layers>

Inheritance

Object

DispatcherObject

DependencyObject

Visual

UIElement

FrameworkElement

Control

GaugeControlBase

AnalogGaugeControl

CircularGaugeControl

Extension Methods

GetErrorOperationCommands(Position)

GetErrorOperationCommands(Int32)

GetErrorOperationCommands(Point)