Forums Ultimate UI for Xamarin
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Narendra Meena
15
XamRadialGauge Remove white space
posted

We are using XamlRadialGuage that has extra white space at bottom. How can we reduce this white speace in bottom. the code is  <ig:XamRadialGauge HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" HeightRequest="160"
MinimumValue="0" x:Name="RadialGauge"
MaximumValue="200"
Value="{Binding CommissionSummaryData[0].EarningsAttainment}"
BackingShape="Fitted"
BackingBrush="Transparent"
BackingCornerRadius="10"
Axis.X.Extent = "10"
Axis.Y.Extent = "10"
ScaleBrush = "#EEEEEE"
TickStrokeThickness="0" MinorTickStrokeThickness="0"
BackingStrokeThickness="0" LabelExtent="0.9"
LabelInterval="100" FormatLabel="FormatRadialGaugeLabelHandler"
ScaleStartAngle="200" ScaleEndAngle="340"
NeedleShape = "Needle" NeedleStartExtent="0" NeedleEndExtent="0.8"
NeedleBrush="#CBC7C7" NeedleOutline="#FFFFFF" NeedlePivotBrush="#CBC7C7" NeedlePivotOutline="#CBC7C7" >
<ig:XamRadialGauge.Ranges>
<ig:RadialGaugeRange
Brush="#D74324"
StartValue="0"
EndValue="100"
OuterStartExtent="0.8" OuterEndExtent="0.8"
InnerStartExtent="0.3" InnerEndExtent="0.3"/>
<ig:RadialGaugeRange
Brush="#42AEAF"
StartValue="100"
EndValue="200"
OuterStartExtent="0.8" OuterEndExtent="0.75"
InnerStartExtent="0.3" InnerEndExtent="0.3"/>
</ig:XamRadialGauge.Ranges>
</ig:XamRadialGauge>  

  • 34430
    Offline posted

    Hello Narendra,

    By default, the XamRadialGauge in Xamarin.Forms will evaluate its size as if it will be a full circle, and so the extra space that you are seeing at the bottom of your gauge is actually expected in this case. In order to work around this, I would recommend utilizing the Scale property inherited from VisualElement in Xamarin.Forms to scale up your XamRadialGauge such that it appears "X" times its normal size.

    You can then modify the CenterX and CenterY properties of your XamRadialGauge to reposition the center of the gauge using a value between 0 and 1 (by default this is 0.5, 0.5). Since you have constrained the height of your XamRadialGauge to 160 in this case, this should allow you to essentially remove the white space at the bottom of the gauge.

    I have attached a sample project to demonstrate the above. I hope this helps you.

    Please let me know if you have any other questions or concerns on this matter.

    RadialGaugeSpace.zip