Thermometer - Missing styles

8 posts, 0 answers
  1. Jacques
    Jacques avatar
    6 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    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>
    

  2. Lancelot
    Lancelot avatar
    251 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2012 Link to this post

    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
  3. DevCraft banner
  4. Jacques
    Jacques avatar
    6 posts
    Member since:
    Jul 2012

    Posted 23 Jul 2012 Link to this post

    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.


  5. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 24 Jul 2012 Link to this post

    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.

  6. Jacques
    Jacques avatar
    6 posts
    Member since:
    Jul 2012

    Posted 24 Jul 2012 Link to this post

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

    Posted 27 Jul 2012 Link to this post

    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.

  8. Jacques
    Jacques avatar
    6 posts
    Member since:
    Jul 2012

    Posted 27 Jul 2012 Link to this post

    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?

  9. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 01 Aug 2012 Link to this post

    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.

Back to Top
DevCraft banner