I want to customize the gauge like in the example.
1. Is it possible to draw an area in the center of the gauge and display text?
2. Is it possible to display text at the bottom of the gauge?
3.What is the recommended way to achieve this?
1 Answer, 1 is accepted
Hi Yoshirou,
Thank you for your interest in Telerik Gauge control for .NET MAUI. I have reviewed the provided image and questions and let me share more details on them:
1) Is it possible to draw an area in the center of the gauge and display text?
Yes, you can achieve this by positioning a label on the top of the layout in which the Gauge control is defined.
2) Is it possible to display text at the bottom of the gauge?
Same answer. You can position a label in the same layout the gauge control is defined.
3) Implementation
Here is a sample implementation.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:local="clr-namespace:MauiApp3"
x:Class="MauiApp3.MainPage">
<Grid RowDefinitions="500">
<telerik:RadRadialGauge x:Name="gauge" AutomationId="gauge">
<telerik:RadRadialGauge.Axis>
<telerik:GaugeLinearAxis Maximum="200"
Minimum="0"
Step="25" />
</telerik:RadRadialGauge.Axis>
<telerik:RadRadialGauge.Indicators>
<telerik:GaugeNeedleIndicator Offset="30" Value="60" />
<telerik:GaugeShapeIndicator Value="80" />
</telerik:RadRadialGauge.Indicators>
<telerik:RadRadialGauge.Ranges>
<telerik:GaugeRangesDefinition>
<telerik:GaugeRange Color="Green"
From="0"
To="150" />
<telerik:GaugeGradientRange From="150" To="200">
<telerik:RadGradientStop Offset="150" Color="Yellow" />
<telerik:RadGradientStop Offset="200" Color="Red" />
</telerik:GaugeGradientRange>
</telerik:GaugeRangesDefinition>
</telerik:RadRadialGauge.Ranges>
</telerik:RadRadialGauge>
<telerik:RadBorder BackgroundColor="Gray"
WidthRequest="100"
HeightRequest="100"
CornerRadius="50">
<Label Text="foo" TextColor="Pink" FontSize="20"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
</telerik:RadBorder>
<Label Text="bar"
TextColor="Pink"
FontSize="20"
Margin="0,170,0,0"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
</Grid>
</ContentPage>The result is attached as image. You can calculate the width/height of the control also the desired margin of the additional labels based on your exact scenario.
Additional resources - Here are some links that could be of help:
Gauge Documentation: https://docs.telerik.com/devtools/maui/controls/gauge/overview
Examples with Gauge control:
in the Controls samples app: https://github.com/telerik/maui-samples/tree/main/Samples/ControlsSamples/Examples/GaugeControl/FirstLookExample
In the SDK Browser app: https://github.com/telerik/maui-samples/tree/main/Samples/SdkBrowser/Examples/GaugeControl
I hope the provided information will be of help. Let me know if you have any additional questions.
Regards,
Didi
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi Didi
Thank you for answering.Thanks to your advice my first request came true.
However, it doesn't seem to support scaling the control up or down.
I would like the size and positional ratio of added objects to automatically follow changes in gauge size.
Do you have any good ideas?
Hi Yoshirou,
Thank you for the update and image.
The behavior happens as the control is placed inside grid with star sized column and static row, so for height we have 500 and for width star sized, based on the window width.
Responsive layout:
In order to implement a responsive label/border you need to calculate the width and height runtime based on the gauge/page width/height. This can happen inside the OnSizeAllocated method. Override the Page's method and implement the logic there based on the values for width and height. I have attached a sample implementation. Review the xaml and cs files from the zip file. Also a video of the behavior is attached. Note that you need to extend the calculation logic to match the exact scenario you are looking for.
Here are some links that could be of help:
https://learn.microsoft.com/en-us/answers/questions/1181807/responsive-maui-desktop-app
https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/?view=net-maui-8.0
Static width and height:
If you want to remove the responsive layout, you can set static width and height to the grid layout where the Gauge is defined. So when resizing the window the gauge and foo and bar will be on the same position.
Hope these guidance will be of help.