Radial Guage Control Templates not working!!

6 posts, 1 answers
  1. Kingsley Magnus-Eweka
    Kingsley Magnus-Eweka avatar
    54 posts
    Member since:
    Aug 2009

    Posted 14 Sep 2009 Link to this post

    Hi
     I  a couple of things to point out ...
    I have been trying out the Radial Guage,  When i try to apply Control Templates to change the background and foreground it does not work, i am currently grabbing the code for the Telerik Silverlight Documentation example under  the "How To" > "How to Customize the Layout of a RadialGuage "

    firstly the example has a flaw i think someone forgot the add the following code or has ommitted it for some strange reason:
    Style="{StaticResource NewGaugeStyle}">
    so anyone who tries to use that example to customize the radial guage will find out it will not work!! because the control is not using the style which referes to the forground and background templates! and unless you look through the entire example you will not even know what is going on as there will be no error generated

    Secondly,
    after adding that piece of code for the radial Guage to use the style attribute to the radial Guage Telerik Xaml Element...it fails in a spectacular fashion citing:
    this line which is just above the Background control template:

    that the "Rect" attribute is out-of-range! what ever that means can someone please take a look at this and try to make it work as it does not work it does not seem like this example was even tested before being put in the documentation here is a link to the offending Rad Guage example

    ms-help://MS.VSCC.v90/MS.VSIPCC.v90/telerik.windows.controls.silverlight/telerik.windows.controls.gauge/chart-customize-radialgauge-layout.html

    It actually took some doing before i could get my code to compile using this example, the example it will work "out-of-the-box" adding the radguage in a grid  and just copying and pasting the ControlTemplates in the Grid Resource...this is not true a whole lot of errors where thrown up and a lot of debugging to remove the conflicting code before i could even get it to run and get to the error in question

    here is the final rendition of my code after removing as much conflicts as possible - showing that the example does not work out-of-the-box!

    <Grid x:Name="grdR2"> <!--Background="#FF47ABEE"-->

    <Grid.Resources>

    <!--<telerik:FormatConverter x:Key="FormatConverter" /> THIS DOES NOT WORK EITHER were is it being refered from!!????-->

    <RectangleGeometry x:Key="ClipGeometry" Rect="0,0,300,150" /> <!--RECT is out of range Error! WHY HOW WHAT WHERE ?????!!-->

    <!-- New Background Template -->

    <ControlTemplate x:Key="CustomRadialGaugeBackground" TargetType="ContentControl">

    <Grid Clip="{StaticResource ClipGeometry}"

    Width="{Binding Path=Width}"

    Height="{Binding Path=Height}">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="0.15*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.3*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.15*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

    <RowDefinition Height="0.15*"/>

    <RowDefinition/>

    <RowDefinition Height="0.3*"/>

    <RowDefinition/>

    <RowDefinition Height="0.15*"/>

    </Grid.RowDefinitions>

    <Ellipse Stroke="#FFC4C3C2"

    StrokeThickness="2"

    Grid.ColumnSpan="5"

    Grid.RowSpan="5">

    <Ellipse.Fill>

    <LinearGradientBrush StartPoint="0,0.500001" EndPoint="1,0.500001">

    <GradientStop Color="#FFC8CACC" Offset="0"/>

    <GradientStop Color="#FFABADAF" Offset="0.87"/>

    <GradientStop Color="#FF8F9093" Offset="1"/>

    </LinearGradientBrush>

    </Ellipse.Fill>

    </Ellipse>

    <Ellipse Stretch="Uniform"

    HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch"

    Grid.Column="1"

    Grid.ColumnSpan="3"

    Grid.Row="1"

    Grid.RowSpan="3">

    <Ellipse.Fill>

    <RadialGradientBrush RadiusX="0.548605"

    RadiusY="0.553172"

    Center="0.496522,0.498134"

    GradientOrigin="0.496522,0.498134">

    <RadialGradientBrush.RelativeTransform>

    <TransformGroup/>

    </RadialGradientBrush.RelativeTransform>

    <GradientStop Color="#FF000000" Offset="0"/>

    <GradientStop Color="#FF6A0600" Offset="0.296707"/>

    <GradientStop Color="#FFAD1100" Offset="0.449867"/>

    <GradientStop Color="#FFF11C00" Offset="0.840652"/>

    <GradientStop Color="#FF780E00" Offset="0.939574"/>

    <GradientStop Color="#FF000000" Offset="1"/>

    </RadialGradientBrush>

    </Ellipse.Fill>

    </Ellipse>

    <Ellipse Stretch="Uniform"

    Opacity="0.5"

    HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch"

    Grid.Column="1"

    Grid.ColumnSpan="3"

    Grid.Row="1"

    Grid.RowSpan="3">

    <Ellipse.Fill>

    <LinearGradientBrush StartPoint="0.499997,-0.00352026" EndPoint="0.499997,0.992959">

    <GradientStop Color="#FFFF7000" Offset="0"/>

    <GradientStop Color="#FFD13F00" Offset="0.482804"/>

    <GradientStop Color="#FFA30F00" Offset="0.554947"/>

    <GradientStop Color="#FFA30F00" Offset="1"/>

    </LinearGradientBrush>

    </Ellipse.Fill>

    </Ellipse>

    <Ellipse Stretch="Fill"

    StrokeThickness="1"

    StrokeLineJoin="Round"

    Stroke="#34DC1900"

    Fill="#34000000"

    HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch"

    Grid.Column="2"

    Grid.Row="2" />

    </Grid>

    </ControlTemplate>

    <!-- New Forground Template-->

    <ControlTemplate x:Key="CustomRadialGaugeForeground" TargetType="ContentControl">

    <Grid

    Clip="{StaticResource ClipGeometry}"

    Width="{Binding Path=Width}"

    Height="{Binding Path=Height}">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="0.15*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.3*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.15*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

    <RowDefinition Height="0.15*"/>

    <RowDefinition/>

    <RowDefinition Height="0.3*"/>

    <RowDefinition/>

    <RowDefinition Height="0.15*"/>

    </Grid.RowDefinitions>

    <Path Stretch="Fill"

    Height="Auto"

    RenderTransformOrigin="0.5,1.31"

    Data="M136.99973,92.000117 C60.784439,92.000117 1.6558759,113.43244 4.7598601,101.93656 20.616215,43.211116 74.261859,0 138,0 200.39567,0 251.72642,41.847141 270.18819,98.246777 275.99955,116.00015 213.21503,92.000117 136.99973,92.000117 z"

    HorizontalAlignment="Stretch"

    Margin="2,2,2,8"

    Grid.Column="1"

    Grid.ColumnSpan="3"

    Grid.Row="1"

    Grid.RowSpan="1">

    <Path.Fill>

    <LinearGradientBrush StartPoint="0.499997,-0.29169" EndPoint="0.499997,1.57502">

    <GradientStop Color="#34FFF000" Offset="0"/>

    <GradientStop Color="#34FFA100" Offset="0.482804"/>

    <GradientStop Color="#34FF5300" Offset="0.554947"/>

    <GradientStop Color="#34FF5300" Offset="1"/>

    </LinearGradientBrush>

    </Path.Fill>

    </Path>

    </Grid>

    </ControlTemplate>

    <!--New Template with the new fore and background -->

    <ControlTemplate x:Key="CustomRadialGaugeTemplate" TargetType="Gauge:RadialGauge">

    <Border Background="{TemplateBinding Background}"

    BorderBrush="{TemplateBinding BorderBrush}"

    BorderThickness="{TemplateBinding BorderThickness}">

    <Grid>

    <ContentControl Template="{StaticResource CustomRadialGaugeBackground}"/>

    <ItemsPresenter />

    <ContentControl Template="{StaticResource CustomRadialGaugeForeground}"/>

    </Grid>

    </Border>

    </ControlTemplate>

    <!-- Style that houses the Control Templates for foreground and background-->

    <Style x:Key="NewGaugeStyle" TargetType="Gauge:RadialGauge">

        <Setter Property="Template" Value="{StaticResource CustomRadialGaugeTemplate}" /> 
    </
    Style>

    </Grid.Resources>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>


    <
    TextBlock x:Name="txtblkRadGuagePay" Text="91% of invoices paid within payment terms" Style="{StaticResource TextBlockStyle}" FontSize="12" FontWeight="Bold" Margin="1,0,0,0" Grid.Row="0"/>

    <Gauge:RadialGauge Name="radialeGuagePay" Grid.Row="1" Margin="1,10,0,0" Style="{StaticResource NewGaugeStyle}" > <!-- Not working due to the RECT is out of range Error above on 4th line from above in code!!-->

    <Gauge:RadialScale Name="radialScale" StartAngle="180" SweepAngle="180" Background="White" Radius="0.75">

    <Gauge:RadialScale.MajorTick>

    <Gauge:MajorTickProperties Length="0.03" TooltipFormat="Tick mark at {0}" />

    </Gauge:RadialScale.MajorTick>

    <Gauge:RadialScale.MiddleTick>

    <Gauge:MiddleTickProperties Length="0.075" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MiddleTick>

    <Gauge:RadialScale.MinorTick>

    <Gauge:MinorTickProperties Length="0.025" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MinorTick>

    <Gauge:RadialScale.Label>

    <Gauge:LabelProperties Location="CenterOutside" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.Label>

    <!-- Inner Radial Scale -->

    <Gauge:RadialScale Name="InnerRadialScale" MajorTickStep="20" StartAngle="180" SweepAngle="170" Radius="0.40" Background="Black">

    <Gauge:RadialScale.MajorTick>

    <Gauge:MajorTickProperties Background="White" Length="0.01" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MajorTick>

    <Gauge:RadialScale.MiddleTick>

    <Gauge:MiddleTickProperties Background="White" Length="0.075" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MiddleTick>

    <Gauge:RadialScale.MinorTick>

    <Gauge:MinorTickProperties Background="White" Length="0.025" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MinorTick>

    <Gauge:RadialScale.Label>

    <Gauge:LabelProperties TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.Label>

    <Gauge:RadialScale.Indicators>

    <Gauge:Needle Name="needleWhite" Value="30" Background="Black" Location="Inside" IsAnimated="True" />

    <Gauge:Needle Name="needleRed" Value="90" Background="Red" Location="Inside" IsAnimated="True" />

    </Gauge:RadialScale.Indicators>

    </Gauge:RadialScale>

    </Gauge:RadialScale>

    <!--<Gauge:RadialScale x:Name="radialScale" Min="0" Max="100" >

    <Gauge:IndicatorList>

    <Gauge:Needle x:Name="needle" Height="13" Value="30" Background="White" Width="81" />

    </Gauge:IndicatorList>

    <Gauge:IndicatorList>

    <Gauge:Needle x:Name="needle1" Value="90" Background="Red"/>

    </Gauge:IndicatorList>

    </Gauge:RadialScale>-->

    </Gauge:RadialGauge>

    </Grid>

    can some one please check all this and get back to me i am putting it in this forum here for all to see so that they can avoid the whole hour i spent debugging and trying to get this to run as well as i am putting it in the ticket support for a quick reponse from telerik

    Kingsley

     

  2. Kingsley Magnus-Eweka
    Kingsley Magnus-Eweka avatar
    54 posts
    Member since:
    Aug 2009

    Posted 14 Sep 2009 Link to this post

    Sorry forgot to add this by the way this is the exact error i get in a Message box:

    Line: 56
    Error: Unhandled Error in Silverlight Application
    Code: 2013   
    Category: ParserError      
    Message: Attribute {StaticResource ClipGeometry} value is out of range.    
    File:     
    Line: 1    
    Position: 78    
  3. DevCraft banner
  4. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 15 Sep 2009 Link to this post

    Hi Kingsley Magnus-Eweka,

    I’m sorry. It is our fault actually. The “How to customize the layout of a RadialGauge” help section you’ve referenced is intended for the WPF only and have been included to the Silverlight help by mistake. 

    If you’d like to create semi-circle radial gauge then you can use predefined styles are available from installation package. For example, to create north-oriented semicircle gauge you can use following XAML:

    <UserControl x:Class="TestGaugeApplication.Page" 
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
                 xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
                 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"   
                 Width="500" Height="400">  
        <UserControl.Resources> 
            <ResourceDictionary> 
                <ResourceDictionary.MergedDictionaries> 
                    <ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" /> 
                </ResourceDictionary.MergedDictionaries> 
            </ResourceDictionary> 
        </UserControl.Resources> 
        <Grid x:Name="LayoutRoot" Background="White">  
            <control:RadGauge Width="340" Height="200">  
                <gauge:RadialGauge Style="{StaticResource RadialGaugeHalfCircleNStyle}">  
                    <gauge:RadialScale Style="{StaticResource RadialScaleHalfCircleNStyle}">  
                        <gauge:IndicatorList> 
                            <gauge:Needle /> 
                        </gauge:IndicatorList> 
                    </gauge:RadialScale> 
                </gauge:RadialGauge> 
            </control:RadGauge> 
        </Grid> 
    </UserControl> 
     

    There are 4 orientations of the semicircle gauges:
    North
    Sets by using N letter in style names
    RadialGaugeHalfCircleNStyle
    RadialScaleHalfCircleNStyle

    South
    Sets by using S letter in style names
    RadialGaugeHalfCircleSStyle
    RadialScaleHalfCircleSStyle

    East
    Sets by using E letter in style names
    RadialGaugeHalfCircleEStyle
    RadialScaleHalfCircleEStyle

    West
    Sets by using W letter in style names
    RadialGaugeHalfCircleWStyle
    RadialScaleHalfCircleWStyle

    In case if you need to create your own template for gauge control you can use technique which is described in the “Customizing appearance of the radial gauge” help section.

    All the best,
    Andrey Murzov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Kingsley Magnus-Eweka
    Kingsley Magnus-Eweka avatar
    54 posts
    Member since:
    Aug 2009

    Posted 16 Sep 2009 Link to this post

    Thanks,
    I will now proceed and try out the section you described and get back to you.
    Kingsley

    p.s it will be nice for someone to go through all the code examples and make cure every single control does what it says on the 'tin' in the documentation, as i also previously  pointed out the ObservableCollection Method used does not work as well
    in the RadGridView -> Tutorial -> Getting Started Section

    2.Binding RadGridView Example

    does not work...here is the problem:
    I have pasted the culprit Method instead of the whole class:

    the Customer Class' GetObservableObjectData() is wrong here is the orginal the corrected version is below

    private  ObservableCollection<Customer> GetObservableObjectData()
    {
       
    return new ObservableCollection<Customer>(GetData());


    Here is the correction with some of my notes as comments

      

    private ObservableCollection<Customer> GetObservableObjectData()

            {

                //This line compiles but no data is returned as GetData() is not called!

                //return new ObservableCollection<Customer>();

                // This line does not work as there is no Customer constructor that accepts IEnumerable<Customer> method such as GetData()

                //obviously to return the data! This is obviously a mistake by Telerik

     

                //return new ObservableCollection<Customer>(GetData());

     

                //- corrected!

                var c = new Customer();

                var result = new ObservableCollection<Customer>();

                foreach (var item in c.GetData())

                {

                    result.Add(item);

                }

     

                return result; // new ObservableCollection<Customer>(); // (c.GetData());

            }

     

     

     

     

     

     

     

     

  6. Kingsley Magnus-Eweka
    Kingsley Magnus-Eweka avatar
    54 posts
    Member since:
    Aug 2009

    Posted 18 Sep 2009 Link to this post

    Hi Andrey,
    thanks for pointing me in the right direction...and just for the benefit of others i was able to make it work even though it was meant to be for the WPF documentation all that needed to be removed from the mark up is:
    <RectangleGeometry x:Key="ClipGeometry" Rect="0,0,300,150" />
    and any other references of Xaml elements using it I have now  re-edited my code and posted the fully working control template and have commented out the Error elements and attribute(property) references below:

    ·         <Grid x:Name="grdR2"> <!--Background="#FF47ABEE"-->

    <Grid.Resources>

    <!--<telerik:FormatConverter x:Key="FormatConverter"/> -->

    <!--<RectangleGeometry x:Key="ClipGeometry" Rect="0,0,300,150" /> -->

     

    <!-- New Background Template -->

    <ControlTemplate x:Key="CustomRadialGaugeBackground" TargetType="ContentControl">   <!--Clip="{StaticResource ClipGeometry}”-->

    <Grid

    Width="{Binding Path=Width}"

    Height="{Binding Path=Height}">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="0.15*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.3*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.15*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

    <RowDefinition Height="0.15*"/>

    <RowDefinition/>

    <RowDefinition Height="0.3*"/>

    <RowDefinition/>

    <RowDefinition Height="0.15*"/>

    </Grid.RowDefinitions>

    <Ellipse Stroke="#FFC4C3C2"

    StrokeThickness="2"

    Grid.ColumnSpan="5"

    Grid.RowSpan="5">

    <Ellipse.Fill>

    <LinearGradientBrush StartPoint="0,0.500001" EndPoint="1,0.500001">

    <GradientStop Color="#FFC8CACC" Offset="0"/>

    <GradientStop Color="#FFABADAF" Offset="0.87"/>

    <GradientStop Color="#FF8F9093" Offset="1"/>

    </LinearGradientBrush>

    </Ellipse.Fill>

    </Ellipse>

    <Ellipse Stretch="Uniform"

    HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch"

    Grid.Column="1"

    Grid.ColumnSpan="3"

    Grid.Row="1"

    Grid.RowSpan="3">

    <Ellipse.Fill>

    <RadialGradientBrush RadiusX="0.548605"

    RadiusY="0.553172"

    Center="0.496522,0.498134"

    GradientOrigin="0.496522,0.498134">

    <RadialGradientBrush.RelativeTransform>

    <TransformGroup/>

    </RadialGradientBrush.RelativeTransform>

    <GradientStop Color="#FF000000" Offset="0"/>

    <GradientStop Color="#FF6A0600" Offset="0.296707"/>

    <GradientStop Color="#FFAD1100" Offset="0.449867"/>

    <GradientStop Color="#FFF11C00" Offset="0.840652"/>

    <GradientStop Color="#FF780E00" Offset="0.939574"/>

    <GradientStop Color="#FF000000" Offset="1"/>

    </RadialGradientBrush>

    </Ellipse.Fill>

    </Ellipse>

    <Ellipse Stretch="Uniform"

    Opacity="0.5"

    HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch"

    Grid.Column="1"

    Grid.ColumnSpan="3"

    Grid.Row="1"

    Grid.RowSpan="3">

    <Ellipse.Fill>

    <LinearGradientBrush StartPoint="0.499997,-0.00352026" EndPoint="0.499997,0.992959">

    <GradientStop Color="#FFFF7000" Offset="0"/>

    <GradientStop Color="#FFD13F00" Offset="0.482804"/>

    <GradientStop Color="#FFA30F00" Offset="0.554947"/>

    <GradientStop Color="#FFA30F00" Offset="1"/>

    </LinearGradientBrush>

    </Ellipse.Fill>

    </Ellipse>

    <Ellipse Stretch="Fill"

    StrokeThickness="1"

    StrokeLineJoin="Round"

    Stroke="#34DC1900"

    Fill="#34000000"

    HorizontalAlignment="Stretch"

    VerticalAlignment="Stretch"

    Grid.Column="2"

    Grid.Row="2" />

    </Grid>

    </ControlTemplate>

    <!-- New Forground Template-->

    <ControlTemplate x:Key="CustomRadialGaugeForeground" TargetType="ContentControl">  <!--Clip="{StaticResource ClipGeometry}”-->

    <Grid

    Width="{Binding Path=Width}"

    Height="{Binding Path=Height}">

    <Grid.ColumnDefinitions>

    <ColumnDefinition Width="0.15*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.3*"/>

    <ColumnDefinition/>

    <ColumnDefinition Width="0.15*"/>

    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>

    <RowDefinition Height="0.15*"/>

    <RowDefinition/>

    <RowDefinition Height="0.3*"/>

    <RowDefinition/>

    <RowDefinition Height="0.15*"/>

    </Grid.RowDefinitions>

    <Path Stretch="Fill"

    Height="Auto"

    RenderTransformOrigin="0.5,1.31"

    Data="M136.99973,92.000117 C60.784439,92.000117 1.6558759,113.43244 4.7598601,101.93656 20.616215,43.211116 74.261859,0 138,0 200.39567,0 251.72642,41.847141 270.18819,98.246777 275.99955,116.00015 213.21503,92.000117 136.99973,92.000117 z"

    HorizontalAlignment="Stretch"

    Margin="2,2,2,8"

    Grid.Column="1"

    Grid.ColumnSpan="3"

    Grid.Row="1"

    Grid.RowSpan="1">

    <Path.Fill>

    <LinearGradientBrush StartPoint="0.499997,-0.29169" EndPoint="0.499997,1.57502">

    <GradientStop Color="#34FFF000" Offset="0"/>

    <GradientStop Color="#34FFA100" Offset="0.482804"/>

    <GradientStop Color="#34FF5300" Offset="0.554947"/>

    <GradientStop Color="#34FF5300" Offset="1"/>

    </LinearGradientBrush>

    </Path.Fill>

    </Path>

    </Grid>

    </ControlTemplate>

    <!--New Template with the new fore and background -->

    <ControlTemplate x:Key="CustomRadialGaugeTemplate" TargetType="Gauge:RadialGauge">

    <Border Background="{TemplateBinding Background}"

    BorderBrush="{TemplateBinding BorderBrush}"

    BorderThickness="{TemplateBinding BorderThickness}">

    <Grid>

    <ContentControl Template="{StaticResource CustomRadialGaugeBackground}"/>

    <ItemsPresenter />

    <ContentControl Template="{StaticResource CustomRadialGaugeForeground}"/>

    </Grid>

    </Border>

    </ControlTemplate>

    <!-- Style that houses the Control Templates for foreground and background-->

    <Style x:Key="NewGaugeStyle" TargetType="Gauge:RadialGauge">

        <Setter Property="Template" Value="{StaticResource CustomRadialGaugeTemplate}" /> 
    </
    Style>

    </Grid.Resources>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>


    <
    TextBlock x:Name="txtblkRadGuagePay" Text="91% of invoices paid within payment terms" Style="{StaticResource TextBlockStyle}" FontSize="12" FontWeight="Bold" Margin="1,0,0,0" Grid.Row="0"/>

    <Gauge:RadialGauge Name="radialeGuagePay" Grid.Row="1" Margin="1,10,0,0" Style="{StaticResource NewGaugeStyle}" >

    <Gauge:RadialScale Name="radialScale" StartAngle="180" SweepAngle="180" Background="White" Radius="0.75">

    <Gauge:RadialScale.MajorTick>

    <Gauge:MajorTickProperties Length="0.03" TooltipFormat="Tick mark at {0}" />

    </Gauge:RadialScale.MajorTick>

    <Gauge:RadialScale.MiddleTick>

    <Gauge:MiddleTickProperties Length="0.075" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MiddleTick>

    <Gauge:RadialScale.MinorTick>

    <Gauge:MinorTickProperties Length="0.025" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MinorTick>

    <Gauge:RadialScale.Label>

    <Gauge:LabelProperties Location="CenterOutside" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.Label>

    <!-- Inner Radial Scale -->

    <Gauge:RadialScale Name="InnerRadialScale" MajorTickStep="20" StartAngle="180" SweepAngle="170" Radius="0.40" Background="Black">

    <Gauge:RadialScale.MajorTick>

    <Gauge:MajorTickProperties Background="White" Length="0.01" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MajorTick>

    <Gauge:RadialScale.MiddleTick>

    <Gauge:MiddleTickProperties Background="White" Length="0.075" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MiddleTick>

    <Gauge:RadialScale.MinorTick>

    <Gauge:MinorTickProperties Background="White" Length="0.025" TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.MinorTick>

    <Gauge:RadialScale.Label>

    <Gauge:LabelProperties TooltipFormat="Tick mark at {0}"/>

    </Gauge:RadialScale.Label>

    <Gauge:RadialScale.Indicators>

    <Gauge:Needle Name="needleWhite" Value="30" Background="Black" Location="Inside" IsAnimated="True" />

    <Gauge:Needle Name="needleRed" Value="90" Background="Red" Location="Inside" IsAnimated="True" />

    </Gauge:RadialScale.Indicators>

    </Gauge:RadialScale>

    </Gauge:RadialScale>

    </Gauge:RadialGauge>

    </Grid>

     
    Cheers!
     Kingsley

  7. Hristo
    Admin
    Hristo avatar
    408 posts

    Posted 18 Sep 2009 Link to this post

    Hello Kingsley,

    Thank you for your feedback. I can assure you that the pointed out flaws in our documentation will be fixed as soon as possible and will present in the documentation with our next official release.

    I have updated your Telerik points for your involvement.

    Regards,
    Hristo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
DevCraft banner