Question with RadSemicircleNorthGauge

[Chas]

Is there any way to make the number scale within the gauge match the Outerborder of the gauge? It seems to be wider at the base of the gauge and if I want to add a GaugeRange it looks odd. thanks chuckl 

<telerik:RadSemicircleNorthGauge Width="182.5" Height="100" InnerBackground="white" OuterBackground="WhiteSmoke" OuterBorderThickness="0">
<telerik:SemicircleNorthScale ShowLastLabel="False" FontSize="11" VerticalAlignment="Center" Min="0" Max="99" RangeOffset="7" >
<telerik:SemicircleNorthScale.Indicators>
<telerik:Needle Value="65" />
<telerik:Pinpoint />
</telerik:SemicircleNorthScale.Indicators>
<telerik:SemicircleNorthScale.Ranges>
<telerik:GaugeRange Min="0" Max="65" Background="Green" />
<telerik:GaugeRange Min="65" Max="99" Background="Red"/>
</telerik:SemicircleNorthScale.Ranges>
</telerik:SemicircleNorthScale>
</telerik:RadSemicircleNorthGauge>

<telerik:RadSemicircleNorthGauge Width="182.5" Height="100" InnerBackground="WhiteSmoke"
OuterBackground="WhiteSmoke" Background="WhiteSmoke" BorderBrush="WhiteSmoke" OuterBorderThickness="1">
<telerik:SemicircleNorthScale FontSize="11" VerticalAlignment="Center" Min="0" Max="100" MajorTicks="10" MiddleTicks="1" >
<telerik:SemicircleNorthScale.Indicators>
<telerik:Needle Value="26" />
<telerik:Pinpoint />
</telerik:SemicircleNorthScale.Indicators>
</telerik:SemicircleNorthScale>
</telerik:RadSemicircleNorthGauge>

[Chas]

forgot to attach my image

[Martin Ivanov]

Hello Charles,

The look demonstrated in the attached picture is caused by the fact that the semi circle scale's center has a small vertical offset from the gauge's center. You can change that by setting the scale's Center property. Its default value is new Point(0,5, 0.85). To match the scale and the border of the gauge you can use the Radius and the Center property of the scale.

Setting the Center to "0.5, 1" will center the scale so that there won't be any misplacement between the border and the scale. Setting the Radius to "1" will make the scale to fit in the entire control.

<telerik:SemicircleNorthScale Center="0.5 1" Radius="1">

However, in your scenario the ranges will be clipped at the bounds of the gauge control. To avoid this you can use a slightly different approach. Instead of using the default border element you can include additional range that will be used as a border. Here is an example in code:

<Grid Background="#F5F5F5">
    <StackPanel Width="200" Height="200">
        <telerik:RadSemicircleNorthGauge Width="200" Height="100" InnerBackground="White" OuterBackground="White" OuterBorderThickness="0"
                                         ClipToBounds="False">
            <telerik:SemicircleNorthScale ShowLastLabel="False" FontSize="11" VerticalAlignment="Center" Min="0" Max="99"
                                          Center="0.5 1"
                                          Radius="0.9">
                <telerik:SemicircleNorthScale.Indicators>
                    <telerik:Needle Value="65" />
                    <telerik:Pinpoint />
                </telerik:SemicircleNorthScale.Indicators>
                <telerik:SemicircleNorthScale.Ranges>
                    <telerik:GaugeRangeGroup Offset="-2">
                        <telerik:GaugeRange Min="0" Max="65" Background="Green" />
                        <telerik:GaugeRange Min="65" Max="99" Background="Red"/>
                    </telerik:GaugeRangeGroup>
                    <telerik:GaugeRangeGroup Offset="8">
                        <telerik:GaugeRange StartWidth="0.02" EndWidth="0.02" Min="0" Max="99" Background="Blue" />
                    </telerik:GaugeRangeGroup>
                </telerik:SemicircleNorthScale.Ranges>
            </telerik:SemicircleNorthScale>
        </telerik:RadSemicircleNorthGauge>
    </StackPanel>
</Grid>

Another thing you can try is to hide the borders and define a path round the scale that will represent the outer borders. Here is an example:

<Grid Background="#F5F5F5">
    <Grid Width="200" Height="200" Background="White">
        <telerik:RadSemicircleNorthGauge Width="200" Height="100" InnerBackground="White" OuterBackground="White" OuterBorderThickness="0" Visibility="Visible"
                                         ClipToBounds="False">
            <telerik:SemicircleNorthScale ShowLastLabel="False" FontSize="11" VerticalAlignment="Center" Min="0" Max="99"
                                          Center="0.5 1"
                                          Radius="0.9">
                <telerik:SemicircleNorthScale.Indicators>
                    <telerik:Needle Value="65" />
                    <telerik:Pinpoint />
                </telerik:SemicircleNorthScale.Indicators>
                <telerik:SemicircleNorthScale.Ranges>
                    <telerik:GaugeRangeGroup Offset="-2">
                        <telerik:GaugeRange Min="0" Max="65" Background="Green" />
                        <telerik:GaugeRange Min="65" Max="99" Background="Red"/>
                    </telerik:GaugeRangeGroup>
                </telerik:SemicircleNorthScale.Ranges>
            </telerik:SemicircleNorthScale>
        </telerik:RadSemicircleNorthGauge>
        <StackPanel  VerticalAlignment="Center">
            <Path Stroke="Black" StrokeThickness="2">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,120">
                            <ArcSegment IsLargeArc="True"
                                Size="1, 1.08"
                                Point="200, 120"
                                SweepDirection="Clockwise" />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <Rectangle Fill="Black" Width="200" Height="1" />
        </StackPanel>
    </Grid>
</Grid>

Please let me know if this helps.

Regards,
Martin
Telerik