RadRadialGauge as a half gauge by ignoring the space below

[Sudha]

Hi, 

When tried creating a gauge, it takes half the space and rest of the space is empty since it starts from 180 and sweeps 180. I would like not to have the empty space. How can I achieve it?

C# Code:-

var circularGauge = new RadRadialGauge
                {
                    
                    Indicators ={
                        new GaugeNeedleIndicator {
                            Value = selectedMyAnalyticsSummary.MDM,
                            Fill = Color.FromHex("#666"),
                            Position = GaugeElementPosition.Start
                        }
                    },
                    Axis = new GaugeLinearAxis
                    {
                        Minimum = 0,
                        Maximum = 100,
                        Step = 100,
                        StrokeThickness = 0,
                        TickThickness = 0,
                        TextColor = Color.Gray,
                        LabelPosition = GaugeElementPosition.Start,
                        TickPosition = GaugeElementPosition.Start,
                        LabelOffset = 25,
                        FontSize = Device.GetNamedSize(NamedSize.Small,typeof(Label))
                    },
                    AnimationSettings = {
                        Easing = Easing.CubicOut
                    },
                    StartAngle = 180,
                    SweepAngle = 180
                };

                circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 0, To = 20, Color = CommonStrings.GetRatingColor("1") });
                circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 20, To = 40, Color = CommonStrings.GetRatingColor("2") });
                circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 40, To = 60, Color = CommonStrings.GetRatingColor("3") });
                circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 60, To = 80, Color = CommonStrings.GetRatingColor("4") });
                circularGauge.Ranges.Ranges.Add(new GaugeRange { From = 80, To = 100, Color = CommonStrings.GetRatingColor("5") });

 

Thanks

[Petar Marchev]

Hi Sudha,

You seem to need a control that we do not yet have - a semi-circle gauge. Currently our radial gauge is always measured and arranged as a full-circle gauge, and this is why the bottom part of it appears empty. Our radial gauge lacks functionality that will allow it to occupy the space as per your requirements. Perhaps you can try to create a custom control that contains a gauge in it and lays out the gauge with twice the height. Similar to this:

public class UpperHalfControl : ContentView
{
 protected override void LayoutChildren(double x, double y, double width, double height)
 {
  if (this.Content != null)
  {
   this.Content.Layout(new Rectangle(x, y, width, 2 * height));
  }
  else
  {
   base.LayoutChildren(x, y, width, height);
  }
 }
}

I tested this in a grid with 2 rows and 2 columns:

<Grid>
 <Grid.RowDefinitions>
  <RowDefinition />
  <RowDefinition />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
  <ColumnDefinition />
  <ColumnDefinition />
 </Grid.ColumnDefinitions>
 <Grid Grid.Row="1" BackgroundColor="Green" />
 <Grid Grid.Column="1" BackgroundColor="Blue" />
 <Grid Grid.Row="1" Grid.Column="1" BackgroundColor="Yellow" />
 <local:UpperHalfControl>
  <telerikGauges:RadRadialGauge StartAngle="180" SweepAngle="180" />
 </local:UpperHalfControl>
</Grid>

I am attaching an image of the output I get. I hope this is helpful.

I created a feedback item in our portal where you can vote and track its status. I also updated your Telerik points as a thank you for this suggestion.

Regards,
Petar Marchev
Telerik by Progress