Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > Semi-circular gauge in free components

• Elias

  Posted on Jan 9, 2012 (permalink)

  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

  Reply

• Answer Andrey Andrey

  Posted on Jan 12, 2012 (permalink)

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

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

                                                      </Path>

                                                  </Grid>

                                                  <Grid>

                                                      <Grid.ColumnDefinitions>

                                                          <ColumnDefinition Width="12.3*"/>

                                                          <ColumnDefinition Width="144.7*"/>

                                                          <ColumnDefinition Width="27*"/>

                                                      </Grid.ColumnDefinitions>

                                                      <Grid.RowDefinitions>

                                                          <RowDefinition Height="14*"/>

                                                          <RowDefinition Height="79*"/>

                                                          <RowDefinition Height="6*"/>

                                                      </Grid.RowDefinitions>

                                                      <Path Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"

                                                    Stretch="Fill" StrokeThickness="1"

                                                    Data="M0,79 A115,84 84 0 1 145,22 A155,135 0 0 0 0,79 z">

                                                          <Path.Fill>

                                                              <LinearGradientBrush EndPoint="0.96451336145401,0.731560051441193" StartPoint="0.0437715947628021,0.465641617774963">

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

                                                  </Grid>

                                                  <Grid>

                                                      <Grid.ColumnDefinitions>

                                                          <ColumnDefinition Width="12.3*"/>

                                                          <ColumnDefinition Width="144.7*"/>

                                                          <ColumnDefinition Width="27*"/>

                                                      </Grid.ColumnDefinitions>

                                                      <Grid.RowDefinitions>

                                                          <RowDefinition Height="14*"/>

                                                          <RowDefinition Height="79*"/>

                                                          <RowDefinition Height="6*"/>

                                                      </Grid.RowDefinitions>

                                                      <Path Grid.Row="1" Grid.Column="1"

                                                    HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill" StrokeThickness="1"

                                                    Data="M0,79 A115,84 84 0 1 145,22 A135,185 0 0 0 26,79 L0,79 z">

                                                          <Path.Fill>

                                                              <LinearGradientBrush EndPoint="0.530642867088318,0.294964909553528" StartPoint="0.0568305980477402,0.899205097419853">

                                                                  <GradientStop Color="#4CFFFFFF" Offset="0.107"/>

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

                                                              </LinearGradientBrush>

                                                          </Path.Fill>

                                                      </Path>

                                                  </Grid>

                                              </Grid>

                                          </ControlTemplate>

                                      </ContentControl.Template>

                                  </ContentControl>

                                  <ItemsPresenter />

                                  <ContentControl>

                                      <ContentControl.Template>

                                          <ControlTemplate>

                                          </ControlTemplate>

                                      </ContentControl.Template>

                                  </ContentControl>

                              </Grid>

                          </Border>

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

              <Setter Property="ItemsPanel">

                  <Setter.Value>

                      <ItemsPanelTemplate>

                          <Grid />

                      </ItemsPanelTemplate>

                  </Setter.Value>

              </Setter>

          </Style>

   

          <Style x:Key="RadialScaleHalfCircleNStyle" TargetType="gauges:RadialScale">

              <Setter Property="Center" Value="0.5,0.86" />

              <Setter Property="Radius" Value="1.26" />

              <Setter Property="StartAngle" Value="180" />

              <Setter Property="SweepAngle" Value="180" />

              <Setter Property="LabelRotationMode" Value="SurroundOut" />

          </Style>

      </UserControl.Resources>

       

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

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

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

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

                      <gauges:IndicatorList>

                          <gauges:Needle x:Name="needle"

                                         IsAnimated="True"

                                         Value="50"/>

                      </gauges:IndicatorList>

                  </gauges:RadialScale>

              </gauges:RadialGauge>

          </gauge:RadGauge>

      </Grid>

  </UserControl>

  
  All the best,
  Andrey Murzov
  the Telerik team

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

  Reply

• Elias

  Posted on Jan 12, 2012 (permalink)

  Dear Andrey,
  
  Thank you for your reply.
  It worked like a charm.
  
  Regards,
  Elias Haddad.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > Gauge > Semi-circular gauge in free components