radialgauge custom tick marks

[andrea]

Hi,
I have a radial gauge with 
Min="10" Max="35" MajorTicks="3" MiddleTicks="2" Multiplier="0.1">

I need to show custom marks with number label at positions 10, 20, 30, 35 and labels should display 1,2,3,3.5

How to do this?
Thank you very much.

[Andrey]

Hello Andrea,

You can use the RadialScale.MajorTickStep property and appropriate format for labels. For more information please take a look into the following documentation topics:
http://www.telerik.com/help/silverlight/radgauge-features-labels-format.html
http://www.telerik.com/help/silverlight/radial-scale-tick-marks.html

The sample code is below.

<telerik:RadGauge Width="300" Height="300">
    <telerik:RadialGauge>
        <telerik:RadialScale Min="10" Max="35" MajorTickStep="10" MiddleTicks="2" Multiplier="0.1">
            <telerik:RadialScale.Label>
                <telerik:LabelProperties Format="{}{0:D1}"/>
            </telerik:RadialScale.Label>
        </telerik:RadialScale>
    </telerik:RadialGauge>
</telerik:RadGauge>

You can also use the CustomTickMark.Format property the same way if you use the CustomTickMark control in additional to regular tick marks.

Regards,
Andrey Murzov
the Telerik team

[andrea]

Thank you very much.
Andrea

[andrea]

Hi,
I have a strange behaviour when i publish my silverlight application.
I use the free gauge control.
In the same project i have telerick reporting in evalutation.

When i browse the application, on page with gauge control appear the messagge "Telerick rad controls for silverlight trial".
So i check reference and the i have for assembly:
telerik.windows.controls

telerik.windows.controls.gauge

telerik.windows.controls.navigation
referenced the trial version 2011.2.712.1040 so i change all this references with free dll's version 2010.2.924.1040.

The message "trial" isn't showed and the gauge work fine, but when i navigate to other page with reportviewer control (5.1.11.928) i have an exception:
System.Windows.Markup.XamlParseException occurred
  Message=L'operazione per impostare la proprietà 'System.Windows.FrameworkElement.Style' ha generato un'eccezione. [Line: 79 Position: 119]
  LineNumber=79
  LinePosition=119
  StackTrace:
       su System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
       su PSIng.PageListaDdtLotto.InitializeComponent()
       su PSIng.PageListaDdtLotto..ctor()
  InnerException: System.Windows.Markup.XamlParseException
       Message=Tipo 'RadComboBox' non trovato poiché 'clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input' è uno spazio dei nomi sconosciuto. [Line: 8 Position: 36]
       LineNumber=8
       LinePosition=36
       StackTrace:
            su MS.Internal.XcpImports.CreateFromXaml(UnmanagedMemoryStream stream, String sourceAssemblyName, Boolean createNamescope, Boolean requireDefaultNamespace, Boolean allowEventHandlers)
            su System.Windows.Controls.Control.GetBuiltInStyle(IntPtr nativeTarget, IntPtr& nativeStyle)
       InnerException:

I translate in english:
Type 'RadComboBox' not found because 'clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input' is an unknow namespace

There are compatibility problem using reporting 2011 q2 and free gauge control 2010.q2

Do you have update to 2011 q2 for free silverlight gauge control?

Thank you very much.

[Andrey]

Hello Andrea,

You can't mix up DLLs from different versions of pur products in 1 project. Most probably the update for free silverlight gauge control will happen after our official Q3 2011 release.

All the best,

Andrey Murzov

the Telerik team

[andrea]

Ok, thank you very much.

Andrea

[Umapathi]

Hi everybody.,
 i am facing a strange issue..that is we are using radial gauge,in that we have used custom tick mark.when we are using the binding property in that.we are unable to view the gauges in design time..(i.e- in xaml).but its working fine with all datas..even we are getting all datas in our application..only problem is we are Not able to view the gauges in design time..Can any one resolve it..?
   here is my xaml...
