Semi-circular gauge in free components

3 posts, 1 answers
  1. Elias
    Elias avatar
    2 posts
    Member since:
    May 2011

    Posted 09 Jan 2012 Link to this post

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

    Posted 12 Jan 2012 Link to this post

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

  3. DevCraft banner
  4. Elias
    Elias avatar
    2 posts
    Member since:
    May 2011

    Posted 12 Jan 2012 Link to this post

    Dear Andrey,

    Thank you for your reply.
    It worked like a charm.

    Regards,
    Elias Haddad.
Back to Top