Centering NumericIndicator

2 posts, 1 answers
  1. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 18 Nov 2010 Link to this post

    I am using a NumericIndicator within my IndicatorList inside a RadGauge/RadialGauge/RadialScale.

    There are NumberPosition elements to hold the maximum number of digits possible.  But since the NumberPositions may or may not have a value and I can only set the Left/Top position on the containing NumericIndicator, the numbers are not centered if some of the NumberPositions are blank.

    For example, 59884 would be centered on the gauge, but 59 would not be (see attached screen captures).

    Is there a way to center the collection of NumberPosition elements based on the current number of digits displayed?

    <Gauges:NumericIndicator Value="{Binding Path=(viewmodels:TotalOrdersValue.Value)}"
        TemplatePrefix="FontFamily"
            Format="{}{0:F0}"
            Left="0.37"
            Top="0.7"
            RelativeWidth="0.6"
            RelativeHeight="0.24"
            Background="Transparent"
            BorderThickness="0"
            FontSize="16"
            FontFamily="Arial">
        <Gauges:NumberPosition Background="Transparent" BorderThickness="0" />
        <Gauges:NumberPosition Background="Transparent" BorderThickness="0" />
        <Gauges:NumberPosition Background="Transparent" BorderThickness="0" />
        <Gauges:NumberPosition Background="Transparent" BorderThickness="0" />
        <Gauges:NumberPosition Background="Transparent" BorderThickness="0" />
    </Gauges:NumericIndicator>

    Thank you.
    Josh
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 22 Nov 2010 Link to this post

    Hello Josh,

    Unfortunately current version of gauge control does not allow to center numeric indicator automatically.
    I have created the PITS issue to add this feature in next releases. You can track its implementation using our PITS system:
    http://www.telerik.com/support/pits.aspx#/public/silverlight/4078

    As a workaround you can use the TextBlock control instead of numeric indicator.
    The sample code is below.

    <telerik:RadGauge Width="250" Height="250" >
        <telerik:RadialGauge>
            <TextBlock VerticalAlignment="Bottom"
                       HorizontalAlignment="Center"
                       Margin="0,0,0,40"
                       Foreground="White"
                       FontSize="16"
                       FontFamily="Arial"
                       Text="{Binding Path=(viewmodels:TotalOrdersValue.Value)}"/>
            <telerik:RadialScale x:Name="scale">
                <telerik:IndicatorList>
                    <telerik:Needle Name="needle"
                                    IsAnimated="True"
                                    Value="46"/>
                </telerik:IndicatorList>
            </telerik:RadialScale>
        </telerik:RadialGauge>
    </telerik:RadGauge>

    All the best,
    Andrey Murzov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. DevCraft banner
Back to Top