RadRadialGauge not taking full width

[Konstantin]

Hello,

I am now trying out Telerik's controls for my company's needs and I am running into an issue where the RadRadialGauge is not taking up the whole available horizontal space. What we need is only the top half of the gauge, which I am managing by setting the SweepAngle and StartAngle, but the gauge is showing to be way too small. I have checked via the Android Layout Inspector that the Canvas itself is taking up the whole available space. My guess is that because the Gauge is put on the first row of a Grid, it is behaving like it should be a full Gauge rather than a half Gauge and that is why it is taking up less space. I am attaching some code that is similar to what we have now:

<Grid Padding="20"
          BackgroundColor="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
        <Grid HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand"
              Grid.Row="0"
              IsVisible="{Binding IsGaugeVisible}">
            <telerikGauges:RadRadialGauge x:Name="gauge"
                                          SweepAngle="180"
                                          StartAngle="180"
                                          Margin="0">
                <telerikGauges:RadRadialGauge.Axis>
                    <telerikGauges:GaugeLinearAxis Maximum="100"
                                                   Minimum="0"
                                                   Step="33"
                                                   StrokeThickness="0"
                                                   ShowLabels="False" />
                </telerikGauges:RadRadialGauge.Axis>
                <telerikGauges:RadRadialGauge.Indicators>
                    <telerikGauges:GaugeShapeIndicator Value="{Binding CurrentPercent}"
                                                       Fill="White"
                                                       Offset="35"
                                                       Position="Start" />
                </telerikGauges:RadRadialGauge.Indicators>
                <telerikGauges:RadRadialGauge.Ranges>
                    <telerikGauges:GaugeRangesDefinition StartThickness="40" EndThickness="40">
                        <telerikGauges:GaugeRange Color="{Static helpers:Constants.Squash}"
                                                  From="0"
                                                  To="{Binding FirstLimit}" />
                        <telerikGauges:GaugeRange Color="{Static helpers:Constants.BlueyGreen}"
                                                  From="{Binding FirstLimit}"
                                                  To="{Binding SecondLimit}" />
                        <telerikGauges:GaugeRange Color="{Static helpers:Constants.PaleRed}"
                                                  From="{Binding SecondLimit}"
                                                  To="100" />
                    </telerikGauges:GaugeRangesDefinition>
                </telerikGauges:RadRadialGauge.Ranges>
            </telerikGauges:RadRadialGauge>
            <StackLayout Orientation="Vertical"
                         VerticalOptions="Center"
                         HorizontalOptions="Center"
                         Spacing="0"
                         Margin="0, 0, 0, 20">
                <Label Text="{Binding CurrentPercent, StringFormat='{}{0}%'}"
                       VerticalTextAlignment="Center"
                       HorizontalTextAlignment="Center"
                       FontSize="Large"
                       Margin="0" />
                <Label HorizontalTextAlignment="Center"
                       VerticalTextAlignment="Center"
                       FontSize="Medium"
                       Text="{Binding CurrentStatus}"
                       Margin="0, 0, 0, 0" />
            </StackLayout>
        </Grid>
        <TableView Intent="Form"
                   Grid.Row="1">
            <TableRoot>
                <TableSection>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal"
                                     HorizontalOptions="FillAndExpand">
                            <Image Source="name"
                                                        VerticalOptions="Center"
                                                        HorizontalOptions="Start"
                                                        WidthRequest="25"
                                                        BackgroundColor="LawnGreen" />
                        </StackLayout>
                    </ViewCell>
                </TableSection>
            </TableRoot>
        </TableView>
</Grid>

Again, out goal is for the half Gauge we have to occupy the full space that is available. The version of the controls I am using is the latest Trial version. So far I can see that if I set the Grid that contains the Gauge to have a RowSpan of 2, the Gauge appears at the center of the screen and occupies most of the width available. My problem with that approach is that I need it at the start of the screen, and setting VerticalOptions to StartAndExpand does not really help - the Gauge appears small again. I hope you will be able to help me with this as we are seriously considering buying the Xamarin UI pack if it proves possible to do what we want.

Best regards,

Konstantin

 

 

[Konstantin]

Sorry for the weird formatting at the end of the post - I could not figure out how to go back to normal formatting after adding the code snippet.

[Lance | Manager Technical Support]

Hi Konstantin,

The reason for this is that even though the Gauge is rendering with a 180 degree sweep angle, the drawing canvas is still the same (set a background color to see the canvas more easily). This is the expected behavior of the current version of the control.


You can get what you're looking for by clipping the bounds (i.e. with negative margins) so that just the sweep is visible. For example, this Margin (tweak the values to get the exact result you want):

<telerikGauges:RadRadialGauge
    x:Name="gauge"
    SweepAngle="180"
    StartAngle="180"
    Margin="-100,-50,-100,-50">

will get you this result at runtime (almost a 100% increase in visible gauge size with reduction in height):



I hope this help get you closer to your goals.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Konstantin]

Hi Lance,

I managed to achieve what I needed by using the TranslationY property and fiddling around with the AxisRadiusFactor, but maybe your approach would be good as well - I will check which one is better for my case. Thanks for the help!

Best regards,
Konstantin