<UserControl x:Class="Splendid.Koc.StatusMap.Views.GL.GLGaugeView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        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"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:Splendid_Common_Behaviors="clr-namespace:Splendid.Common.Behaviors;assembly=Splendid.Common"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
        xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" Width="900" Height="200"
        DataContext="{Binding GLGaugeViewModel, Source={StaticResource ServiceLocator}}">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary x:Name="ResourceDic"
                        Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <ControlTemplate x:Key="RadGaugeControlTemplate1"
                    TargetType="telerik:RadGauge" />
            <ControlTemplate x:Key="NeedleControlTemplate1"
                    TargetType="telerik:Needle" />
            <ControlTemplate x:Key="NeedleControlTemplate2"
                    TargetType="telerik:Needle" />
            <ControlTemplate x:Key="RadialRangeControlTemplate1"
                    TargetType="telerik:RadialRange" />
        </ResourceDictionary>
    </UserControl.Resources>
    <controlsToolkit:BusyIndicator x:Name="GLGaugeBusyIndicator"
IsBusy="{Binding IsLoading}" DisplayAfter="0">
        <Grid x:Name="LayoutRoot" Width="900"
                HorizontalAlignment="Center" VerticalAlignment="Bottom">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <StackPanel Margin="72,63,76,40" Grid.Row="1"
                    Orientation="Horizontal">
                <Path
                        Data="F1M84.1304,229.0811C84.1304,177.0551,126.3064,134.8781,178.3334,134.8781C230.3594,134.8781,272.5364,177.0551,272.5364,229.0811"
                        Stretch="Fill" Margin="0,15,-0.23,0"
                        UseLayoutRounding="False" Height="40"
                        VerticalAlignment="Center" Width="79"
                        HorizontalAlignment="Left">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF0A0A0B" Offset="0" />
                            <GradientStop Color="#FF39353B" Offset="1" />
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <Path
                        Data="F1M84.1304,229.0811C84.1304,177.0551,126.3064,134.8781,178.3334,134.8781C230.3594,134.8781,272.5364,177.0551,272.5364,229.0811"
                        Stretch="Fill" Margin="145,15,0,0"
                        UseLayoutRounding="False" Height="40"
                        VerticalAlignment="Center" Width="79"
                        HorizontalAlignment="Left">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF0A0A0B" Offset="0" />
                            <GradientStop Color="#FF39353B" Offset="1" />
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <Path
                        Data="F1M84.1304,229.0811C84.1304,177.0551,126.3064,134.8781,178.3334,134.8781C230.3594,134.8781,272.5364,177.0551,272.5364,229.0811"
                        Stretch="Fill" Margin="143,15,0,0"
                        UseLayoutRounding="False" Height="40"
                        VerticalAlignment="Center" Width="79"
                        HorizontalAlignment="Left" IsHitTestVisible="True">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF0A0A0B" Offset="0" />
                            <GradientStop Color="#FF39353B" Offset="1" />
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
                <Path
                        Data="F1M84.1304,229.0811C84.1304,177.0551,126.3064,134.8781,178.3334,134.8781C230.3594,134.8781,272.5364,177.0551,272.5364,229.0811"
                        Stretch="Fill" Margin="143,15,0,0"
                        UseLayoutRounding="False" Height="40"
                        VerticalAlignment="Center" Width="79"
                        HorizontalAlignment="Left">
                    <Path.Fill>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF0A0A0B" Offset="0" />
                            <GradientStop Color="#FF39353B" Offset="1" />
                        </LinearGradientBrush>
                    </Path.Fill>
                </Path>
            </StackPanel>
            <StackPanel x:Name="stkSelectedWellName" Width="Auto"
                    Grid.Row="0">
                <TextBlock Text="{Binding GaugeWellName}"
                        VerticalAlignment="Center" Style="{StaticResource GauageText}"
                        HorizontalAlignment="Center" Visibility="{Binding GaugeHeaderVisibility}"  />
            </StackPanel>

            <Border x:Name="bdrGauges" VerticalAlignment="Bottom"
                    Grid.RowSpan="3" Grid.Row="1" Margin="0">
                <Grid VerticalAlignment="Bottom">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Border Grid.Row="0" Grid.Column="0">
                        <StackPanel>
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top" Style="{StaticResource GauageNumber}"
                                    Text="{Binding FirstGauge.FirstNeedleValue}"
                                    HorizontalAlignment="Center">
                            </TextBlock>
                        </StackPanel>
                    </Border>
                    <Grid Grid.Column="0" Grid.Row="1">
                        <Border BorderBrush="{Binding NominalGaugeColor}"
                                BorderThickness="1" Margin="10,10,10,15">
                            <telerik:RadGauge x:Name="rdgLiquidRate"
                                    Width="200" Height="100"
                                    Tag="Nominal Pressure" >
                                <telerik:RadialGauge
                                        Style="{StaticResource RadialGaugeHalfCircleNStyle}"
                                        Background="{x:Null}"
                                        BorderBrush="{x:Null}"
                                        OuterBackground="{x:Null}"
                                        OuterBorderBrush="{x:Null}"
                                        x:Name="RadialGauge1">
                                    <telerik:TickList >
                                        <telerik:CustomTickMark x:Name="QLiqTick0" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="0" Value="0"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark x:Name="QLiqTick1" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FirstGauge.LowLow}" Value="{Binding FirstGauge.LowLow}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark x:Name="QLiqTick2" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FirstGauge.Low}" Value="{Binding FirstGauge.Low}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark x:Name="QLiqTick3" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FirstGauge.High}" Value="{Binding FirstGauge.High}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark x:Name="QLiqTick4" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FirstGauge.HighHigh}" Value="{Binding FirstGauge.HighHigh}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark x:Name="QLiqTick5" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FirstGauge.Max}" Value="{Binding FirstGauge.Max}"></telerik:CustomTickMark>
                                    </telerik:TickList>
                                    <telerik:RadialScale
                                            Style="{StaticResource RadialScaleHalfCircleNStyle}"
                                            Min="0" Max="{Binding FirstGauge.Max}"
                                            LabelRotationMode="None"
                                            MajorTickStep="{Binding FirstGauge.MajorTickStep}"
                                            FontWeight="SemiBold"
                                            x:Name="QLiqRadScale">
                                        <telerik:RadialScale.Label>
                                            <telerik:LabelProperties Foreground="Transparent"
                                                    Format="{Binding FirstGauge.LableFormat}"
                                                    Location="CenterOutside" />
                                        </telerik:RadialScale.Label>
                                        <telerik:RadialScale.MajorTick>
                                            <telerik:MajorTickProperties Length="0.25" Location="Outside" Background="#FFBABABA" Offset="0.17" />
                                        </telerik:RadialScale.MajorTick>
                                        <telerik:RadialScale.MinorTick>
                                            <telerik:MinorTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                        </telerik:RadialScale.MinorTick>
                                        <telerik:RadialScale.MiddleTick>
                                            <telerik:MiddleTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                        </telerik:RadialScale.MiddleTick>
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QLiqRadialRange1"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding FirstGauge.LowLow}"
                                                        Min="0"  />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QLiqRadialRange2"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding FirstGauge.Low}"
                                                        Min="{Binding FirstGauge.LowLow}" />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QLiqRadialRange3"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#64851e" Max="{Binding FirstGauge.High}"
                                                        Min="{Binding FirstGauge.Low}" />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QLiqRadialRange4"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding FirstGauge.HighHigh}"
                                                        Min="{Binding FirstGauge.High}"  />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QLiqRadialRange5"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding FirstGauge.Max}"
                                                        Min="{Binding FirstGauge.HighHigh}"  />
                                        <telerik:IndicatorList>
                                            <telerik:Needle
                                                    x:Name="gauge1_needle2"
                                                    Value="{Binding FirstGauge.FirstNeedleValue}"
                                                    IsAnimated="true"
                                                    ArrowBackground="Black"
                                                    ArrowBorderBrush="Black"
                                                    Height="13"
                                                    Background="{x:Null}"
                                                    BorderBrush="{x:Null}">
                                                <telerik:Needle.Effect>
                                                    <DropShadowEffect
                                                            BlurRadius="4"
                                                            ShadowDepth="2"
                                                            Opacity="0.75" />
                                                </telerik:Needle.Effect>
                                            </telerik:Needle>
                                        </telerik:IndicatorList>
                                    </telerik:RadialScale>
                                </telerik:RadialGauge>
                            </telerik:RadGauge>
                        </Border>
                        <StackPanel Margin="0" VerticalAlignment="Bottom">
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top" FontSize="13"
                                    Foreground="White"
                                    HorizontalAlignment="Center" Text="{Binding FirstGaugeUnit}"></TextBlock>
                            <TextBlock Margin="0,5,0,-5" TextWrapping="Wrap"
                                    VerticalAlignment="Top" Style="{StaticResource GauageText}"
                                    HorizontalAlignment="Center" Text="{Binding FirstGaugeHeader}"></TextBlock>
                        </StackPanel>
                    </Grid>
                    <Border Grid.Row="0" Grid.Column="1">
                        <StackPanel>
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top"  Style="{StaticResource GauageNumber}"
                                    Text="{Binding SecondGauge.FirstNeedleValue}"
                                    HorizontalAlignment="Center">
                            </TextBlock>
                        </StackPanel>
                    </Border>
                    <Grid Grid.Column="1" Grid.Row="1">
                        <Border BorderBrush="{Binding VoidageGaugeColor}"
                                BorderThickness="1" Margin="10,10,10,15">
                            <telerik:RadGauge Grid.Row="3" Width="200"
                                    Height="100" Tag="Voidage Replacement"
                                    x:Name="rdgVoidageReplacement">
                                <telerik:RadGauge x:Name="RadialGauge2"
                                        Width="200" Height="100"
                                        Tag="Nominal Pressure" >
                                    <telerik:RadialGauge
                                            Style="{StaticResource RadialGaugeHalfCircleNStyle}"
                                            Background="{x:Null}"
                                            BorderBrush="{x:Null}"
                                            OuterBackground="{x:Null}"
                                            OuterBorderBrush="{x:Null}"
                                            x:Name="RadialGauge1VR">
                                        <telerik:TickList x:Name="QoilTickList" Canvas.ZIndex="1">
                                            <telerik:CustomTickMark x:Name="QoilTick0" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="0" Value="0"></telerik:CustomTickMark>
                                            <telerik:CustomTickMark x:Name="QoilTick1" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding SecondGauge.LowLow}" Value="{Binding SecondGauge.LowLow}"></telerik:CustomTickMark>
                                            <telerik:CustomTickMark x:Name="QoilTick2" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding SecondGauge.Low}" Value="{Binding SecondGauge.Low}"></telerik:CustomTickMark>
                                            <telerik:CustomTickMark x:Name="QoilTick3" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding SecondGauge.High}" Value="{Binding SecondGauge.High}"></telerik:CustomTickMark>
                                            <telerik:CustomTickMark x:Name="QoilTick4" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding SecondGauge.HighHigh}" Value="{Binding SecondGauge.HighHigh}"></telerik:CustomTickMark>
                                            <telerik:CustomTickMark x:Name="QoilTick5" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding SecondGauge.Max}" Value="{Binding SecondGauge.Max}"></telerik:CustomTickMark>
                                        </telerik:TickList>
                                        <telerik:RadialScale x:Name="QoilRadScale"
                                                Style="{StaticResource RadialScaleHalfCircleNStyle}"
                                                Min="0" Max="{Binding SecondGauge.Max}"
                                                MajorTickStep="{Binding SecondGauge.MajorTickStep}"
                                                LabelRotationMode="None"
                                                FontWeight="SemiBold">
                                            <telerik:RadialScale.Label>
                                                <telerik:LabelProperties Foreground="Transparent"
                                                        Format="{Binding SecondGauge.LableFormat}"
                                                        Location="CenterOutside"  />
                                            </telerik:RadialScale.Label>
                                            <telerik:RadialScale.MajorTick>
                                                <telerik:MajorTickProperties Length="0.25" Location="Outside" Background="#FFBABABA" Offset="0.17" />
                                            </telerik:RadialScale.MajorTick>
                                            <telerik:RadialScale.MinorTick>
                                                <telerik:MinorTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                            </telerik:RadialScale.MinorTick>
                                            <telerik:RadialScale.MiddleTick>
                                                <telerik:MiddleTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                            </telerik:RadialScale.MiddleTick>
                                            <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QOilRadialRange1"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding SecondGauge.LowLow}"
                                                        Min="0"  />
                                            <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QOilRadialRange2"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding SecondGauge.Low}"
                                                        Min="{Binding SecondGauge.LowLow}" />
                                            <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QOilRadialRange3"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#64851e" Max="{Binding SecondGauge.High}"
                                                        Min="{Binding SecondGauge.Low}" />
                                            <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QOilRadialRange4"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding SecondGauge.HighHigh}"
                                                        Min="{Binding SecondGauge.High}"  />
                                            <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="QOilRadialRange5"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding SecondGauge.Max}"
                                                        Min="{Binding SecondGauge.HighHigh}"  />
                                            <telerik:IndicatorList>
                                                <telerik:Needle
                                                        x:Name="gauge1_needle1"
                                                        Value="{Binding SecondGauge.FirstNeedleValue}"
                                                        ArrowBackground="Black"
                                                        ArrowBorderBrush="Black"
                                                        IsAnimated="True"
                                                        Height="13"
                                                        Background="{x:Null}"
                                                        BorderBrush="{x:Null}"
                                                        HorizontalAlignment="Stretch">
                                                    <telerik:Needle.Effect>
                                                        <DropShadowEffect
                                                                BlurRadius="4"
                                                                ShadowDepth="2"
                                                                Opacity="0.75" />
                                                    </telerik:Needle.Effect>
                                                </telerik:Needle>
                                            </telerik:IndicatorList>
                                        </telerik:RadialScale>
                                    </telerik:RadialGauge>
                                </telerik:RadGauge>
                            </telerik:RadGauge>
                        </Border>
                        <StackPanel Margin="0" VerticalAlignment="Bottom">
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top" FontSize="13"
                                    Foreground="White"
                                    HorizontalAlignment="Center"><Run
                                    Text="{Binding SecondGaugeUnit}" /></TextBlock>

                            <TextBlock Margin="0,5,0,-5" TextWrapping="Wrap"
                                    VerticalAlignment="Top" Style="{StaticResource GauageText}"
                                    HorizontalAlignment="Center"><Run
                                        Text="{Binding SecondGaugeHeader}" /></TextBlock>
                        </StackPanel>
                    </Grid>
                    <Border Grid.Row="0" Grid.Column="2">
                        <StackPanel>
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top" Style="{StaticResource GauageNumber}"
                                    Text="{Binding ThirdGauge.FirstNeedleValue}"
                                    HorizontalAlignment="Center">
                            </TextBlock>
                        </StackPanel>
                    </Border>
                    <Grid Grid.Column="2" Grid.Row="1">
                        <Border BorderBrush="{Binding VolumetricGaugeColor}"
                                BorderThickness="1" Margin="10">
                            <telerik:RadGauge x:Name="rdgVolumetricEfficiency"
                                    Width="200" Height="100"
                                    Tag="Volumetric Efficiency" >
                                <telerik:RadialGauge
                                        Style="{StaticResource RadialGaugeHalfCircleNStyle}"
                                        Background="{x:Null}"
                                        BorderBrush="{x:Null}"
                                        OuterBackground="{x:Null}"
                                        OuterBorderBrush="{x:Null}">
                                    <telerik:TickList x:Name="WCTickList" Canvas.ZIndex="1">
                                        <telerik:CustomTickMark Name="WCTick0" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="0" Value="0"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="WCTick1" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding ThirdGauge.LowLow}" Value="{Binding ThirdGauge.LowLow}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="WCTick2" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding ThirdGauge.Low}" Value="{Binding ThirdGauge.Low}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="WCTick3" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding ThirdGauge.High}" Value="{Binding ThirdGauge.High}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="WCTick4" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding ThirdGauge.HighHigh}" Value="{Binding ThirdGauge.HighHigh}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="WCTick5" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding ThirdGauge.Max}" Value="{Binding ThirdGauge.Max}"></telerik:CustomTickMark>
                                    </telerik:TickList>
                                    <telerik:RadialScale
                                            Style="{StaticResource RadialScaleHalfCircleNStyle}"
                                            LabelRotationMode="None"
                                            FontWeight="SemiBold"
                                            MajorTickStep="{Binding ThirdGauge.MajorTickStep}" Min="0" Max="{Binding ThirdGauge.Max}"
                                            x:Name="WaterCutRadScale">
                                        <telerik:RadialScale.Label>
                                            <telerik:LabelProperties Foreground="Transparent"
                                                Format="{Binding ThirdGauge.LableFormat}"
                                                    Location="CenterOutside" />
                                        </telerik:RadialScale.Label>
                                        <telerik:RadialScale.MajorTick>
                                            <telerik:MajorTickProperties Length="0.25" Location="Outside" Background="#FFBABABA" Offset="0.17" />
                                        </telerik:RadialScale.MajorTick>
                                        <telerik:RadialScale.MinorTick>
                                            <telerik:MinorTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                        </telerik:RadialScale.MinorTick>
                                        <telerik:RadialScale.MiddleTick>
                                            <telerik:MiddleTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                        </telerik:RadialScale.MiddleTick>
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="WCRadialRange1"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding ThirdGauge.LowLow}"
                                                        Min="0"  />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="WCRadialRange2"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding ThirdGauge.Low}"
                                                        Min="{Binding ThirdGauge.LowLow}" />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="WCRadialRange3"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#64851e" Max="{Binding ThirdGauge.High}"
                                                        Min="{Binding ThirdGauge.Low}" />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="WCRadialRange4"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding ThirdGauge.HighHigh}"
                                                        Min="{Binding ThirdGauge.High}"  />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="WCRadialRange5"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding ThirdGauge.Max}"
                                                        Min="{Binding ThirdGauge.HighHigh}"  />
                                        <telerik:IndicatorList>
                                            <telerik:Needle
                                                    x:Name="gauge1_needle3"
                                                    Value="{Binding ThirdGauge.FirstNeedleValue}"
                                                    IsAnimated="true"
                                                    ArrowBackground="Black"
                                                    ArrowBorderBrush="Black"
                                                    Height="13"
                                                    Background="{x:Null}"
                                                    BorderBrush="{x:Null}">
                                                <telerik:Needle.Effect>
                                                    <DropShadowEffect
                                                            BlurRadius="4"
                                                            Opacity="0.75"
                                                            ShadowDepth="2" />
                                                </telerik:Needle.Effect>
                                            </telerik:Needle>
                                        </telerik:IndicatorList>
                                    </telerik:RadialScale>
                                </telerik:RadialGauge>
                            </telerik:RadGauge>
                        </Border>
                        <StackPanel Margin="0" VerticalAlignment="Bottom">
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top" FontSize="13"
                                    Foreground="White"
                                    HorizontalAlignment="Center"><Run Text="{Binding ThirdGaugeUnit}" /></TextBlock>
                            <TextBlock Margin="0,5,0,-5" TextWrapping="Wrap"
                                    VerticalAlignment="Top" Style="{StaticResource GauageText}"
                                    HorizontalAlignment="Center"><Run
                                        Text="{Binding ThirdGaugeHeader}" /></TextBlock>
                        </StackPanel>
                    </Grid>
                    <Border Grid.Row="0" Grid.Column="3">
                        <StackPanel Orientation="Vertical">
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top" Style="{StaticResource GauageNumber}"
                                    Text="{Binding FourthGauge.FirstNeedleValue}"
                                    HorizontalAlignment="Center">
                            </TextBlock>
                        </StackPanel>
                    </Border>
                    <Grid Grid.Column="3" Grid.Row="1">
                        <Border BorderBrush="{Binding DisplacementGaugeColor}"
                                BorderThickness="1" Margin="10">
                            <telerik:RadGauge x:Name="rdgDisplacement"
                                    Width="200" Height="100"
                                    Tag="Displacement Efficiency">
                                <telerik:RadialGauge
                                        Style="{StaticResource RadialGaugeHalfCircleNStyle}"
                                        Background="{x:Null}"
                                        BorderBrush="{x:Null}"
                                        OuterBackground="{x:Null}"
                                        OuterBorderBrush="{x:Null}"
                                        x:Name="RadialGauge4">
                                    <telerik:TickList x:Name="GORTickList" Canvas.ZIndex="1">
                                        <telerik:CustomTickMark Name="GORTick0" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="0" Value="0"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="GORTick1" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FourthGauge.LowLow}" Value="{Binding FourthGauge.LowLow}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="GORTick2" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FourthGauge.Low}" Value="{Binding FourthGauge.Low}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="GORTick3" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FourthGauge.High}" Value="{Binding FourthGauge.High}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="GORTick4" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FourthGauge.HighHigh}" Value="{Binding FourthGauge.HighHigh}"></telerik:CustomTickMark>
                                        <telerik:CustomTickMark Name="GORTick5" Background="Transparent" BorderBrush="Transparent" Location="CenterOutside" TooltipFormat="{Binding FourthGauge.Max}" Value="{Binding FourthGauge.Max}"></telerik:CustomTickMark>
                                    </telerik:TickList>                                    
                                    <telerik:RadialScale
                                            Style="{StaticResource RadialScaleHalfCircleNStyle}"
                                            LabelRotationMode="None"
                                            FontWeight="SemiBold"
                                            Max="{Binding FourthGauge.Max}" Min="0" MajorTickStep="{Binding FourthGauge.MajorTickStep}"
                                            x:Name="GORRadScale">
                                        <telerik:RadialScale.Label>
                                            <telerik:LabelProperties Foreground="Transparent"
                                                    Format="{Binding FourthGauge.LableFormat}"
                                                    Location="CenterOutside" />
                                        </telerik:RadialScale.Label>
                                        <telerik:RadialScale.MajorTick>
                                            <telerik:MajorTickProperties Length="0.25" Location="Outside" Background="#FFBABABA" Offset="0.17" />
                                        </telerik:RadialScale.MajorTick>
                                        <telerik:RadialScale.MinorTick>
                                            <telerik:MinorTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                        </telerik:RadialScale.MinorTick>
                                        <telerik:RadialScale.MiddleTick>
                                            <telerik:MiddleTickProperties Length="0.10" Location="Outside" Background="#FFBABABA" Offset="0.32"/>
                                        </telerik:RadialScale.MiddleTick>
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="GORRange1"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding FourthGauge.LowLow}"
                                                        Min="0"  />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="GORRange2"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding FourthGauge.Low}"
                                                        Min="{Binding FourthGauge.LowLow}" />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="GORRange3"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#64851e" Max="{Binding FourthGauge.High}"
                                                        Min="{Binding FourthGauge.Low}" />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="GORRange4"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#9f8821" Max="{Binding FourthGauge.HighHigh}"
                                                        Min="{Binding FourthGauge.High}"  />
                                        <telerik:RadialRange Canvas.ZIndex="-1"
                                                        x:Name="GORRange5"
                                                        StartWidth="1"
                                                        EndWidth="1"
                                                        Location="OverCenter"
                                                        Background="#8b250e" Max="{Binding FourthGauge.Max}"
                                                        Min="{Binding FourthGauge.HighHigh}"  />
                                        <telerik:IndicatorList>
                                            <telerik:Needle
                                                    x:Name="gauge1_needle4"
                                                    Value="{Binding FourthGauge.FirstNeedleValue}"
                                                    IsAnimated="true"
                                                    ArrowBackground="Black"
                                                    ArrowBorderBrush="Black"
                                                    Height="13"
                                                    Background="{x:Null}"
                                                    BorderBrush="{x:Null}">
                                                <telerik:Needle.Effect>
                                                    <DropShadowEffect
                                                            BlurRadius="4"
                                                            ShadowDepth="2"
                                                            Opacity="0.75" />
                                                </telerik:Needle.Effect>
                                            </telerik:Needle>
                                        </telerik:IndicatorList>
                                    </telerik:RadialScale>
                                </telerik:RadialGauge>
                            </telerik:RadGauge>
                        </Border>
                        <StackPanel Orientation="Vertical" Margin="0,81,0,0">
                            <TextBlock Margin="0" TextWrapping="Wrap"
                                    VerticalAlignment="Top" FontSize="13"
                                    Foreground="White"
                                    HorizontalAlignment="Center" Text="{Binding FourthGaugeUnit}"></TextBlock>
                            <TextBlock Margin="0,5,0,-5" TextWrapping="Wrap"
                                    VerticalAlignment="Top" Style="{StaticResource GauageText}"
                                    HorizontalAlignment="Center" Text="{Binding FourthGaugeHeader}"></TextBlock>
                        </StackPanel>
                    </Grid>
                </Grid>
            </Border>
        </Grid>
    </controlsToolkit:BusyIndicator>
