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

Semi-circular gauge in free components

2 Answers 47 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Elias
Top achievements
Rank 1
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

Sort by
0
Accepted
Andrey
Telerik team
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: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 >>

0
Elias
Top achievements
Rank 1
answered on 12 Jan 2012, 10:47 AM
Dear Andrey,

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

Regards,
Elias Haddad.
Tags
Gauge
Asked by
Elias
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Elias
Top achievements
Rank 1
Share this question
or