Gauge Height

5 posts, 0 answers
  1. Leonard
    Leonard avatar
    6 posts
    Member since:
    May 2017

    Posted 22 May Link to this post

    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.
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    996 posts

    Posted 23 May Link to this post

    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
  3. Leonard
    Leonard avatar
    6 posts
    Member since:
    May 2017

    Posted 24 May in reply to Petar Marchev Link to this post

    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

  4. Petar Marchev
    Admin
    Petar Marchev avatar
    996 posts

    Posted 25 May Link to this post

    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
  5. Leonard
    Leonard avatar
    6 posts
    Member since:
    May 2017

    Posted 25 May in reply to Petar Marchev Link to this post

    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 :)

Back to Top