This is a migrated thread and some comments may be shown as answers.

Setting the tick color

3 Answers 116 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Andrew Connell
Top achievements
Rank 1
Andrew Connell asked on 25 May 2012, 09:05 PM
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 :(

3 Answers, 1 is accepted

Sort by
0
Accepted
Lancelot
Top achievements
Rank 1
answered on 29 May 2012, 10:19 PM
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

0
Andrew Connell
Top achievements
Rank 1
answered on 30 May 2012, 11:25 AM
That fixed it... thanks!
0
Lancelot
Top achievements
Rank 1
answered on 30 May 2012, 02:54 PM
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
Tags
Gauge
Asked by
Andrew Connell
Top achievements
Rank 1
Answers by
Lancelot
Top achievements
Rank 1
Andrew Connell
Top achievements
Rank 1
Share this question
or