Flat centered bar scale

[J]

Is is possible to create bar scale as in the attached image?

Currently I have done it this way:

<Border
    Background="#FF1B1B1F"
    CornerRadius="24">
    <telerik:RadVerticalLinearGauge telerik:StyleManager.Theme="Green">
        <telerik:VerticalLinearScale MajorTickBackground="DeepSkyBlue" MiddleTickBackground="DeepSkyBlue" MinorTickBackground="DeepSkyBlue" MajorTickOffset="-10" MiddleTickOffset="-10" MinorTickOffset="-10" Min="0" Max="100" LabelLocation="Inside" MajorTickLocation="Inside" MinorTickLocation="Inside" MiddleTickLocation="Inside" MiddleTicks="2" MinorTicks="1" LabelFormat="{}{0:F0} %" FontSize="20" Foreground="#FF9EABAA" Fill="{x:Null}">
                <telerik:VerticalLinearScale.Indicators>
                    <telerik:BarIndicator BorderBrush="{x:Null}" Value="100" Background="#FF323232"/>
                    <telerik:BarIndicator BorderBrush="{x:Null}" Value="70" Background="DeepSkyBlue"/>
                </telerik:VerticalLinearScale.Indicators>
        </telerik:VerticalLinearScale>
    </telerik:RadVerticalLinearGauge>
</Border>

 

I cannot change the width of either the VerticalLinearScale or the BarIndicator objects. So to accomplish what I want, I hid the scale object and added two indicators. The first is the "base color" and the second the actual value indicator. In the end it's just rendering objects, but is there a better way to do this? Not the biggest fan of these "bubble gum solutions".

Also, is there a way to align the whole thing center? So that the bar scale and the tick labels together are always in the center during resizing. I would prefer not to use Padding. Currently there's wasted empty space on the left which makes the whole thing larger than it should be.

And is there a way to round the bar scale itself? Currently I'm rounding the border object, but when the whole thing is resized small enough, the bar scale's sharp corners start to render outside the border's rounder corners.

[Dinko | Tech Support Engineer]

Hi J H,

What I can suggest you is to change the locations properties of the label and ticks to CenterInside and remove the offset. Then you can set the Background property of the RadVerticalLinearGauge to Transparent in order to avoid the sharp corners. Check the following modified code snippet.

<Border Background="#FF1B1B1F" CornerRadius="24" Width="200">
    <telerik:RadVerticalLinearGauge  telerik:StyleManager.Theme="Green" Background="Transparent">
        <telerik:VerticalLinearScale Min="0" Max="100"
                                     MajorTickBackground="DeepSkyBlue"
                                     MiddleTickBackground="DeepSkyBlue"
                                     MinorTickBackground="DeepSkyBlue"
                                     LabelLocation="CenterInside"
                                     MajorTickLocation="CenterInside"
                                     MinorTickLocation="CenterInside"
                                     MiddleTickLocation="CenterInside"
                                     MiddleTicks="2"
                                     MinorTicks="1"
                                     LabelFormat="{}{0:F0}%" FontSize="12" Foreground="#FF9EABAA" Fill="{x:Null}">
            <telerik:VerticalLinearScale.Indicators>
                <telerik:BarIndicator BorderBrush="{x:Null}" Value="100" Background="#FF323232"/>
                <telerik:BarIndicator BorderBrush="{x:Null}" Value="70" Background="DeepSkyBlue"/>
            </telerik:VerticalLinearScale.Indicators>
        </telerik:VerticalLinearScale>
    </telerik:RadVerticalLinearGauge>
</Border>

Regards,
Dinko
Progress Telerik

[J]

Not sure what is different here...

Take a look at the image again. I want the whole thing (the bar and the labels together) be horizontally centered in the parent container. I.e., I want to use as much space as possible. Now the right side has unnecessary empty space.

The distance from the left side of the bar to the left edge should be same than the distance from the right side of "100%" to the right edge. I hope this clarifies what I mean.

[Sia]

Hello,

Regarding the two bar indicatiors, you can use one instead and apply the #FF323232 brush to its EmptyFill property.

Regarding the center position, I am not sure there is a straight forward solution because everything in the Gauge control has relative size (except the labels). For example if you center it for some size, it won't be centered when you resize because BarIndicator gets bigger but the labels stay the same. You can check the attached video. To reorder the elements, i.e. to position the BarIndicator, ticks and labels to the left, you need to play with the LabelLocation, MajorTickLocation, MiddleTickLocation and MinorTickLocation properties of the VerticalLinearScale as well as with the attached property telerik:ScaleObject.Location of the BarIndicator.

<telerik:RadVerticalLinearGauge telerik:StyleManager.Theme="Green">
    <telerik:VerticalLinearScale MajorTickBackground="DeepSkyBlue"
                                    MiddleTickBackground="DeepSkyBlue"
                                    MinorTickBackground="DeepSkyBlue"
                                    Min="0" Max="100"
                                    LabelLocation="CenterInside"
                                    LabelOffset="0"
                                    MajorTickLocation="OverOutside"
                                    MinorTickLocation="OverOutside"
                                    MiddleTickLocation="OverOutside"
                                    MiddleTicks="2" MinorTicks="1"
                                    LabelFormat="{}{0:F0} %"
                                    FontSize="20" Foreground="#FF9EABAA"
                                    Fill="{x:Null}">
        <telerik:VerticalLinearScale.Indicators>
            <telerik:BarIndicator telerik:ScaleObject.Location="Outside" BorderBrush="{x:Null}" Value="70" Background="DeepSkyBlue" EmptyFill="#FF323232" />
        </telerik:VerticalLinearScale.Indicators>
    </telerik:VerticalLinearScale>
</telerik:RadVerticalLinearGauge>

Regarding your third question about rounding the bar scale - can you give us more information about which element exactly you want to have rouned corners. We do not have exposed properties for this which means that you will need to set a custom template to the RadVerticalLinearGauge where to set CornerRadius to the Border elements inside.


Regards,
Sia
Progress Telerik