This is a migrated thread and some comments may be shown as answers.

Gauge Height

4 Answers 114 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Leonard
Top achievements
Rank 1
Leonard asked on 22 May 2017, 10:52 PM
Hi is it possible to set the height of the gauge? And which property should i set? Height request does not seem to change the height.

4 Answers, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 23 May 2017, 07:43 AM
Hello Leonard,

You can try with another element, instead of the Gauge, for example a BoxView with the same setup, and see if it occupies the space you want it to. This way you will find out whether this is a Gauge-specific issue or if it is a Xamarin-Forms-layout related peculiarity. The XF framework could disrespect the WidthRequest in some cases. For example if the element is in a Grid - the default values of the element's HorizontalOptions and VerticalOptions are Stretch, so in this case the layout system will not take into consideration the width request, instead it will always try to stretch the element within the Grid. This being said, you can try setting the horizontal/vertical options. If you need further assistance with this, you can attach the XAML code so we can take a look into this.

Regards,
Petar Marchev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Leonard
Top achievements
Rank 1
answered on 24 May 2017, 10:45 PM

Thanks for the response Petar I have attached some xaml attempting to set the gauge height as you described but still not working.

I'm trying to control the gauge height with the grid.

 

<Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            
          
               <gauges:RadHorizontalGauge Grid.Row="0" Grid.Column="0" HeightRequest="80" VerticalOptions="FillAndExpand">
              <gauges:RadGaugeBase.Axis>
                <gauges:GaugeLinearAxis Minimum="0"
                                               Maximum="120"
                                               Step="120"
                                               ShowLabels="False"
                                               StrokeThickness="0" />
              </gauges:RadGaugeBase.Axis>
              <gauges:RadGaugeBase.Indicators>
                <gauges:GaugeBarIndicator Value="120"
                                                 Fill="Green"
                                                 Offset="0"
                                                 StartCap="Oval"
                                                 EndCap="Oval"
                                                 />
                <gauges:GaugeBarIndicator Value="80"
                                                 Offset="0"
                                                 StartCap="Oval"
                                                 EndCap="Oval"
                                                 IsOffsetRelative="True">
                  <gauges:GaugeBarIndicator.GradientStops>
                    <common:RadGradientStop Color="Black" Offset="0" />
                    <common:RadGradientStop Color="Black" Offset="1" />
                  </gauges:GaugeBarIndicator.GradientStops>
                </gauges:GaugeBarIndicator>
              </gauges:RadGaugeBase.Indicators>
            </gauges:RadHorizontalGauge>
          </Grid>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
            
          
                <gauges:RadHorizontalGauge Grid.Row="0" Grid.Column="0">
                    <gauges:RadGaugeBase.Axis>
                        <gauges:GaugeLinearAxis Minimum="0"
                                                Maximum="120"
                                                Step="120"
                                                ShowLabels="False"
                                                StrokeThickness="0" />
                    </gauges:RadGaugeBase.Axis>
                    <gauges:RadGaugeBase.Indicators>
                        <gauges:GaugeBarIndicator Value="120"
                                                  Fill="Yellow"
                                                  Offset="0"
                                                  StartCap="Oval"
                                                  EndCap="Oval"
                        />
                        <gauges:GaugeBarIndicator Value="80"
                                                  Offset="0"
                                                  StartCap="Oval"
                                                  EndCap="Oval"
                                                  IsOffsetRelative="True">
                            <gauges:GaugeBarIndicator.GradientStops>
                                <common:RadGradientStop Color="Black" Offset="0" />
                                <common:RadGradientStop Color="Black" Offset="1" />
                            </gauges:GaugeBarIndicator.GradientStops>
                        </gauges:GaugeBarIndicator>
                    </gauges:RadGaugeBase.Indicators>
                </gauges:RadHorizontalGauge>
            </Grid>
            
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="80" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <BoxView  BackgroundColor="Red" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
            </Grid>

            <BoxView HeightRequest="40" BackgroundColor="Green" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>

Leonard

0
Petar Marchev
Telerik team
answered on 25 May 2017, 07:51 AM
Hello Leonard,

Thank you for the attached code. I was able to run it right away and test easily.

It did not occur to me that you could be using the horizontal gauge, I assumed it was the Radial gauge at hand. The reason I assumed this, is that the radial gauge is little more needy when it comes to sizes, because it presently does not have a very refined logic for measuring and 'asking' for the right size.

I am attaching the results I get on my machine when I run the code, with one little adjustment - I put a BackgroundColor="Blue" for the two gauges so that you can see the space they occupy. I think that this is exactly what you were looking for. The gauge occupies the height you have in mind, but the indicator does not stretch. This is purely because the gauge elements do not stretch, but all of them (except for the needle in the radial gauge) have a defined size. The bar indicator has two properties that define its size - StartThickness and EndThickness. If you need the indicator to be larger, these are the properties you need to set.

It was an architectural decision that the gauge elements should be arranged with absolute units. This allows you to overlay indicators, and/or stack them, and/or choose arbitrary spacing between them. We think that this is more flexible as you have full pixel control.

I hope I was able to explain well that the gauge occupies the space you have chosen for it, but the indicator is smaller than this space. If you need further assistance I will ask that you provide us with more information on the output you are after, it will be very helpful if you send a drawing of some sort of how you need things to look.

Regards,
Petar Marchev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Leonard
Top achievements
Rank 1
answered on 25 May 2017, 09:46 PM

Properties  StartThickness and EndThickness solved the issue but I I think what you have also suggested will be helpful to me to.

 Thanks doing what it should be now :)

Tags
Gauges
Asked by
Leonard
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
Leonard
Top achievements
Rank 1
Share this question
or