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

Label on BarIndicator

3 Answers 35 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Wouter
Top achievements
Rank 1
Wouter asked on 12 Jun 2014, 02:14 PM
We have a RadVerticalLinearGauge as listed below. The floater indicator is essentially the maximum value within a time window determined from outside. I would like to have a number Just above or in the top of the floater indicator bar with the value.

Can this be achieved by templating the BarIndicator or is there some smart way with CustomItems?

<telerik:RadVerticalLinearGauge Grid.Row="1" Margin="0,30" telerik:StyleManager.Theme="Windows8Touch">
    <telerik:VerticalLinearScale Min="{Binding Path=Min}" Max="{Binding Path=Max}"
                                    RelativeHeight="1" RelativeY="0" RelativeWidth="1" RelativeX="0.5" LabelFormat="{}{0:F0} µV"
                                    StartWidth="0.35" EndWidth="0.35">
        <telerik:VerticalLinearScale.Indicators>
            <telerik:BarIndicator UseRangeColor="False" StartWidth="0.3" EndWidth="0.3"
                                    Background="{Binding Path=FloaterBrush}"
                                    Visibility="{Binding Path=IsFloaterVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
                                    Value="{Binding Path=FloaterValue}" RenderTransformOrigin="0.5,0.5"/>
            <telerik:BarIndicator UseRangeColor="False" StartWidth="0.3" EndWidth="0.3"
                                    Background="{Binding Path=DirectBrush}"
                                    Value="{Binding Path=DirectValue}" />
        </telerik:VerticalLinearScale.Indicators>
    </telerik:VerticalLinearScale>
</telerik:RadVerticalLinearGauge>

3 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 16 Jun 2014, 01:48 PM
Hi Wouter,

You can do it using custom items. For example:

<telerik:RadVerticalLinearGauge Grid.Row="1"
                                Margin="0,30">
    <telerik:VerticalLinearScale Min="0"
                                 Max="100"
                                 RelativeHeight="1"
                                 RelativeY="0"
                                 RelativeWidth="1"
                                 RelativeX="0.5"
                                 LabelFormat="{}{0:F0} µV"
                                 StartWidth="0.35"
                                 EndWidth="0.35">
        <telerik:VerticalLinearScale.Indicators>
            <telerik:BarIndicator Name="floaterIndicator"
                                  UseRangeColor="False"
                                  StartWidth="0.3"
                                  EndWidth="0.3"
                                  Value="50"
                                  RenderTransformOrigin="0.5,0.5"/>
        </telerik:VerticalLinearScale.Indicators>
        <telerik:VerticalLinearScale.CustomItems>
            <TextBlock Text="{Binding ElementName=floaterIndicator, Path=Value}"
                       Canvas.ZIndex="500"
                       telerik:ScaleObject.Value="{Binding ElementName=floaterIndicator, Path=Value}"
                       telerik:ScaleObject.Location="OverCenter" />
        </telerik:VerticalLinearScale.CustomItems>
    </telerik:VerticalLinearScale>
</telerik:RadVerticalLinearGauge>



Regards,
Andrey Murzov
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Wouter
Top achievements
Rank 1
answered on 16 Jun 2014, 03:16 PM
Thanks this works nicely.

The TextBlock is placed on top of the edge of the bar. How would you suggest offsetting it slightly so that it appears above or on top of the bar? I've accomplished it by setting the Height of the TextBlock to a larger number to let it float above the bar, but it feels kind of hacky.
0
Andrey
Telerik team
answered on 18 Jun 2014, 11:41 AM
Hello Wouter,

You're on the right track. Custom element which is positioned using ScaleObject.Value attachable property is always centered about the value. So the only way to shift it somehow is using of the bigger container and arranging the element inside this container; or changing of the width and height of the element itself.

Regards,
Andrey Murzov
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
Gauges
Asked by
Wouter
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Wouter
Top achievements
Rank 1
Share this question
or