Phone Elements: Radial gauge control

One of the controls you will find in the latest builds of our Phone Elements control suite for WP7 is the radial gauge. Gauges are great for displaying current values within a specified range to the user. Radial gauges in particular could be used to display speed, acceleration, time, pressure and any thing else you want. When changing the current value of the gauge, the needle moves using smooth animations to update the displayed value.

Using the radial gauge control in your applications is very simple. It extends from the RangeBase class so you just need to set the Minimum and Maximum values to specify the range, and use a binding to set the Value property from your business model. Additionally, the StartAngle and SweepAngle properties can be used to customize how the labels get displayed. The StartAngle defines where the first label gets rendered. A value of 0 will display the first label at the top of the gauge. Larger values move around the gauge in a clockwise direction. The SweepAngle is the total angle of an arc that the labels will be positioned against. A value of 180 for example will display the labels around half a circle. Here is an example of setting up a radial gauge in XAML.

<ms:RadialGauge Maximum="100" StartAngle="200" SweepAngle="270" />

Custom styling

Custom radial gauge style

Like all controls in Phone Elements, the radial gauge can be styled in all sorts of different ways to make your applications sparkle. From nice looking styles that follow the Metro guidelines, to shiny styles with smooth gradient paints. Here is some example code used to create the style seen above.

<LinearGradientBrush x:Key="RadialGaugeBackground" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="Black" />
    <GradientStop Offset="0.6" Color="Black" />
    <GradientStop Offset="1" Color="#3A3A3A" />
</LinearGradientBrush>
 
<LinearGradientBrush x:Key="ShineBackground" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#77FFFFFF" />
    <GradientStop Offset="1" Color="#11EEEEEE" />
</LinearGradientBrush>
 
<LinearGradientBrush x:Key="RadialGaugeBorder" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#FBFBFB" />
    <GradientStop Offset="1" Color="#363636" />
</LinearGradientBrush>
 
<LinearGradientBrush x:Key="RadialGaugeInnerBorder" StartPoint="0,0" EndPoint="0,1">
    <GradientStop Offset="0" Color="#363636" /> 
    <GradientStop Offset="1" Color="#FBFBFB" />
</LinearGradientBrush>
 
<Style x:Key="RadialGaugeStyle" TargetType="ms:RadialGauge">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ms:AnimatedValueDisplay">
                <Grid>
                    <Ellipse Fill="{StaticResource RadialGaugeBorder}" />
                    <Ellipse Fill="{StaticResource RadialGaugeInnerBorder}" Margin="5" />
                    <Ellipse Fill="{StaticResource RadialGaugeBackground}" Margin="10" />
                    <Grid>
                        <Path Name="PART_Arc" Stroke="White" StrokeThickness="8" />
                        <ItemsControl Name="PART_LabelsHost">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <Grid />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                        <Grid Margin="20">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Path Name="PART_Needle" Data="M 0.5 0 L 1 1 L 0 1 Z" Fill="#C21218" Width="6" Stretch="Fill" />
                            <Ellipse Margin="40,-8,40,-20" Fill="{StaticResource ShineBackground}" />
                        </Grid>
                        <Ellipse Width="20" Height="20" Fill="#C21218" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

If you need any help with creating custom styles for any of the controls in Phone Elements, then let us know by leaving a comment on this blog post, or come visit the forum and we’ll help you out. You can also let us know of any features you would like to see in the gauge control and we’ll see what we can do.

Tagged as Phone Elements

5 Responses to “Phone Elements: Radial gauge control”

  • Ooh ooh, when will it be ported to WPF??? I had to pull the Syncfusion gauge from one of my apps for random crashing last year, and haven’t gotten around to writing my own yet. On the positive side, that’s 3 less assemblies I had to reference.

  • […] couple of days ago I wrote about how to use and customize the radial gauge control from Mindscape Phone Elements, our suite of controls for WP7. We have been asked if we will […]

  • This style does not maintain square (circular) constraint like the default theme does.

  • Hello Thomas

    For WP7, the square constraint of the RadialGauge is built into the MeasureOverride method of the control itself. The only way I know of losing this constraint is to set the width and height of the gauge to be different numbers.

    Note that the style shown in this blog post is just for the WP7 version of the RadialGauge. The WPF RadialGauge has a double Size property which the width and height of the root grid in the style can bind to.

    If these notes do not help, please describe how you are using the RadialGauge to lose the square constraint.

    – Jason

  • Thanks, Jason. Just wanted to mention that I ran into this problem when I pasted the style into WPF. OfficeBlack is working fine for my usage at this point.

  • Leave a Reply

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top