[Solved] RadialGauge Label - Tick positioning

[ManniAT]

Hi,

after messing around with RadialGauge I finally got something "almost what I want".

But I'm not able to overcome Label / Tick Positioning issues.

 

Maybe I do something completely wrong or RadialGauge doesn't work as expected.

I used a "competitor Gauge" - unfortunately you didn't provide the needed controls for W10UWP.

Anyhow - now you have a Gauge an I really would like to use telerik (since I'm a - for more than a decade telerik customer).
So I gave it a try.

Lets start with the competitor:

<competitor:Gauge
        LabelPosition="Inside"
        LabelStroke="#999999"
        FontSize="14" FontWeight="SemiBold"


        TickStroke="#c1c1c1"
        TickLength="20"
        TickStrokeThickness="2"
        Interval="500"

        SmallTickStroke="#c1c1c1"
        SmallTickLength="12"
        SmallTickStrokeThickness="1"
        MinorTicksPerInterval="2"


        StartValue="0" EndValue="3000" >

The thing was really easy and intuitive. I define how long Major and Minor Ticks are - how thick (Minor / Major) they are and also very easy an interval off 500 (meaning every 500 on the scale will hold a major tick) plus telling the control that it shall use 2 "in between ticks" (minor).

Also it was easy to habe the label displayed "inside".

Trying to achieve the same with RadialGauge I had to learn, that there is no "tick length" or such a thing.
Instead I had to use templates - wich after some "Padding tricks" finally did (almost) what I wanted.

<Page.Resources>
    <DataTemplate x:Key="TickTemplateTick">
        <Grid Padding="0,0,0,0" Width="9" Height="1">
            <Rectangle Fill="{ThemeResource ApplicationForegroundThemeBrush}" Opacity="0.8" />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Key="TickTemplateMajor">
        <Grid Padding="6,0,0,0" Width="24" Height="1">
            <Rectangle Fill="{ThemeResource ApplicationForegroundThemeBrush }" Opacity="0.8" />
        </Grid>
    </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <telerik:RadRadialGauge TickStep="100" Visibility="Visible"
                            MajorTickStep="5"

                            VerticalAlignment="Center" LabelStep="500"
                            MinValue="0" MaxValue="3000" TickRadiusScale="0.95"
                            LabelRadiusScale="0.8"
                            TickTemplate="{StaticResource TickTemplateTick}"
                            MajorTickTemplate="{StaticResource TickTemplateMajor}"
                            >

This gave me the second grid on the attached screenshot (it has no needle - but this is not the problem).

 

My problems occur when I change the size:

Let me first explain what the competitors gird does:

-- Ticks are (no matter how I change the size) "attached" to the ranges.
-- Labels keep (almost) their distance to the ticks / ranges.

With RadialGauge I get:
Labels change their disatance.
Ticks change their distance.

And in an other configuration (not in the screen shot) where I place the labels outside (radius 1.1) the top most label get's a big distance to the ranges which looks really weird.

My question - how can I achieve the "static" (distances kept when size changes) look of the "competitors gauge" with telerik RadialGrid?

 

 

[Ivaylo Gergov]

Hi Manfred,

Thank you for contacting us.

Unfortunately this feature is not supported by our Gauge control. We will definitely try to improve the API for our next releases. In the meantime, in theory, it could be possible to adjust the LabelRadiusScale property so that the label is at constant distance from the tick. For example, when the Gauge change its size you can try to recalculate its value:

double halfWidth = e.NewSize.Width / 2d;
// for example 30 pixels away from the tick.
var distance = halfWidth - 30;
double coeff = distance / halfWidth;
if(!Double.IsInfinity(coeff))
{
    this.gauge.LabelRadiusScale = coeff;
}

Could you please, give it a try and let me know how it goes.


Regards,
Ivaylo Gergov
Telerik