LinearGauge and RadialGauge Templates

2 posts, 0 answers
  1. Josh Eastburn
    Josh Eastburn avatar
    32 posts
    Member since:
    Aug 2012

    Posted 11 Oct 2010 Link to this post


    I am working on styling a RadialGauge to set the background color as a gradient.  Usually, I would extract the Template using Expression Blend, but I know this doesn't always work correctly with Telerik controls.  Could you provide the full style template for the RadialGauge for customization?

    Also, I am customizing a LinearGauge.  I am using parts of the gauge to create a red/green indicator bar (see attached image).  The problem I'm having is that the LinearRange control does not seem to allow a gradient background.  Am I able to achieve this by customizing the default style template?  If so, could you also provide the full style template for LinearGauge / LinearRange as well?

    Here is my existing code where the "GreenGradient" and "RedGradient" have no effect, I just get a solid Red or Green:

    <LinearGradientBrush x:Key="RedGradient" StartPoint="0.5, 0" EndPoint="0.5, 1">
        <GradientStop Offset="0" Color="#FFCB5656" />
        <GradientStop Offset="1" Color="#FFA73131" />
    <LinearGradientBrush x:Key="GreenGradient" StartPoint="0.5, 0" EndPoint="0.5, 1">
        <GradientStop Offset="0" Color="#FF8ec75b" />
        <GradientStop Offset="1" Color="#FF6bb32b" />
    <telerik:LinearScale Orientation="Horizontal" Left="0" Top="0" Height="18"  Width="100" Min="0" Max="{Binding NumOrders}"
             RelativeHeight="1" HorizontalAlignment="Stretch" MajorTicks="0" ShowFirstLabel="False" ShowLastLabel="False">
        <telerik:LinearRange Min="0" Max="{Binding NumOrdersLate}" Background="{StaticResource RedGradient}" StartWidth="1" EndWidth="1" Location="OverCenter"/>
        <telerik:LinearRange Min="{Binding NumOrdersLate}" Max="{Binding NumOrders}" Background="{StaticResource GreenGradient}" StartWidth="1" EndWidth="1" Location="OverCenter"/>

    Thank you!
  2. Sia
    Sia avatar
    667 posts

    Posted 13 Oct 2010 Link to this post

    Hi Josh,

    Regarding your first question:
    I am not sure which version of RadGauge you use, but we introduced several properties which can be useful in your case:
    <Grid x:Name="LayoutRoot" Background="White">
                <RadialGradientBrush x:Name="GaugeBackground">
                    <GradientStop Color="#FFEA1E1E" Offset="0"/>
                    <GradientStop Color="#FF744343" Offset="1"/>
    <telerik:RadGauge Name="RadGauge1" Width="250" Height="250">
            <gauge:RadialGauge Name="RadialGauge1" OuterBackground="{StaticResource GaugeBackground}" Background="Transparent" BorderBrush="Transparent">
                <gauge:RadialScale Name="radialScale" Min="0" Max="800" IsInteractive="True" MinorTicks="3" >
                        <gauge:Needle RelativeShift="1.5" IsAnimated="True" SnapType="ToGrid" Value="200" />
    Please check the example above and the attached picture. If you want to achieve a really different look, I will send you the whole template.

    Regarding your second question:
    I have tested your code and it works correctly. Just have in mind that the orientation of the gradients needs to be changed. If you have the following gradients in your resources:
    <LinearGradientBrush x:Key="RedGradient" StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Offset="0" Color="Red" />
        <GradientStop Offset="1" Color="Black" />
    <LinearGradientBrush x:Key="GreenGradient" StartPoint="0,0.5" EndPoint="1,0.5">
        <GradientStop Offset="0" Color="Green" />
        <GradientStop Offset="1" Color="Black" />
    you will see the result shown in lineargauge.png. I have changed the colors to make the example more illustrative.

    Let me know if you need something else.

    Best wishes,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top