Setting the tick color

[Andrew Connell]

I've tried everything, picked through the focums and docs... can't seem to set the color of the tick marks on my gague. Is this possible?

Also trying to set the needle thickness as it is too thin in my UI :(

[Lancelot]

Hi Andrew,

I have written an example for you to use. I placed a bunch of comments inside the control so you can see where the customizations are. Just plop this grid down in your UserControl's RootGrid. You'll see a ton of alterations I've done to demonstrate just how versatile the control is. Copy and paste this code:

<Grid x:Name="Container" Width="740" Height="520">


            <telerik:RadRadialGauge Width="220" Height="220">

                <!--Here is where you can set the color of the MajorTick, you have control over the minorTick as well-->
                <telerik:RadialScale Name="scale"
                                     MajorTickBackground="#FFFCFF00"
                                     MiddleTickBackground="#FFF600FF"
                                     MinorTickBackground="#FF00FF2E"
                                     RangeLocation="Outside"
                                     RangeOffset="-0.015"
                                     MajorTickOffset="-0.015"
                                     MiddleTickOffset="-0.015"
                                     MinorTickOffset="-0.015"
                                     LabelRotationMode="None"
                                     IsInteractive="True" >

                    <telerik:RadialScale.Ranges>
                        <!-- Here is where you can determine certain ranges have a colored BG-->
                        <telerik:GaugeRange x:Name="range1"
                                            Min="0" Max="20"
                                            StartWidth="0.015"
                                            EndWidth="0.015"
                                            Background="#FF1E8D00"  />
                        <telerik:GaugeRange x:Name="range2"
                                            Min="20" Max="80"
                                            StartWidth="0.015"
                                            EndWidth="0.015"
                                            Background="#FF000000" />
                        <telerik:GaugeRange x:Name="range3"
                                            Min="80" Max="100"
                                            StartWidth="0.015"
                                            EndWidth="0.015"
                                            Background="#FFE50000" />
                    </telerik:RadialScale.Ranges>


                    <!--This is where you can make customizations to the needle and other indicators -->
                    <telerik:RadialScale.Indicators>

                        <!-- Here is where you can set the thickness of the needle-->
                        <telerik:Needle telerik:ScaleObject.RelativeWidth="0.05" Value="50" />

                        <!-- Alter the default radial bar that intersects the needle-->
                        <telerik:BarIndicator x:Name="radialBar"
                                              Value="80"
                                              telerik:ScaleObject.Location="Inside"
                                              Background="#FF001DFF"
                                              telerik:ScaleObject.Offset="0.25" />

                        <!-- Here is where you can alter the marker at the edge of the radius, notice i turned it red?-->
                        <telerik:Marker Name="marker"
                                        IsAnimated="True"
                                        Duration="0:0:1"
                                        Background="#FFFF312C"
                                        telerik:ScaleObject.Offset="-0.015"
                                        Value="25" />

                        <telerik:Needle Value="50" />

                        <telerik:Pinpoint />

                    </telerik:RadialScale.Indicators>
                </telerik:RadialScale>
            </telerik:RadRadialGauge>


        </Grid>

 
If you ever needed to know what is editable in a RadControl and cant find it in any documentation, heres a trick I use: 

1. Place the cursor inside a control you want to add a property to.
2. Press the spacebar once.
3. Browse the options Intellisense shows.

You'll see in the Intellisense list properties available to the control. An example would be the Background property available to you on some of the elements. Go ahead and try it on the "telerik:Marker" property. The same process will get you properties of <telerik:****> namespace inside a control.

Good Luck and I hope I provided you with the tools to get what you need!
Lancelot

[Andrew Connell]

That fixed it... thanks!

[Lancelot]

Awesome! I'm glad I was able to help =D If you could please mark my post as "Answer", it would be appreciated.  Marking it as the answer would help anyone else in the future who has the same question to find an answer quickly.

If there is anything else I can do to help, please let me know.
Lancelot