Tickmarks

• Nov 28, 2023
• 2 minutes to read

The RadialGauge control can show tickmarks on its scales.

Add Tickmarks and Configure Their Appearance

To add major tickmarks, set the RadialScale.MajorTickmarkCount property to a positive integer. Disable RadialScale.ShowFirstTickmark and RadialScale.ShowLastTickmark properties to hide the first and last tickmarks.

You can also add minor tickmarks. To do so, specify the RadialScale.MinorTickmarkCount property that controls the number of minor tickmarks between two neighboring major tickmarks.

XAML

<dxga:RadialScale ...
                  MajorTickmarkCount="7" MinorTickmarkCount="2"
                  ShowFirstTickmark="False" ShowLastTickmark="False"/>

Use the properties below to customize tickmark appearance:

MajorTickmarkColor | MinorTickmarkColor

Specify the fill color for tickmarks.

MajorTickmarkLength | MinorTickmarkLength

Specify tickmark length in device-independent pixels.

MajorTickmarkPosition | MinorTickmarkPosition

Define the position of tickmarks.

MajorTickmarkOffset | MinorTickmarkOffset

Specify tickmark offset from the center of a scale arc in device-independent pixels. In Inside position, tickmarks are shifted to the gauge center. In Center and Outside positions, tickmarks are shifted opposite from the center.

MajorTickmarkThickness | MinorTickmarkThickness

Define tickmark thickness.

Configure Tickmarks Based on a Condition

You can handle the RadialScale.CustomizeTickmark event to customize tickmark drawing options or apply custom icons to tickmarks based on custom logic. The RadialGauge control raises the CustomizeTickmark event for each major tickmark on the scale.

XAML

<dxga:RadialScale ...
                  CustomizeTickmark="RadialScaleCustomizeTickmark"/>

C#

using DevExpress.Maui.Gauges;
using SkiaSharp;
//...
private void RadialScaleCustomizeTickmark(object sender, CustomizeTickmarkEventArgs e) {
    if (e.IsMajor) {
        SKPath path = new SKPath();
        path.AddCircle(0.5f, 0.5f, 1f);
        e.Length = e.Value * 0.04d;
        e.Path = path;
    } 
}

Show Tickmark Value Labels

When you add major tickmarks to a scale (RadialScale.MajorTickmarkCount), the gauge automatically adds value labels to these tickmarks. You can use the RadialScale.ShowTickmarkLabels property to hide labels.

The following properties control label text options:

• TickmarkLabelColor
• TickmarkLabelFontAttributes
• TickmarkLabelFontFamily
• TickmarkLabelFontSize
• TickmarkLabelFormat
• TickmarkLabelOffset
• TickmarkLabelPosition

XAML

<dxga:RadialScale ...
                  MajorTickmarkCount="11"
                  ShowTickmarkLabels="True"
                  TickmarkLabelColor="Gray"
                  TickmarkLabelFontAttributes="Bold"
                  TickmarkLabelFontFamily="Roboto"
                  TickmarkLabelFontSize="14"
                  TickmarkLabelFormat="f1"
                  TickmarkLabelOffset="10"
                  TickmarkLabelPosition="Outside" />

Configure Tickmark Labels Based on a Condition

You can handle the RadialScale.CustomizeTickmarkLabel event to customize label drawing options based on custom logic. The RadialGauge control raises the CustomizeTickmarkLabel event for each tickmark label on the scale.

XAML

<dxga:RadialScale ...
                  CustomizeTickmarkLabel="RadialScaleCustomizeTickmarkLabel"/>

C#

using DevExpress.Maui.Gauges;
//...
private void RadialScaleCustomizeTickmarkLabel(object sender, CustomizeTickmarkLabelEventArgs e) {
    if (e.Value < 0) { e.LabelColor = Color.FromRgb(241, 6, 50); }
    else if (e.Value == 0 ) { e.LabelColor = Color.FromRgb(235, 164, 26); }
    else if (e.Value > 0) { e.LabelColor = Color.FromRgb(60, 149, 0); }
}