Diederik Krols

The XAML Brewer

The Radial Gauge goes UWP

The Modern Radial Gauge that I built a couple of years ago for Windows 8 Store, Windows 8 Phone, and Windows 8.1 Universal Apps, recently made it to the Universal Windows Platform. It was designed by Arturo Toledo, built by myself, and then Filip Skakun embedded it in the WinRT XAML Toolkit, initially on CodePlex, now on GitHub.

I created a small sample app to test drive the new UWP version of the control. Here’s how it looks like on the PC:

gaugepc

The gauge is very customizable without the need for templating – although it *is* templatable. And as you see, it looks crisp in any size.

You bring the gauge in your apps through NuGet:

RadialGaugeNuGet

Here’s the control’s structure and its list of configurable properties:

taxonomy

  • Minimum: minimum value on the scale (double)
  • Maximum: maximum value on the scale (double)
  • Value: the value to represent (double)
  • ValueStringFormat: StringFormat to apply to the displayed value (string)
  • Unit: unit measure to display (string)
  • TickSpacing: spacing -in value units- between ticks (int)
  • NeedleBrush: color of the needle (Brush)
  • TickBrush: color of the outer ticks (Brush)
  • ScaleWidth: thickness of the scale in pixels – relative to the control’s default size (double)
  • ScaleBrush: background color of the scale (Brush)
  • ScaleTickBrush: color of the ticks on the scale (Brush)
  • TrailBrush: color of the trail following the needle (Brush)
  • ValueBrush: color of the value text (Brush)
  • UnitBrush: color of the unit measure text (Brush)

All colored components are configurable with a Brush instead of just a Color, so you can play with gradients, opacity, images, and so on. Here’s a page from the sample app to demonstrate this. It also demonstrates binding (using x:Bind):

gaugepc2

Here’s the XAML for the Dollar Bill Gauge:

<controls:Gauge Value="{x:Bind ViewModel.Expense, Mode=OneWay}"
                Unit="expense"
                ScaleTickBrush="Transparent"
                TickBrush="Transparent"
                ScaleWidth="40">
    <controls:Gauge.ScaleBrush>
        <ImageBrush ImageSource="ms-appx:///Assets/money.jpg" />
    </controls:Gauge.ScaleBrush>
    <controls:Gauge.NeedleBrush>
        <LinearGradientBrush EndPoint="1,0">
            <GradientStop Color="Transparent" />
            <GradientStop Color="Goldenrod"
                          Offset="0.5" />
            <GradientStop Color="Transparent"
                          Offset="1" />
        </LinearGradientBrush>
    </controls:Gauge.NeedleBrush>
    <controls:Gauge.TrailBrush>
        <SolidColorBrush Color="Green"
                         Opacity=".25" />
    </controls:Gauge.TrailBrush>
</controls:Gauge>

Here’s how the sample app shines on the phone:

gaugephone1 gaugephone2

The sample app is here on GitHub. It uses the NuGet package for the gauge. The official source code for the Radial Gauge is here on GitHub.

Enjoy!

XAML Brewer

Comments (12) -

  • Blair Goldsboro

    4/11/2016 9:34:51 AM |

    Fine together with your permission let me to take hold of your feed to stay up to date with drawing close post. Thanks one million and please keep up the enjoyable work.

  • Brenton Soderlund

    4/14/2016 11:09:08 AM |

    I needs to spend some time learning much more or understanding more. Thanks for great info I was looking for this info for my mission.

  • Evonne Tavolario

    4/19/2016 7:24:42 PM |

    Fine together with your permission let me to take hold of your feed to stay up to date with drawing close post. Thanks one million and please keep up the enjoyable work.

  • APDLWcW7qft4Ms

    4/28/2016 9:20:06 PM |

    264616 55078We will have a link exchange agreement among us! 187612

  • dor cohen

    5/3/2016 11:14:22 AM |

    As soon as I  noticed this  internet site  I went on reddit to share some of the love with them.

  • https://twitter.com/vinauditllc

    5/6/2016 5:03:04 AM |

    I don’t even know what to say, this made buying a used car so much easier!

  • lookup car

    5/17/2016 1:04:21 AM |

    I don’t even know what to say, this made buying a used car so much easier!

  • ÿþJ

    5/31/2016 12:57:55 AM |

    excellent submit, very informative. I ponder why the other specialists of this sector do not understand this. You must continue your writing. I am confident, you've a great readers' base already!

Comments are closed