Telerik blogs

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.


Comments

Comments are disabled in preview mode.