ComponentOne Gauge for UWP
Adding Tick Marks to the Gauge
Gauges for UWP Task-Based Help > Adding Tick Marks to the Gauge

You can add tick marks to the C1LinearGauge control through the Properties window, XAML, or through code. Although this topic sets the C1GaugeMark properties of the C1LinearGauge control, the same steps can be used to customize the C1GaugeMark of other controls.


At Design Time
To add tick marks to the C1LinearGauge control in the Properties window at design time, complete the following steps:

  1. Click the C1LinearGauge control to select it.
  2. Navigate to the Properties window, and click the ellipsis button next to the Decorators property. The C1GaugeDecorator Collection Editor will open.
  3. Select C1GaugeMark from the drop-down available on the left side of the editor and click the Add button. A C1GaugeMark decorator will be added to the collection and will be selected.
  4. In the right-side properties pane, set the C1GaugeMark element's Location property to 1.1.
  5. Set the C1GaugeLabel element's C1GaugeLabel.Interval to 20.
  6. Select C1GaugeMark from the drop-down available on the left side of the editor and click the Add button. A second C1GaugeMark decorator will be added to the collection and will be selected.
  7. In the right-side properties pane, set the C1GaugeMark element's C1GaugeDecorator.Location to 1.1.
  8. Set the C1GaugeLabel element's C1GaugeLabel.Interval to 10.
  9. Select C1GaugeMark from the drop-down available on the left side of the editor and click the Add button. A third C1GaugeMark decorator will be added to the collection and will be selected.
  10. In the right-side properties pane, set the C1GaugeMark element's C1GaugeDecorator.Location to 1.1.
  11. Set the C1GaugeLabel element's C1GaugeLabel.Interval to 5.

In XAML

To add labeling to the C1LinearGauge control in XAML add three <Gauge:C1GaugeMark> tags to the <Gauge:C1LinearGauge> tag so that it appears similar to the following:

Markup
Copy Code
<Gauge:C1LinearGauge Height="89" Margin="90,72,41,88" Name="C1LinearGauge1" Width="287">
    <Gauge:C1GaugeMark Interval="20" Location="1.1" />
    <Gauge:C1GaugeMark Interval="10" Location="1.1" />
    <Gauge:C1GaugeMark Interval="5" Location="1.1" />
</Gauge:C1LinearGauge>

In Code

Right-click the window and click View Code to switch to the Code Editor. And add code to the main class, so it appears similar to the following:

Visual Basic
Copy Code
Public Sub New()
InitializeComponent()
    Dim c1gm1 As New C1.Xaml.Gauge.C1GaugeMark
    c1gm1.Location = 1.1
    c1gm1.Interval = 20
    Me.C1LinearGauge1.Decorators.Add(c1gm1)
    Dim c1gm2 As New C1.Xaml.Gauge.C1GaugeMark
    c1gm2.Location = 1.1
    c1gm2.Interval = 10
    Me.C1LinearGauge1.Decorators.Add(c1gm2)
    Dim c1gm3 As New C1.Xaml.Gauge.C1GaugeMark
    c1gm3.Location = 1.1
    c1gm3.Interval = 5
    Me.C1LinearGauge1.Decorators.Add(c1gm3)
End Sub

C#
Copy Code
public MainPage(){
InitializeComponent();
    C1.Xaml.Gauge.C1GaugeLabel c1gm1 = new C1.Xaml.Gauge.C1GaugeMark();
    c1gm1.Location = 1.1;
    c1gm1.Interval = 20;
    this.C1LinearGauge1.Decorators.Add(c1gm1);
    C1.Xaml.Gauge.C1GaugeLabel c1gm2 = new C1.Xaml.Gauge.C1GaugeMark();
    c1gm2.Location = 1.1;
    c1gm2.Interval = 10;
    this.C1LinearGauge1.Decorators.Add(c1gm2);
    C1.Xaml.Gauge.C1GaugeLabel c1gm3 = new C1.Xaml.Gauge.C1GaugeMark();
    c1gm3.Location = 1.1;
    c1gm3.Interval = 5;
    this.C1LinearGauge1.Decorators.Add(c1gm3);
}

Run your project and observe:

The C1LinearGauge control will appear with tick marks of three sizes:

See Also