How to: Show Two Circular Scales Side-by-Side
This example demonstrates the process of creating a Circular gauge with two side-by-side scales.
To do this, it is necessary to define a custom panel template and assign it to the AnalogGaugeControl.ScalePanelTemplate property. For example, the code below illustrates how to use System.Windows.Controls.Grid to arrange two ArcScale objects side-by-side in two columns.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/how-to-show-two-circular-scales-side-by-side-e3308.
<Window x:Class="SideBySideCircularScales.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">
<!--region #ScalePanelTemplate-->
<dxga:CircularGaugeControl.ScalePanelTemplate>
<ItemsPanelTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</dxga:CircularGaugeControl.ScalePanelTemplate>
<!--endregion #ScalePanelTemplate-->
<dxga:CircularGaugeControl.Scales>
<dxga:ArcScale StartValue="0" EndValue="60"
StartAngle="-90" EndAngle="270"
Grid.Column="0"
MajorIntervalCount="12">
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle Value="15" />
</dxga:ArcScale.Needles>
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions ShowFirst="False" />
</dxga:ArcScale.LabelOptions>
</dxga:ArcScale>
<dxga:ArcScale StartValue="0" EndValue="60"
StartAngle="-90" EndAngle="270"
Grid.Column="1"
MajorIntervalCount="12">
<dxga:ArcScale.Needles>
<dxga:ArcScaleNeedle Value="5" />
</dxga:ArcScale.Needles>
<dxga:ArcScale.LabelOptions>
<dxga:ArcScaleLabelOptions ShowFirst="False" />
</dxga:ArcScale.LabelOptions>
</dxga:ArcScale>
</dxga:CircularGaugeControl.Scales>
</dxga:CircularGaugeControl>
</Grid>
</Window>