</UserControl>

thanks
Umapathi.A

[Andrey]

Hello Umapathi,

Unfortunately there is a problem in design time with the data binding of the CustomTickMark.Value property in a XAML code. As workaround you can specify some value in XAML code and you can create the data binding within the codebehind of UserControl like the following:

Binding binding = new Binding("LowLow");
binding.Source = viewModel;
this.QLiqTick1.SetBinding(CustomTickMark.ValueProperty, binding);

Also I should note that the RadialRange elements of your XAML shouldn't be included into the RadialScale element directly. They should be placed inside the RangeList like the indicators in the IndicatorList.

Best wishes,
Andrey Murzov
the Telerik team

[Umapathi]

Hi Andrey....
           Thank You for your reply...this is nice.we hav done it already in code behind...Could you give us a detail in XAML..not in code behind..we are in positiion to bind the datas using only on  XAML...at the same time.design view should be clear ...Looking for positive reply...

[Andrey]

Hello Umapathi,

Unfortunately it can't be done in a XAML code, because you will get an exception in design time with the data binding of the CustomTickMark.Value property. At this moment we have redesigned the gauge control completely. New version will be available in the 2011.Q3 release. Current version of gauge control will be also available, but it will not contain a fix of this issue.

Kind regards,
Andrey Murzov
the Telerik team