Telerik Forums / UI for Silverlight
This is a migrated thread and some comments may be shown as answers.

Thermometer - Missing styles

7 Answers 142 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 1
Jacques asked on 19 Jul 2012, 06:47 PM
Hi,

I'm trying to use the sample code that I found at http://demos.telerik.com/silverlight/silverlight3/#Gauge/Gallery/Thermometer, but I am getting a lot of missing style problems.

Here are some of the missing styles:

<Style x:Key="ThermometerMajorPropertiesStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.MajorTickProperties}" TargetType="gauge:MajorTickProperties">

<Style x:Key="ThermometerMinorPropertiesStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.MinorTickProperties}" TargetType="gauge:MinorTickProperties">

<Style x:Key="CustomTickMarkCelsiusStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.CustomTickMark}" TargetType="gauge:CustomTickMark">

Value="30" Location="OverCenter" ValueChanged="ThresholdValueCanged" Style="{StaticResource Telerik.Windows.Controls.Gauges.Marker}" />

Additional information:

1.I downloaded the latest library (2011.3.1116.1040)
2.I added all 4 DLL's


MyCode:

<UserControl x:Class="MyControls.DashboardThermometerControl"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"
	xmlns:gauge="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"
    mc:Ignorable="d"
	d:DesignHeight="300" d:DesignWidth="400">
 
  <Grid>
        <Grid.Resources>
          <DataTemplate x:Key="DefaultTickShape">
                <Rectangle Fill="{Binding Path=Properties.Background}"
							Stroke="{Binding Path=Properties.BorderBrush}"
							StrokeThickness="{Binding Path=Properties.BorderThickness.Left}"
							Stretch="Fill" />
            </DataTemplate>
 
            <Style x:Key="ThermometerMajorPropertiesStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.MajorTickProperties}" TargetType="gauge:MajorTickProperties">
                <Setter Property="Length" Value="0.05" />
                <Setter Property="TickWidth" Value="0.17" />
                <Setter Property="Location" Value="OverCenter" />
                <Setter Property="Offset" Value="0" />
                <Setter Property="Background" Value="White" />
                <Setter Property="ItemTemplate" Value="{StaticResource DefaultTickShape}" />
            </Style>
 
            <Style x:Key="ThermometerMinorPropertiesStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.MinorTickProperties}" TargetType="gauge:MinorTickProperties">
                <Setter Property="Length" Value="0.05" />
                <Setter Property="TickWidth" Value="0.039" />
                <Setter Property="Location" Value="OverCenter" />
                <Setter Property="Offset" Value="0" />
                <Setter Property="Background" Value="White" />
                <Setter Property="ItemTemplate" Value="{StaticResource DefaultTickShape}" />
            </Style>
 
            <DataTemplate x:Key="TickLabelEmpty">
                <Canvas />
            </DataTemplate>
 
            <Style x:Key="CustomTickMarkCelsiusStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.CustomTickMark}" TargetType="gauge:CustomTickMark">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <ContentPresenter>
                                <ContentPresenter.Content>
                                    <Canvas>
                                        <TextBlock HorizontalAlignment="Center" FontSize="12"
													Foreground="White" Margin="6,6,0,0" Text="C" />
                                        <TextBlock HorizontalAlignment="Center" FontSize="10"
													Foreground="White" Margin="0,1,0,0" Text="o" />
                                    </Canvas>
                                </ContentPresenter.Content>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate" Value="{StaticResource TickLabelEmpty}" />
                <Setter Property="Length" Value="0.05" />
                <Setter Property="Offset" Value="0.02" />
                <Setter Property="TickWidth" Value="1" />
                <Setter Property="Location" Value="Outside" />
            </Style>
 
            <Style x:Key="CustomTickMarkFahrenheitStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.CustomTickMark}" TargetType="gauge:CustomTickMark">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <ContentPresenter>
                                <ContentPresenter.Content>
                                    <Canvas>
                                        <TextBlock HorizontalAlignment="Center" FontSize="12"
													Foreground="White" Margin="6,6,0,0" Text="F" />
                                        <TextBlock HorizontalAlignment="Center" FontSize="10"
													Foreground="White" Margin="0,1,0,0" Text="o" />
                                    </Canvas>
                                </ContentPresenter.Content>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate" Value="{StaticResource TickLabelEmpty}" />
                <Setter Property="Length" Value="0.05" />
                <Setter Property="Offset" Value="0.02" />
                <Setter Property="TickWidth" Value="1" />
                <Setter Property="Location" Value="Inside" />
            </Style>
 
            <Style x:Key="BulbOfThermometerBarStyle" BasedOn="{StaticResource Telerik.Windows.Controls.Gauges.CustomTickMark}" TargetType="gauge:CustomTickMark">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <ContentPresenter>
                                <ContentPresenter.Content>
                                    <Grid Margin="-7,23,-5,24" Width="100">
                                        <Grid Margin="39.5,1,39.5,0">
                                            <Ellipse Stretch="Fill" Height="21" Fill="#FF720700"
														Margin="0,0,0,0" VerticalAlignment="Bottom"
														Opacity="0.5" />
                                            <Border CornerRadius="6,6,6,6"
														BorderBrush="#FF720700"
														BorderThickness="2,2,2,2" Margin="3,0,3,2"
														Width="12" Opacity="0.5">
                                                <Border.Background>
                                                    <LinearGradientBrush
																StartPoint="0.5,0.955317"
																EndPoint="0.5,0.00861141">
                                                        <GradientStop Color="#FF5A0400"
																	Offset="0" />
                                                        <GradientStop Color="#FF900C00"
																	Offset="1" />
                                                    </LinearGradientBrush>
                                                </Border.Background>
                                            </Border>
                                            <Border Margin="6.5,1,6.5,3" CornerRadius="5,5,5,5"
														BorderBrush="#FFFF6D00"
														BorderThickness="1,1,1,1"
														Background="{x:Null}"
														VerticalAlignment="Stretch" />
                                            <Ellipse Stretch="Fill" Height="17"
														VerticalAlignment="Bottom"
														Stroke="#FFFF6D00" Margin="2,0,2,2"
														x:Name="redEllipse">
                                                <Ellipse.Fill>
                                                    <RadialGradientBrush>
                                                        <GradientStop Offset="0"
																	Color="#FF720700" />
                                                    </RadialGradientBrush>
                                                </Ellipse.Fill>
                                            </Ellipse>
                                            <Border Margin="7.5,2,7.5,4" CornerRadius="4,4,4,4"
														BorderBrush="#FF720700"
														BorderThickness="1,1,1,1">
                                                <Border.Background>
                                                    <LinearGradientBrush
																StartPoint="0.5,0.955317"
																EndPoint="0.5,0.00861141">
                                                        <GradientStop Color="#FF5A0400"
																	Offset="0" />
                                                        <GradientStop Color="#FF900C00"
																	Offset="1" />
                                                    </LinearGradientBrush>
                                                </Border.Background>
                                            </Border>
                                            <Border Margin="8.5,220,8.5,9"
														CornerRadius="3,3,3,3">
                                                <Border.Background>
                                                    <LinearGradientBrush
																StartPoint="-0.0263883,0.499995"
																EndPoint="1.01428,0.499995">
                                                        <GradientStop Color="#FFFEFFFE"
																	Offset="0" />
                                                        <GradientStop Color="#FFFEFFFE"
																	Offset="0.5" />
                                                        <GradientStop Color="#FFD8DADB"
																	Offset="0.501" />
                                                        <GradientStop Color="#FFB2B5B7"
																	Offset="1" />
                                                    </LinearGradientBrush>
                                                </Border.Background>
                                            </Border>
                                            <Ellipse Stretch="Fill" Height="13" Margin="4,0,4,4"
														VerticalAlignment="Bottom">
                                                <Ellipse.Fill>
                                                    <LinearGradientBrush
																StartPoint="-0.0263883,0.499995"
																EndPoint="1.01428,0.499995">
                                                        <GradientStop Color="#FFFEFFFE"
																	Offset="0" />
                                                        <GradientStop Color="#FFFEFFFE"
																	Offset="0.50" />
                                                        <GradientStop Color="#FFD8DADB"
																	Offset="0.501" />
                                                        <GradientStop Color="#FFB2B5B7"
																	Offset="1" />
                                                    </LinearGradientBrush>
                                                </Ellipse.Fill>
                                            </Ellipse>
                                        </Grid>
                                    </Grid>
                                </ContentPresenter.Content>
                            </ContentPresenter>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemTemplate" Value="{StaticResource TickLabelEmpty}" />
                <Setter Property="Length" Value="1" />
                <Setter Property="Offset" Value="0" />
                <Setter Property="TickWidth" Value="1" />
                <Setter Property="Type" Value="Custom" />
            </Style>
 
            <ControlTemplate x:Key="LinearBarTemplate" TargetType="gauge:LinearBar">
                <Grid>
                    <Path x:Name="PART_BarPath" Fill="{TemplateBinding Background}"
								Stroke="{TemplateBinding BorderBrush}"
								StrokeThickness="{TemplateBinding StrokeThickness}" />
                    <Path x:Name="PART_EmptyPath" Fill="{TemplateBinding EmptyFill}"
								Stroke="{TemplateBinding BorderBrush}"
								StrokeThickness="{TemplateBinding StrokeThickness}" />
                </Grid>
            </ControlTemplate>
 
            <Style x:Key="ThermometerBarStyle" TargetType="gauge:LinearBar">
                <Setter Property="StrokeThickness" Value="0" />
                <Setter Property="IsAnimated" Value="True" />
                <Setter Property="EmptyFill" Value="Transparent" />
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush StartPoint="-0.0263883,0.499995"
									EndPoint="1.01428,0.499995">
                            <GradientStop Color="#FFFEFFFE" Offset="0" />
                            <GradientStop Color="#FFFEFFFE" Offset="0.5" />
                            <GradientStop Color="#FFD8DADB" Offset="0.501" />
                            <GradientStop Color="#FFB2B5B7" Offset="1" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="StartWidth" Value="0.013" />
                <Setter Property="EndWidth" Value="0.013" />
                <Setter Property="Template" Value="{StaticResource LinearBarTemplate}" />
            </Style>
 
        </Grid.Resources>
        <control:RadGauge x:Name="radGauge" Width="150" Height="300" Style="{StaticResource Telerik.Windows.Controls.RadGauge}">
            <gauge:LinearGauge Style="{StaticResource Telerik.Windows.Controls.Gauges.LinearGauge}">
                <gauge:LinearScale Name="linearScaleF" MajorTicks="6" MiddleTicks="1" MinorTicks="5"
						Left="0.5" Top="0.17" RelativeHeight="0.65" StrokeThickness="0"
						StartWidth="0.09" Min="-22" Max="104" StartTickOffset="2" EndTickOffset="-4" Background="Transparent">
                    <gauge:LinearScale.MajorTick>
                        <gauge:MajorTickProperties Location="CenterInside"
								Style="{StaticResource ThermometerMajorPropertiesStyle}" />
                    </gauge:LinearScale.MajorTick>
                    <gauge:LinearScale.MinorTick>
                        <gauge:MinorTickProperties Location="CenterInside"
								Style="{StaticResource ThermometerMinorPropertiesStyle}" />
                    </gauge:LinearScale.MinorTick>
                    <gauge:LinearScale.Label>
                        <gauge:LabelProperties Offset="0.02" Location="Inside" Style="{StaticResource Telerik.Windows.Controls.Gauges.LabelProperties}" />
                    </gauge:LinearScale.Label>
                </gauge:LinearScale>
                <gauge:LinearScale Name="linearScaleC" MiddleTicks="1" MinorTicks="5" Left="0.5"
						Top="0.17" RelativeHeight="0.65" StrokeThickness="0" StartWidth="0.09"
						MajorTicks="7" Min="-30" Max="40" Background="Transparent">
                    <gauge:LinearScale.MajorTick>
                        <gauge:MajorTickProperties Location="CenterOutside"
								Style="{StaticResource ThermometerMajorPropertiesStyle}" />
                    </gauge:LinearScale.MajorTick>
                    <gauge:LinearScale.MinorTick>
                        <gauge:MinorTickProperties Location="CenterOutside"
								Style="{StaticResource ThermometerMinorPropertiesStyle}" />
                    </gauge:LinearScale.MinorTick>
                    <gauge:LinearScale.Label>
                        <gauge:LabelProperties Offset="0.02" Location="Outside" Style="{StaticResource Telerik.Windows.Controls.Gauges.LabelProperties}" />
                    </gauge:LinearScale.Label>
                    <gauge:TickList>
                        <gauge:CustomTickMark Value="-37" Style="{StaticResource CustomTickMarkCelsiusStyle}" />
                        <gauge:CustomTickMark Value="-37.3" Style="{StaticResource CustomTickMarkFahrenheitStyle}" />
                        <gauge:CustomTickMark Value="5" Style="{StaticResource BulbOfThermometerBarStyle}" Location="OverCenter" />
                    </gauge:TickList>
                    <gauge:IndicatorList>
                        <gauge:LinearBar Name="linearBar" Value="0"
								Style="{StaticResource ThermometerBarStyle}" Location="OverCenter" />
                    </gauge:IndicatorList>
                </gauge:LinearScale>
 
                <gauge:LinearScale Left="0.5" Top="0.17" RelativeHeight="0.65" StrokeThickness="0"
						Min="-30" Max="40" Foreground="Transparent" MajorTicks="-1"
						IsInteractive="True" Background="Transparent">
                    <gauge:RangeList>
                        <gauge:LinearRange Name="coldRange" Min="-30" Max="30" StartWidth="0"
								EndWidth="0" BorderBrush="Transparent">
                            <gauge:LinearRange.Background>
                                <RadialGradientBrush>
                                    <GradientStop Offset="0" Color="LightGreen" />
                                    <GradientStop Offset="1" Color="DarkGreen" />
                                </RadialGradientBrush>
                            </gauge:LinearRange.Background>
                        </gauge:LinearRange>
                        <gauge:LinearRange Name="overheatRange" Min="30" Max="40" StartWidth="0"
								EndWidth="0" BorderBrush="Transparent">
                            <gauge:LinearRange.Background>
                                <RadialGradientBrush>
                                    <GradientStop Offset="0" Color="Orange" />
                                    <GradientStop Offset="1" Color="Red" />
                                </RadialGradientBrush>
                            </gauge:LinearRange.Background>
                        </gauge:LinearRange>
                    </gauge:RangeList>
                    <gauge:IndicatorList>
                        <gauge:Marker Name="threshold" RelativeHeight="0.06" RelativeWidth="0.08"
								Value="30" Location="OverCenter" ValueChanged="ThresholdValueCanged" Style="{StaticResource Telerik.Windows.Controls.Gauges.Marker}" />
                        <gauge:StateIndicator Name="overheatState" Left="0.65" Top="0.04"
								RelativeHeight="0.08" RelativeWidth="0.08" />
                    </gauge:IndicatorList>
                </gauge:LinearScale>
            </gauge:LinearGauge>
        </control:RadGauge>
    </Grid>
 
