Home / Community & Support / Knowledge Base / RadControls for WPF / Gauge / How to change the appearance of the RadialGauge or LinearGauge and use Car needle template

How to change the appearance of the RadialGauge or LinearGauge and use Car needle template

Article Info

Rating: 3

Article information

Article relates to

 RadGauge for WPF

Created by

 Hristo Maradjiev

Last modified

 December, 1, 2008

Last modified by

 Hristo Maradjiev

To change appearance of the RadialGauge (or LinearGauge) you have to create new control template for correspondent class. Default template for the RadialGauge looks like the following:

<ControlTemplate x:Key="RadialGaugeTemplate" TargetType="local:RadialGauge">   
    <Border Background="{TemplateBinding Background}"   
            BorderBrush="{TemplateBinding BorderBrush}"   
            BorderThickness="{TemplateBinding BorderThickness}">   
        <Grid>   
            <ContentControl Template="{StaticResource RadialGaugeBackground}"/>   
            <ItemsPresenter />   
            <ContentControl Template="{StaticResource RadialGaugeForeground}"/>   
        </Grid>   
    </Border>   
</ControlTemplate>  

As you can see there are 2 content controls here. The first one represents background of the RadialGauge the second one allows having some special effects (like glass effect) on top of the gauge.  To change radial gauge appearance do following:

1. Add new template for the gauge background. For example:

<ControlTemplate x:Key="RadialGaugeBackground" TargetType="ContentControl">   
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">   
        <Grid.ColumnDefinitions>   
            <ColumnDefinition Width="0.05*"/>   
            <ColumnDefinition Width="0.9*"/>   
            <ColumnDefinition Width="0.05*"/>   
        </Grid.ColumnDefinitions>   
        <Grid.RowDefinitions>   
            <RowDefinition Height="0.05*"/>   
            <RowDefinition Height="0.9*"/>   
            <RowDefinition Height="0.05*"/>   
        </Grid.RowDefinitions>   
   
        <Ellipse Grid.ColumnSpan="3" Grid.RowSpan="3" Fill="Blue" />   
        <Ellipse Grid.Column="1" Grid.Row="1" Fill="SkyBlue"/>   
    </Grid>   
</ControlTemplate> 

2. Add new template for top gauge effects. It can be quite simple:

<ControlTemplate x:Key="RadialGaugeForeground" TargetType="ContentControl">   
    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">   
    </Grid>   
</ControlTemplate>  

3. Add new control template and style:

<ControlTemplate x:Key="RadialGaugeTemplate" TargetType="gauge:RadialGauge">   
    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"   
            BorderThickness="{TemplateBinding BorderThickness}">   
        <Grid>   
            <ContentControl Template="{StaticResource RadialGaugeBackground}"/>   
            <ItemsPresenter />   
            <ContentControl Template="{StaticResource RadialGaugeForeground}"/>   
        </Grid>   
    </Border>   
</ControlTemplate>   
   
<ItemsPanelTemplate x:Key="RadialGaugePanelTemplate">   
    <Grid />   
</ItemsPanelTemplate>   
   
<Style x:Key="NewRadialGauge" TargetType="gauge:RadialGauge">   
    <Setter Property="Template" Value="{StaticResource RadialGaugeTemplate}" />   
    <Setter Property="ItemsPanel" Value="{StaticResource RadialGaugePanelTemplate}" />   
</Style>  

4. Reference new style from RadialGauge control:

<gauge:RadialGauge Style="{StaticResource NewRadialGauge}">  

There is a limitation of the Silverlight that do not allow standard FindName to find objects inside custom controls. As result objects like needle0 in your code are always null. To avoid this problem you should include following method to the code of your page:

public new object FindName(string name)   
{   
    object child = base.FindName(name);   
   
    if (child == null)   
    {   
        child = radGauge.FindName(name);   
    }   
   
    return child;   
}   
 

Unfortunately Car needle template is not included to the main package. To use it you have to include following XAML into your page (or resources):

