LinearGauge and RadialGauge Templates

[Josh Eastburn]

Hello,

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>
<LinearGradientBrush x:Key="GreenGradient" StartPoint="0.5, 0" EndPoint="0.5, 1">
    <GradientStop Offset="0" Color="#FF8ec75b" />
    <GradientStop Offset="1" Color="#FF6bb32b" />
</LinearGradientBrush>
<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:RangeList>
    <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"/>
    </telerik:RangeList>
</telerik:LinearScale>

Thank you!
Josh

[Sia]

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">
    <Grid.Resources>
            <RadialGradientBrush x:Name="GaugeBackground">
                <GradientStop Color="#FFEA1E1E" Offset="0"/>
                <GradientStop Color="#FF744343" Offset="1"/>
            </RadialGradientBrush>
    </Grid.Resources>
<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:IndicatorList>
                    <gauge:Needle RelativeShift="1.5" IsAnimated="True" SnapType="ToGrid" Value="200" />
                </gauge:IndicatorList>
            </gauge:RadialScale>
        </gauge:RadialGauge>
    </telerik:RadGauge>
</Grid>

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>
<LinearGradientBrush x:Key="GreenGradient" StartPoint="0,0.5" EndPoint="1,0.5">
    <GradientStop Offset="0" Color="Green" />
    <GradientStop Offset="1" Color="Black" />
</LinearGradientBrush>

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,
Sia
the Telerik team