Size of main gauge and annotations

Question

I am displaying a large dial and two smaller dials (for a stopwatch) similar to the example given for the annotations. The problem I have is re-sizing the gauge for different screens. The Xamarin layout engine does its job in limiting the main gauge size to fit the available space, regardless of if the width and height request are larger than that available space. Hence it will fit on a big screen or a smaller one. However, if I set the size of the smaller inner dials to, say, a third of the larger one, then they do not change their size as the big one does.

For example, width request for the big dial is 400 which exceeds the allotted space on any platform, and is reduced down to about 300 on a larger device and 260 on a smaller device. The inner dials are set at 100, which is rendered the same, at a full 100 dps on both devices. The result is that the inner dials are too big on the smaller device and overlap the numbers etc.

So, is there any way of defining the size of the annotations as a proportion of the main dial or the view window, etc?

Stuart Parkinson · Answer

In the end I created an AbsoluteLayout and placed three separate SfCircularGauge controls in it, instead of one control with two sub-controls as annotations. This allowed me to set the proportional size and positions in xaml and change the size of the overall AbsoluteLayout from code-behind as necessary. ... this main scale fills the whole space allocated to the AbsoluteLayout ... this small scale is 0.33 the diameter of the big and offset to the right ... this small scale is 0.33 the diameter of the big and offset to the left A re-size of the containing AbsoluteLayout from code-behind (set according to width/height of the screen) results in the smaller dials resizing too.If there is a way to do this using the annotations it would be good to know. If not it might be worth considering this a feature request ;-)

Sri Gayathri Gopalakrishnan · Answer

Hi Stuart,  
 
We have analyzed your query and modified the Annotations sample based on your query. In existing sample, we have hard coded the value 80 for annotation view’s Height and Width. So, inner gauge render with same control size. Annotation element render based on its available size not in main gauge size.  
Now, we have set the Height and Width for gauge size based on the parent gauge. Based on device, Annotation Views will adjust accordingly. Please download the sample from the below link, 
 
http://www.syncfusion.com/downloads/support/forum/136103/ze/Annotation1899793163  
 
Screenshot: 
   
  
  
Regards, 
Sri Gayathri. G

Stuart Parkinson · Answer

Hi Sri Gayathri,Thanks for your reply. I was a little confused at first looking at the xaml which defined only the main gauge until I realised that the annotations had been defined entirely in code in the code-behind with their size set as a proportion of the main dial size. That works and is similar to what I came up with above.Your solution created the small dials as annotations, where mine involved creating the three dials as separate 'top-level' controls. I'm trying to weigh up the pros and cons of each approach.1. Performance - Is there any performance advantage either way? - ie. is is preferable to create a smaller dial as an annotation or as a separate dial in its own right?2. Consistency - I generally like to define the layout in xaml as much as possible and perform (minimal) adjustments in code-behind as needed. I originally tried defining the annotations in xaml and resizing in code, but I could not access the annotations by name from the code. (-1 for the annotations) I'm guessing that's why you defined the annotations in code and not in xaml? Is there any way to define the annotations in xaml and still access them from code?3. Layout - I can see that defining the small dials as annotations allows me to position them as offset and angle, whereas defining them as separate controls means I have to calculate their positions myself or use other layouts such as the AbsoluteLayout to handle their positions (+1 for the annotations).Cheers, Stu.

Sri Gayathri Gopalakrishnan · Answer

Hi Stuart, Query1: Performance Performance will not be affected, if you add circular gauges either in annotation as view or separately in layouts. Query2: Is there any way to define the annotations in xaml and still access them from codeYes, we can define annotation in xaml and access it from code by name. Once rebuild the application, you can access the name as intelligence in code behind. As we cannot dynamically change the annotation size, we have created the annotation in SizeChanged event and set their size as a proportion of main gauge size. Query3: LayoutIf you need to avoid our own logic for arranging gauge position, you can use annotation support with defining in code behind. Otherwise use as separate controls in different layouts. Regards,Sri Gayathri. G

Stuart Parkinson · Answer

Thanks - good to know. Great controls, and I must say, great support :)

Sri Gayathri Gopalakrishnan · Answer

Hi Stuart,Thanks for your response and please get back to us if you need any other assistance.Regards,Sri Gayathri. G