</UserControl>

7 Answers, 1 is accepted

Sort by
0
Lancelot
Top achievements
Rank 1
answered on 23 Jul 2012, 03:43 PM
Hi Jaques,

You are trying to use Silverlight 3 code. The example you are trying to use is obsolete and no longer supported. That is why you're getting partial styling. 

Here is the example you should be using http://demos.telerik.com/silverlight/#Gauge/Gallery/Thermometer 

Good Luck,
Lancelot
0
Jacques
Top achievements
Rank 1
answered on 23 Jul 2012, 05:10 PM
Capture.PNG
Hi Lancelot,

Thanks, I have tried that but then I get another array of errors including:
Error    5    The type 'telerik:VerticalLinearScale' was not found.
Error    22    The attachable property 'Indicators' was not found in type 'VerticalLinearScale'.
Error    26    The attachable property 'CustomItems' was not found in type 'VerticalLinearScale'.   

Imported namespaces: 
xmlns:telerik="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"


Please see attched.

Thank you very much for your help so far.


0
Andrey
Telerik team
answered on 24 Jul 2012, 10:12 AM
Hi Jacques,

In the 2011.Q3 release we introduced a new gauge control. It is almost new control redesigned from scratch. Some of its features are similar to the old control’s features but they are implemented in absolutely different way (using different set of properties), while others are completely new.
Our online samples are using the new gauge control.

