Label on BarIndicator

4 posts, 0 answers
  1. Wouter
    Wouter avatar
    24 posts
    Member since:
    Jul 2013

    Posted 12 Jun 2014 Link to this post

    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>
  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 16 Jun 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Wouter
    Wouter avatar
    24 posts
    Member since:
    Jul 2013

    Posted 16 Jun 2014 in reply to Andrey Link to this post

    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.
  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 18 Jun 2014 Link to this post

    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.
     
Back to Top