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

Gauge redesign

2 Answers 110 Views

Gauges

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

2 Answers, 1 is accepted

Accepted

answered on 18 Feb 2013, 04:09 PM

Hello Wade,

Unfortunately you can't create gauge which will looks exactly as one on the screenshot. But you can get something close using following XAML:

<telerik:RadQuadrantNWGauge OuterBackground="Transparent"

OuterBorderThickness="0"

Background="Transparent"

BorderThickness="0"

InnerBackground="Transparent"

InnerBorderThickness="0">

<telerik:QuadrantNWScale Fill="Transparent"

MajorTicks="-1">

<telerik:QuadrantNWScale.Indicators>

<telerik:BarIndicator Value="95"

UseRangeColor="True"

RangeColorMode="ProportionalBrush"

StartWidth="0.05"

EndWidth="0.1"/>

</telerik:QuadrantNWScale.Indicators>

<telerik:QuadrantNWScale.Ranges>

<telerik:GaugeRange Min="0" Max="10" IndicatorBackground="DarkViolet" />

<telerik:GaugeRange Min="10" Max="20" IndicatorBackground="Violet" />

<telerik:GaugeRange Min="20" Max="30" IndicatorBackground="DarkBlue" />

<telerik:GaugeRange Min="30" Max="40" IndicatorBackground="Blue" />

<telerik:GaugeRange Min="40" Max="50" IndicatorBackground="SkyBlue" />

<telerik:GaugeRange Min="50" Max="60" IndicatorBackground="Green" />

<telerik:GaugeRange Min="60" Max="70" IndicatorBackground="YellowGreen" />

<telerik:GaugeRange Min="70" Max="80" IndicatorBackground="Yellow" />

<telerik:GaugeRange Min="80" Max="90" IndicatorBackground="Orange" />

<telerik:GaugeRange Min="90" Max="100" IndicatorBackground="Red" />

</telerik:QuadrantNWScale.Ranges>

</telerik:QuadrantNWScale>

</telerik:RadQuadrantNWGauge>

All the best,
Andrey Murzov
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.