Gauge redesign

3 posts, 1 answers
  1. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 14 Feb 2013 Link to this post

    How hard is it to make one of the telerik gauges look like the CPH gauge in the attached screenshot?
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 18 Feb 2013 Link to this post

    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.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Wade
    Wade avatar
    22 posts
    Member since:
    Dec 2012

    Posted 19 Feb 2013 Link to this post

    Very Cool! Thank you!
Back to Top