Gauges for Xamarin.Forms are some of our most popular components. They are improved every release with new features based on customer requests. For the 2018 Volume 1 release we have enhanced the linear gauge to be a highly customizable control. This blog post will showcase several of the new features in the linear and circular gauges.
Linear gauge
Auto interval
Automatic interval support has been provided to maintain the scale’s interval based on the linear gauge’s size. If you don’t want to maintain the fixed interval in all sizes and ranges, don’t specify the interval. The interval will be calculated automatically based on the available size.
Linear gauges with auto intervals
Corner radius
The linear gauge component will soon let you apply a rounded border for the scale, range bar, and range pointer at the start, end, or both sides. This feature will provide a rich styling experience for data visualization in the control. To enable this support, just specify the corner radius as shown in the following code.
Linear gauges with rounded edges
Opposite scale position
The linear gauge will also support changing the default scale position to the opposite side of the gauge. In some cases, we may need to place scale elements such as ticks, labels, and marker pointers on the opposite side of the gauge. In previous versions, we had to specify offset values for each scale element to achieve this behavior. Now, the linear gauge provides an easy way to achieve this by enabling the OppositePosition property as shown in the following code.
Linear gauges with normal and opposite scale positions
Annotations
Most developers expect to mark specific areas in a gauge with text, an image, or view elements as needed. To achieve this feature easily, we have provided annotation support in the linear gauge. By using this support, you can place any text or image over the gauge control with respect to its offset or scale value position.
Linear gauge with image and text annotations
Gradient colors
Additional customization options have been added to the linear gauge to allow color variations for the scale bar, pointer, and range bar. The colors, which have been provided as gradients, vary continuously based on value to produce smooth color transitions. They will provide a rich style experience for visualizing data.
Linear gauges with color gradients
Different marker shapes
In the previous version, the linear gauge supported only a triangle shape as a symbol pointer. We have extended this support to include the following shapes:
- Inverted triangle
- Diamond
- Square
- Circle
- Image
Linear gauges with new marker shapes
Circular gauge
Gradient colors for ranges
Previously, we could only add solid colors to visualize the range progress in a circular gauge. Now, we have provided additional customization options for a gauge’s range to visualize the range progress with gradient colors. The colors, which have provided as gradients, vary continuously based on range value to produce smooth color transitions.
All that is needed for this feature is multiple gradient stops by setting colors and values in the range as shown in the following code.
Circular gauges with color gradient ranges
We hope you will enjoy these new features that make the gauges beautiful and more mature. The 2018 Volume 1 release will be rolled out by the middle of February. Try out these new features when they’re released, and post your feedback in the comments below. We are happy to offer any help we can.