Pay attention, In the 2012.Q2 release we introduced a few breaking changes in the gauge control. So to get this sample work you need the latest (2012.Q2) release of the RadControls for Silverlight .

Regards,
Andrey Murzov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Jacques
Top achievements
Rank 1
answered on 24 Jul 2012, 10:49 AM
Thanks Andrey,

I downloaded the latest free version (Which is obviously not working.) and it is not working with the example at http://demos.telerik.com/silverlight/#Gauge/Gallery/Thermometer Any plans on updating the examples to use the latest code?
Can you please provide me with a link to the Q2 version download? (I can't see it on the older versions link on my profile)

Regards
Jacques
0
Andrey
Telerik team
answered on 27 Jul 2012, 08:17 AM
Hi Jacques,

All examples on our site use the new gauge control and code have been updated respectively. Unfortunately the new gauge control isn't available with the free version of the Silverlight control. To use new gauge control you have to download evaluation version of the RadControls for Silverlight.

Greetings,
Andrey Murzov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
Jacques
Top achievements
Rank 1
answered on 27 Jul 2012, 08:41 AM
Hi Andrey,

Thanks for the feedback.
I am planning to use the control in one of my pet projects, can you please provide me with a download link to the free Q2 version?

0
Andrey
Telerik team
answered on 01 Aug 2012, 07:35 AM
Hi Jacques,

Unfortunately there is no 2012.Q2 version of the free library and we have no any plans on updating gauge control in the free library to the newest version.

Kind regards,
Andrey Murzov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Tags
Gauge
Asked by
Jacques
Top achievements
Rank 1
Answers by
Lancelot
Top achievements
Rank 1
Jacques
Top achievements
Rank 1
Andrey
Telerik team
Share this question
or