Customizing Tick Marks

In This Topic

By default, gauge marks are drawn as blue-gray rectangles. You can customize their appearance by assigning a custom template to the C1GaugeMark.Template property of the C1GaugeMark element. In the following steps, you'll create a new DataTemplate which defines the C1GaugeMark appearance and then you'll assign that template to the C1GaugeMark element's C1GaugeMark.Template property in the C1RadialGauge control.

Complete the following steps:

Switch to XAML view and add three <Gauge:C1GaugeMark> tags to the <Gauge:C1RadialGauge> tag so that it appears similar to the following:

Markup	Copy Code
<Gauge:C1RadialGauge Height="89" Margin="90,72,41,88" Name="C1RadialGauge1" Width="287"> <Gauge:C1GaugeMark From="0" To="100" Interval="10" /> <Gauge:C1GaugeMark Interval="5" Location="1.1" /> </Gauge:C1RadialGauge>

Markup

Copy Code

<Gauge:C1RadialGauge Height="89" Margin="90,72,41,88" Name="C1RadialGauge1" Width="287">
    <Gauge:C1GaugeMark From="0" To="100" Interval="10" />
    <Gauge:C1GaugeMark Interval="5" Location="1.1" />
</Gauge:C1RadialGauge>

Add the following markup just under the UserControl tag to add a template:

Markup	Copy Code
<UserControl.Resources> <!-- Template used to render the gauge marks --> <DataTemplate x:Key="MyMarkTemplate"> <Rectangle Width="4" Height="18" Fill="BlueViolet" Stroke="Black" StrokeThickness=".5"/> </DataTemplate> </UserControl.Resources>

Markup

Copy Code

<UserControl.Resources>
    <!-- Template used to render the gauge marks -->
    <DataTemplate x:Key="MyMarkTemplate">
        <Rectangle Width="4" Height="18" Fill="BlueViolet" Stroke="Black" StrokeThickness=".5"/>
    </DataTemplate>
</UserControl.Resources>

This template defines the appearance of the tick marks.

Next, set the C1GaugeMark.Template property on the first C1GaugeMark element you added to reference the new template's key:

Markup	Copy Code
<Gauge:C1GaugeMark From="0" To="100" Interval="10" Template="{StaticResource MyMarkTemplate}"/>

Run your project and observe:

The C1RadialGauge control appears with custom tick marks:

Notice that the marks are drawn from the position specified by the C1GaugeDecorator.Location property and grow inward. If you increase the Height of the rectangles used to show the marks, the tick marks will extend farther toward the center of the gauge. To make them extend out you would change the C1GaugeDecorator.Location property on the C1GaugeMark element. Also, notice how elements used to show tick marks are rotated along the scale; elements used to show labels are not (see Adding Labels to the Gauge).