Easy way to resize gauges

[Jean-Pierre Fouche]

Is there an EASYway to resize a gauge e.g. the semi-circle radial gauge, so that it renders smaller - say as a 48x48 image?  When I try to resize it by setting the width of its containing grid, all of the components of the gauge are rendered incorrectly i.e. the scale is too large for the background.

[Andrey]

Hi Jean-Pierre,

I've checked how the semi-circle gauges are looking when its size is 50x25 (it is a SEMI-circle gauge so its width must be more than its height) and all resizable things look just fine. You should keep in mind that size of the scale labels is a constant. It is not related to the size of the scale. So it is up to you to change it. Since good-sized (2-3) labels on the gauge with 50x25  size are close to be invisible I would recommend to make them invisible (set Foreground="Transparent"). For example:

<Border BorderBrush="Red" BorderThickness="1" Width="50" Height="25">
      <Grid>
            <gauge:RadialGauge x:Name="radialGauge"
                           Style="{StaticResource RadialGaugeHalfCircleNStyle}">
                  <gauge:RadialScale x:Name="radialScale"
                                 Style="{StaticResource RadialScaleHalfCircleNStyle}">
                        <gauge:RadialScale.Label>
                             <gauge:LabelProperties FontSize="2" Foreground="Transparent" />
                        </gauge:RadialScale.Label>
                        <gauge:IndicatorList>
                             <gauge:Needle x:Name="needle"
                                           IsAnimated="True"
                                           Value="65"/>
                        </gauge:IndicatorList>
                  </gauge:RadialScale>
            </gauge:RadialGauge>
      </Grid>
</Border>

I also would recommend to make invisible tick marks, because they are too small in this case and are looking like a noise on the image.
Another approach would be using of the RenderTransform for the container. For example:

<Border BorderBrush="Red" BorderThickness="1">
      <Border.RenderTransform>
            <ScaleTransform CenterX="0.5" CenterY="0.85" ScaleX="0.24" ScaleY="0.25" />
      </Border.RenderTransform>
      <Grid Width="200" Height="100">
            <gauge:RadialGauge x:Name="radialGauge"
                           Style="{StaticResource RadialGaugeHalfCircleNStyle}">
                  <gauge:RadialScale x:Name="radialScale"
                                Style="{StaticResource RadialScaleHalfCircleNStyle}">
                        <gauge:IndicatorList>
                             <gauge:Needle x:Name="needle"
                                           IsAnimated="True"
                                           Value="65"/>
                        </gauge:IndicatorList>
                  </gauge:RadialScale>
            </gauge:RadialGauge>
      </Grid>
</Border>

Best wishes,
Andrey Murzov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.