Label on BarIndicator

[Wouter]

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>

[Andrey]

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

 

 

[Wouter]

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.

[Andrey]

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