This is a migrated thread and some comments may be shown as answers.

Radial Guage Control Templates not working!!

5 Answers 167 Views

Gauge

This is a migrated thread and some comments may be shown as answers.

Kingsley Magnus-Eweka asked on 14 Sep 2009, 08:58 AM

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

<Grid Clip="{StaticResource ClipGeometry}"

Width="{Binding Path=Width}"

Height="{Binding Path=Height}">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Ellipse Stroke="#FFC4C3C2"

StrokeThickness="2"

Grid.ColumnSpan="5"

Grid.RowSpan="5">

<Ellipse.Fill>

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

</RadialGradientBrush.RelativeTransform>

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

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

<Grid

Clip="{StaticResource ClipGeometry}"

Width="{Binding Path=Width}"

Height="{Binding Path=Height}">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

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

</Path.Fill>

</Path>

</Grid>

</ControlTemplate>

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

</Grid>

</Border>

</ControlTemplate>

</Grid.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

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

5 Answers, 1 is accepted

Accepted

answered on 15 Sep 2009, 03:10 PM

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.

answered on 16 Sep 2009, 02:23 PM

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());

}

answered on 18 Sep 2009, 10:12 AM

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

<Grid.Resources>

<Grid

Width="{Binding Path=Width}"

Height="{Binding Path=Height}">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Ellipse Stroke="#FFC4C3C2"

StrokeThickness="2"

Grid.ColumnSpan="5"

Grid.RowSpan="5">

<Ellipse.Fill>

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

</RadialGradientBrush.RelativeTransform>

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

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

<Grid

Width="{Binding Path=Width}"

Height="{Binding Path=Height}">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Path Stretch="Fill"

Height="Auto"

RenderTransformOrigin="0.5,1.31"

HorizontalAlignment="Stretch"

Margin="2,2,2,8"

Grid.Column="1"

Grid.ColumnSpan="3"

Grid.Row="1"

Grid.RowSpan="1">

<Path.Fill>

</LinearGradientBrush>

</Path.Fill>

</Path>

</Grid>

</ControlTemplate>

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

</Grid>

</Border>

</ControlTemplate>

</Grid.Resources>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

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

<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:RadialGauge>

</Grid>

Cheers!
Kingsley

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Radial Guage Control Templates not working!!

5 Answers, 1 is accepted