Telerik blogs

I received an email from an old buddy on the Windows team at Microsoft, who is using Telerik RadControls for Windows 8 to build an application. He asked  how to create a RadRadialGauge with 0 at the center, and negative numbers to theLevel left and positive numbers to the right (click on illustration for full size) for his Level Meter (part of a Synthesizer control).

None of the examples show how to do this, but it really only takes setting four properties to get just the effect he was looking for:

  • MinValue
  • MaxValue
  • MinAngle
  • MaxAngle

 

To demonstrate this I created a small demo program based on the RadGauge QSF available for download from the Windows Store and installed as part of the Windows 8 RadTools installation.

The setup is straight forward, a Grid with two rows. In the top row I put the title,

<Grid Height="600" Width="800">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Text="Input Level"
               FontSize="12"
               HorizontalAlignment="Center"></TextBlock>

Before adding the RadRadialGauge, we need to add a namespace to the top of MainPage.xaml,

xmlns:telerikDataViz="using:Telerik.UI.Xaml.Controls.DataVisualization"

In the bottom row I start with the RadRadialGauge itself

<telerikDataViz:RadRadialGauge MinValue="-100"
                               MaxValue="100"
                               MinAngle="0"
                               MaxAngle="180"
                               LabelStep="50"
                               Margin="0 30 0 0"
                               TickStep="20"
                               Grid.Row="1"
                               TickRadiusScale="0.95"
                               HorizontalAlignment="Stretch"
                               VerticalAlignment="Stretch"
                               LabelRadiusScale="1">

 

Our actual indicator is set next, bound to the level itself,

<telerikDataViz:RadialBarGaugeIndicator IsAnimated="True"
                                        Value="{Binding Level}"
                                        Brush="White"
                                        Thickness="12"
                                        telerikDataViz:RadRadialGauge.IndicatorRadiusScale="0.83" />

Finally, I set the MarkerGaugeIndicator (the *)

<telerikDataViz:MarkerGaugeIndicator Value="100"
                                     Content="*"
                                     FontFamily="Segoe UI"
                                     FontSize="17"
                                     Foreground="#787878"
                                     telerikDataViz:RadRadialGauge.IndicatorRadiusScale="0.83" />

That concludes the RadRadialGauge.

I end with a simple text block that displays the actual Level, centered in the gauge and providing the precision necessary to make the gauge maximally useful,

<TextBlock Text="{Binding Level}"
           FontSize="15"
           Grid.Row="1"
           VerticalAlignment="Center"
           HorizontalAlignment="Center"></TextBlock>

The RadRadialGauge is very flexible and you can certainly add more to it, but this demonstrates the ability to change the orientation; setting zero to the top and having negative values to the left and positive to the right, giving my buddy just what he needed for his app.

Download source code


Win8_Download (2)


jesseLiberty
About the Author

Jesse Liberty

 has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter

Comments

Comments are disabled in preview mode.