<!-- Car Needle template -->   
<ControlTemplate x:Key="CarNeedleTemplate" TargetType="gauge:Needle">   
    <Grid x:Name="PART_Grid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">   
        <Grid.ColumnDefinitions>   
            <ColumnDefinition Width="*"/>   
            <!-- Column 0 - tail -->   
   
            <ColumnDefinition Width="*"/>   
            <!-- Column 1 - pin point -->   
            <ColumnDefinition Width="5*" />   
            <ColumnDefinition Width="15*" />   
            <ColumnDefinition Width="20*" />   
            <ColumnDefinition Width="60*" />   
        </Grid.ColumnDefinitions>   
   
        <Grid.RowDefinitions>   
            <RowDefinition Height="20*" />   
            <RowDefinition Height="20*" />   
            <RowDefinition Height="20*" />   
            <RowDefinition Height="20*" />   
            <RowDefinition Height="20*" />   
        </Grid.RowDefinitions>   
   
        <Ellipse Grid.Column="1" Grid.Row="0" Grid.RowSpan="5"    
            Stroke="Red" StrokeThickness="0" Stretch="Fill">   
            <Ellipse.Fill>   
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">   
                    <GradientStop Color="#FF979797" Offset="0"/>   
                    <GradientStop Color="#FF000000" Offset="1"/>   
                    <GradientStop Color="#FF434343" Offset="0.377"/>   
                    <GradientStop Color="#FF474747" Offset="0.594"/>   
                </LinearGradientBrush>   
            </Ellipse.Fill>   
        </Ellipse>   
   
        <Ellipse Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3"   
                 Stretch="Fill" Stroke="Yellow" StrokeThickness="0">   
            <Ellipse.Fill>   
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">   
                    <GradientStop Color="#FF979797" Offset="0"/>   
                    <GradientStop Color="#FF000000" Offset="1"/>   
                    <GradientStop Color="#FF434343" Offset="0.377"/>   
                    <GradientStop Color="#FF474747" Offset="0.594"/>   
                </LinearGradientBrush>   
            </Ellipse.Fill>   
        </Ellipse>   
   
        <Path Grid.ColumnSpan="2" Grid.Row="2" Grid.Column="1" Stretch="Fill" StrokeThickness="0">   
            <Path.Data>   
                <PathGeometry>   
                    <PathFigure StartPoint="0,0">   
                        <LineSegment Point="1,0" />   
                        <LineSegment Point="1,1" />   
                        <LineSegment Point="0,1" />   
                        <LineSegment Point="0,0" />   
                    </PathFigure>   
                </PathGeometry>   
            </Path.Data>   
            <Path.Fill>   
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">   
                    <GradientStop Color="#FF0C0C0C" Offset="0"/>   
                    <GradientStop Color="#FF000000" Offset="1"/>   
                    <GradientStop Color="#FF292929" Offset="0.148"/>   
                    <GradientStop Color="#FFA3A3A3" Offset="0.365"/>   
                    <GradientStop Color="#FF353535" Offset="0.631"/>   
                </LinearGradientBrush>   
            </Path.Fill>   
        </Path>   
        <Path Grid.ColumnSpan="4" Grid.Row="2" Grid.Column="2" Stretch="Fill" StrokeThickness="0">   
            <Path.Data>   
                <PathGeometry>   
                    <PathFigure StartPoint="1,0.5">   
                        <LineSegment Point="0.1,0.8" />   
                        <ArcSegment Point="0.1,0.2" Size="0.03,0.03" SweepDirection="Clockwise"/>   
                        <LineSegment Point="1,0.5" />   
                    </PathFigure>   
                </PathGeometry>   
            </Path.Data>   
            <Path.Fill>   
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">   
                    <GradientStop Color="#FFFF8D79" Offset="0"/>   
                    <GradientStop Color="#FFE43A10" Offset="1"/>   
                    <GradientStop Color="#FFF8785F" Offset="0.148"/>   
                    <GradientStop Color="#FFF9AC9C" Offset="0.365"/>   
                    <GradientStop Color="#FFF46F54" Offset="0.631"/>   
                </LinearGradientBrush>   
            </Path.Fill>   
        </Path>   
    </Grid>   
</ControlTemplate>   
   
<Style x:Key="CarNeedleStyle" TargetType="gauge:Needle">   
    <Setter Property="Location" Value="OverCenter" />   
    <Setter Property="RelativeHeight" Value="0.4" />   
    <Setter Property="RelativeShift" Value="0" />   
    <Setter Property="Template" Value="{StaticResource CarNeedleTemplate}" />   
</Style>   
 

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.