radialgauge custom tick marks

10 posts, 0 answers
  1. andrea
    andrea avatar
    7 posts
    Member since:
    Apr 2011

    Posted 13 Oct 2011 Link to this post

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

    Posted 17 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. andrea
    andrea avatar
    7 posts
    Member since:
    Apr 2011

    Posted 17 Oct 2011 Link to this post

    Thank you very much.
    Andrea
  5. andrea
    andrea avatar
    7 posts
    Member since:
    Apr 2011

    Posted 19 Oct 2011 Link to this post

    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.


  6. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 24 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  7. andrea
    andrea avatar
    7 posts
    Member since:
    Apr 2011

    Posted 24 Oct 2011 Link to this post

    Ok, thank you very much.

    Andrea
  8. Umapathi
    Umapathi avatar
    8 posts
    Member since:
    Oct 2011

    Posted 08 Nov 2011 Link to this post

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

    Posted 10 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  10. Umapathi
    Umapathi avatar
    8 posts
    Member since:
    Oct 2011

    Posted 11 Nov 2011 Link to this post

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

  11. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 15 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner