Creating a Half circle WPF RadGauge

by XAML Team | Comments 2

During a recent webinar, a question was asked about whether you can create a half circle gauge.  I recently covered this in my “Introducing RadGauge for WPF” webinar, but thought it would be good to have a quick blog post as well.  Below you will see a RadialGauge which contains two RadialScales placed along the left and right of the gauge.  This is actually very easy to produce since the RadialGauge is simply a container, you can place a number of scales inside of the gauge.   

 

image

Here is the XAML for the screenshot above

 

 

 

    <Grid> 
        <telerik:RadialGauge Height="500" Width="500" > 
            <telerik:RadialScale MajorTicks="5" StartAngle="105" SweepAngle="145"
                <telerik:RadialScale.Indicators> 
                    <telerik:Needle Value="50" /> 
                    <telerik:RadialBar Background="DarkCyan" Value="75" /> 
                </telerik:RadialScale.Indicators> 
            </telerik:RadialScale> 
            <telerik:RadialScale MajorTicks="5" StartAngle="-70" SweepAngle="145"
                <telerik:RadialScale.Indicators> 
                    <telerik:Needle Value="25" /> 
                    <telerik:RadialBar Background="IndianRed" Opacity="0.6" StartWidth="0.02" Value="100" /> 
                    <telerik:RadialBar Background="Yellow" Opacity="0.6" StartWidth="0.02" Value="60" /> 
                    <telerik:RadialBar Background="LawnGreen" Opacity="0.6" StartWidth="0.02" Value="40" /> 
                </telerik:RadialScale.Indicators> 
            </telerik:RadialScale> 
        </telerik:RadialGauge> 
    </Grid> 
  

The StartAngle and SweepAngle properties are what is used define how the scale will be displayed.  The example is still using a full circle though and the question was how to create a half circle gauge.  In short, the answer is to remove the gauge from the XAML.  The RadialGauge itself is just a container and you can display a RadialScale without using a RadialGauge.  You will not have the theme support as shown below, but you can create your own backgrounds to make the scale match your application theme. 

image

Here is the XAML for the screenshot above

    <Grid> 
    <telerik:RadialGauge HorizontalAlignment="Left" Margin="10,8,0,0" Width="300" Height="300" VerticalAlignment="Top" d:LayoutOverrides="Height" > 
          <telerik:RadialScale StartAngle="180" SweepAngle="180"
              <telerik:RadialScale.Indicators> 
                   <telerik:Needle /> 
              </telerik:RadialScale.Indicators> 
          </telerik:RadialScale> 
    </telerik:RadialGauge> 
    <telerik:RadialGauge HorizontalAlignment="Right" Margin="0,8,8,0" Width="300" Height="300" VerticalAlignment="Top" d:LayoutOverrides="Height"
          <telerik:StyleManager.Theme> 
              <telerik:VistaTheme /> 
          </telerik:StyleManager.Theme> 
          <telerik:RadialScale MajorTicks="4" StartAngle="180" SweepAngle="-180"
              <telerik:RadialScale.Indicators> 
                   <telerik:Needle Value="25" /> 
              </telerik:RadialScale.Indicators> 
          </telerik:RadialScale> 
    </telerik:RadialGauge> 
  
 
          <telerik:RadialScale StartAngle="180" SweepAngle="180" HorizontalAlignment="Left" Margin="10,323,0,33" Width="300" Height="300"
              <telerik:RadialScale.Indicators> 
                   <telerik:Needle /> 
              </telerik:RadialScale.Indicators> 
          </telerik:RadialScale> 
  
 
          <telerik:RadialScale MajorTicks="4" StartAngle="180" SweepAngle="-180" HorizontalAlignment="Right" Margin="0,323,8,33" Width="300" Height="300"
              <telerik:RadialScale.Indicators> 
                   <telerik:Needle Value="25" /> 
              </telerik:RadialScale.Indicators> 
          </telerik:RadialScale> 
  
 
    </Grid> 
 
  

 

Above, you will notice that except for the background of the set on top, the RadialScales are displayed in the window as expected.  Looking at the XAML, you should see that I removed the <telerik:RadialGauge> tags and applied the positions property values to the Scale instead.  So if you are looking to implement a half circle RadGauge in your application, this should get your started down the right path.

2 Comments

Serrin
Hey John,

Great post!  I'm definitely seeing some of the possibilities in the radial gauge and looking for excuses to use them in some of my projects. :)

One question though, is it possible to use a similar method with the Linear Gauge?  I ran into this yesterday after reading your blog and doing a little experimentation, but the best I could come up with was...

Grid
- Border for around LinearScales, covers all rows and columns of ^ grid
-- Linear Scale 1
-- Linear Scale 2
-- Linear Scale ..n
/Grid

The problem is... I love the styling of Linear Gauge background and can't quite use it in the above scenario (and for my project, using multiple LinearGauges next to one another won't fit in the space I am alloted).  Is there any way to fit multiple linear scales into a single linear gauge?

Thanks!
Serrin
John Kellar
Serrin,
     So the best way, I think, for you to continue using the theme with multiple Linear Scales would be to change the theme.  If you can remove the internal border it would eliminate the visual collision you are experiencing.  You can do this through the use of a style applied to the gauge.  I don't think there is enough space here to provide an example, but if you have Expression Blend you can do it pretty easily.  Since this may be of interest to others, I plan to put together a blog post on how to accomplish this task for you.  Look for it by the end of the week.

John

Comments

  1.    
      
      
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)
Read more articles by XAML Team - or - read latest articles in Developer Tools