Question with RadSemicircleNorthGauge

3 posts, 1 answers
  1. Chas
    Chas avatar
    3 posts
    Member since:
    Dec 2014

    Posted 05 Jan 2015 Link to this post

    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>
  2. Chas
    Chas avatar
    3 posts
    Member since:
    Dec 2014

    Posted 05 Jan 2015 in reply to Chas Link to this post

    forgot to attach my image
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Martin
    Admin
    Martin avatar
    1099 posts

    Posted 06 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top