Telerik Forums
UI for Universal Windows Platform Forum
1 answer
107 views

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
Telerik team
 answered on 10 Mar 2016
3 answers
75 views
Just trying out the RadialGauge and it does not show in the DesignView in either Blend or Visual Studio. When the app is running I see the guage. Any ideas?
Tsvyatko
Telerik team
 answered on 15 Feb 2016
1 answer
48 views

I seem to get clipping issue with the indicators on the radialguage. This is the code

<telerik:RadRadialGauge LabelStep="60" MaxAngle="360" TickStep="20" MaxValue="100" Width="200" LabelRadiusScale="1.10">
            <telerik:RadialBarGaugeIndicator Value="100" Brush="Green" Thickness="5"/>
        </telerik:RadRadialGauge>

Depending on if I set the guage Width or Height, parts of it are cut off as if the guage is trying to draw outside of its limits.

Ivaylo Gergov
Telerik team
 answered on 11 Feb 2016
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?