With the .NET MAUI radial gauge, is it possible to add a fill inside the gauge so it appears solid? Something like this:
If this or something similar is possible, how would I go about achieving this in XAML? Thank you for the assistance.
Hi Alex,
Thank you, I have converted the ticket to a public Feature Request. This will allow you and others in the community to track this feature.
A Same End-Goal Solution
In the meantime, what you can do is just draw your own circular background behind the gauge, using our drawing library .NET MAUI Path Documentation - Overview - Telerik UI for .NET MAUI.
In fact, check out how I draw a custom pie chart using just simple lines and arc segments using RadPath (don't worry that the project is Xamarin.Forms, the code is identical for .NET MAUI). However, I can imagine you're asking, "I don't need a custom shape, just a round gray circle".
The good news is we have built-in geometries that include Circle
Sizing
Keep in mind that you will probably need to tweak it, because the RadPath isn't aware of the gauge's location
Option 1 - Static Sizing
If your gauge does not change size, then you can use the approach I did... just hard-code the RadPath's WidthRequest and HeightRequest. Here's the code to get you started
<Grid x:Name="GaugeGrid"
WidthRequest="300"
HeightRequest="300">
<telerik:RadPath x:Name="MyBackground"
Fill="Gray"
StrokeThickness="0"
Geometry="{x:Static telerik:Geometries.Circle}"
Stroke="Transparent"
VerticalOptions="Center"
HorizontalOptions="Center"
WidthRequest="128"
HeightRequest="128"/>
<telerik:RadRadialGauge x:Name="gauge"
Margin="50">
<telerik:RadRadialGauge.Axis>
<telerik:GaugeLinearAxis Maximum="200"
Minimum="0"
Step="25" />
</telerik:RadRadialGauge.Axis>
<telerik:RadRadialGauge.Indicators>
<telerik:GaugeNeedleIndicator Offset="30" Value="60" />
</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>
</Grid>Option 2 - Dynamic Sizing
If your gauge is dynamically sized, then you'll want to bind the WidthRequest and HeightRequest of the circle to the RadGauge's Height and Width:
<telerik:RadPath x:Name="MyBackground"
WidthRequest="{Binding Width, Source={x:Reference MyGauge}"
HeightRequest="{Binding Height, Source={x:Reference MyGauge}"
VerticalOptions="Center"
HorizontalOptions="Center"
... />However, that will be the full size of the gauge, and not what you want. So you can add a very simple converter that automatically returns a specific percentage of the gauge's size:
<telerik:RadPath x:Name="MyBackground"
WidthRequest="{Binding Width,
Source={x:Reference MyGauge},
Converter={StaticResource ResizeConv},
ConverterParameter='0.65'}"
HeightRequest="{Binding Height,
Source={x:Reference MyGauge},
Converter={StaticResource ResizeConv},
ConverterParameter='0.65'}"
VerticalOptions="Center"
HorizontalOptions="Center"
... />
Here's the converter I wrote to do that (note: you'll want to make your real one more error-resilient):
public class ResizeConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is double dimension && parameter is string ratio)
{
var denominator = System.Convert.ToDouble(ratio);
return dimension * denominator;
}
throw new NullReferenceException("The required dimension or parameter values was not available.");
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
As you can see, the circle is just a drawn element and you can do whatever you want with it.
Regards,
Lance | Manager Technical Support
Progress Telerik
A brand new .NET MAUI course was just added to the Virtual Classroom. The training course is developed to help you get started with the Telerik UI for .NET MAUI components and features. It aims to put you in the shoes of an engineer who adds new features to an existing application. You can check it out at https://learn.telerik.com
[EDIT] Cleaned up some punctuation and added code blocks for converter explanation for better accessibility by screen readers.