Easy way to resize gauges

2 posts, 0 answers
  1. Jean-Pierre Fouche
    Jean-Pierre Fouche avatar
    2 posts
    Member since:
    Feb 2010

    Posted 18 Mar 2010 Link to this post

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

    Posted 19 Mar 2010 Link to this post

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