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

Semi-circular gauge in free components

2 Answers 72 Views

Gauge

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

Elias asked on 09 Jan 2012, 02:45 PM

Dear all,

I would like to know if it is possible to create a semi-circular gauge using the free Silverlight components version Q3 2011.
I tried the following code but it did not work.

<UserControl.Resources>

<ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" />

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<telerik:RadGauge x:Name="radGauge" Width="300" Height="174">

<telerik:RadialGauge x:Name="radialGauge" Style="{StaticResource RadialGaugeHalfCircleNStyle}">

<telerik:RadialScale x:Name="radialScale" Style="{StaticResource RadialScaleHalfCircleNStyle}">

<telerik:IndicatorList>

<telerik:Needle x:Name="needle"

IsAnimated="True"

Value="50"/>

</telerik:IndicatorList>

</telerik:RadialScale>

</telerik:RadialGauge>

</telerik:RadGauge>

</Grid>

The styles "RadialGaugeHalfCircleNStyle" and "RadialScaleHalfCircleNStyle" appear to be missing.

Thank you for your help,
Regards,
Elias Haddad

2 Answers, 1 is accepted

Accepted

answered on 12 Jan 2012, 10:16 AM

Hi,

Unfortunately the free version Q3 2011 of the gauge control does not contain these resources. You can use the following XAML code to create a semi-circular gauge:

<UserControl x:Class="FreeGaugeTest.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:gauge="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"

xmlns:gauges="clr-namespace:Telerik.Windows.Controls.Gauges;assembly=Telerik.Windows.Controls.Gauge"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<UserControl.Resources>

<LinearGradientBrush x:Key="GaugeBackgroundStroke" EndPoint="0.957,0.703" StartPoint="0.043,0.297">

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

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

</LinearGradientBrush>

<Style x:Key="RadialGaugeHalfCircleNStyle" TargetType="gauges:RadialGauge">

<Setter Property="Background" Value="White" />

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="gauges:RadialGauge">

<Border Background="{TemplateBinding Background}"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<ContentControl>

<ContentControl.Template>

<ControlTemplate>

<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

<Path Stretch="Fill" Stroke="{StaticResource GaugeBackgroundStroke}" Data=

"M91.939407,0.5 C139.31508,0.49999905 178.2813,36.505226 182.967,82.644661 L183.37881,90.80011 L182.81073,93.61396 C181.59627,96.485283 178.75311,98.5 175.43941,98.5 L8.4394121,98.5 C5.1257014,98.5 2.2825561,96.485283 1.0680894,93.61396 L0.5,90.80011 L0.91181523,82.644661 C5.5975289,36.505226 44.563736,0.49999905 91.939407,0.5 z"

>

<Path.Fill>

<LinearGradientBrush EndPoint="0.492,2.025" StartPoint="0.777113676071167,-0.0273522660136223">

<GradientStop Color="#FF7D7D7D" Offset="0.032501000910997391"/>

<GradientStop Color="#FF4D4D4D" Offset="0.036111999303102493"/>

<GradientStop Color="#FF656565" Offset="0.065002001821994781"/>

<GradientStop Color="#FF454545" Offset="0.068613000214099884"/>

<GradientStop Color="#FF353535" Offset="0.728410005569458"/>

<GradientStop Color="#FF050505" Offset="0.98736101388931274"/>

<GradientStop Color="#FF9F9F9F" Offset="0.54500001668930054"/>

<GradientStop Color="#FF454545" Offset="0.38100001215934753"/>

<GradientStop Color="#FF1C1C1C" Offset="0.6600000262260437"/>

</LinearGradientBrush>

</Path.Fill>

</Path>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="4.5*"/>

<ColumnDefinition Width="175*"/>

<ColumnDefinition Width="4.5*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="4.5*"/>

<RowDefinition Height="89.5*"/>

<RowDefinition Height="5*"/>

</Grid.RowDefinitions>

<Path Grid.Row="1" Grid.Column="1" Stretch="Fill" StrokeThickness="2"

Data=

"M87.5,1 C135.27263,0.99999917 174,39.727367 174,87.5 L173.94951,88.499985 L1.0504949,88.499985 L1,87.5 C1.0000019,39.727367 39.727367,0.99999917 87.5,1 z"

>

<Path.Fill>

<LinearGradientBrush EndPoint="1.01800000667572,0.224000006914139" StartPoint="0.0729999989271164,0.792999982833862">

<GradientStop Color="#19FFFFFF"/>

<GradientStop Color="#00FCFDFD" Offset="1"/>

<GradientStop Color="#7FFEFEFE" Offset="0.17834007740020752"/>

<GradientStop Color="#7FFCFDFD" Offset="0.77882617712020874"/>

<GradientStop Color="#CCFDFDFD" Offset="0.42692622542381287"/>

</LinearGradientBrush>

</Path.Fill>

<Path.Stroke>

<LinearGradientBrush EndPoint="0.931445062160492,1.00007402896881" StartPoint="0.0299999993294477,-0.156000003218651">

<GradientStop Color="#7FB9B9B9" Offset="1"/>

<GradientStop Color="#FF6E6E6E" Offset="0.40200001001358032"/>

</LinearGradientBrush>

</Path.Stroke>

</Path>

</Grid>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="5.6*"/>

<ColumnDefinition Width="173*"/>

<ColumnDefinition Width="5.8*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="6.25*"/>

<RowDefinition Height="88.5*"/>

<RowDefinition Height="4.25*"/>

</Grid.RowDefinitions>

<Path Grid.Row="1" Grid.Column="1" Stretch="Fill" StrokeThickness="3"

Data=

"M170.5,86 C122.86038,86.330482 35.233849,86.13839 1.5,86 C1.5,39.33194 39.33194,1.5 86,1.5 C132.66806,1.5 170.5,39.33194 170.5,86 z"

>

<Path.Stroke>

<LinearGradientBrush EndPoint="0.49135622382164,0.974452018737793" StartPoint="0.777113676071167,-0.0273522660136223">