[Solved] A few More Question About Gauges

[Shailendra]

Hi,

Thanks for the Answering my Quries last time but still there are a few quries left. Any help will be Greatly Appriciated.
I am using telerik gauges for silverlight, I have a few queries as follows.

I want to change the color of the RadRadial Gauge but there is no property as such.
I tried adding a referance of the Theams in the solution and added these lines of in app.xaml.cs

private void Application_Startup(object sender, StartupEventArgs e)
{
Telerik.Windows.Controls.Theme.ApplicationTheme ="Telerik.Windows.Themes.OfficeBlack";
this.RootVisual = new Page();
}

But Still The Radial Gauge is showing Default Red color, any suggestion how can i change the color of the radial gauge.
Do i need to change the style in the following code snippet

<control:RadGauge x:Name="radGauge"
                          Width="200"
                          Height="200"
                          Style="{StaticResource RadGaugeStyle}"
                          HorizontalAlignment="Center"
                          Grid.Column="0" Grid.Row="1">
</control:RadGauge>

I am facing another issue in assigning the value of the needle.
when i am using the following code

needle0.value = val; //val is type long

My application is giving an exception sayin "Object reference not set to an instance of an object."
but when I use the follwing Snippet its working

radialScale0.Indicators[0].Value = val;

Any Suggestions What I am doing wrong in my code.

Also I want to use the car indicator Template.
and I added "CarNeedleTemplate" in the ResourceDictionary. But I am getting an error is there any other dll file i need to add.

Can you tell me what are the other styles in telerik silverlight controls because all I am using are default Styles which are in the examples.

Thanks in Advance.

[Andrey]

Hello Shailendra,

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 allo 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>

Kind regards,
Andrey Murzov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.