DevExpress Radial Progress Bar for .NET MAUI
- 3 minutes to read
The RadialProgressBar control is a gauge that allows you to visualize statistics, loading states, or the progress of an operation.
#Radial Progress Bar Elements (Anatomy)
The following figure shows basic elements of a radial progress bar:
#Add a Radial Progress Bar to a Project
Follow the steps below to add a RadialProgressBar
to an app:
- Install the DevExpress.Maui.Gauges NuGet package. Refer to the following topic for more information: Get Started. Note that
DevExpress.Maui.Gauges
automatically references theSkiaSharp.Views.Maui.Controls
library that is used to render gauges. - Declare the
xmlns:dx="http://schemas.devexpress.com/maui"
XAML namespace in the ContentPage. - Add
<dx:RadialProgressBar>
…</dx:RadialProgressBar>
tags to the page.
<ContentPage ...
xmlns:dx="http://schemas.devexpress.com/maui">
<dx:RadialProgressBar Value="0.3"
StartAngle="-180"
SweepAngle="360"/>
</ContentPage>
#Specify Value Boundaries
You can set the progress bar Value property to a number between default boundaries of 0 and 1. You can specify StartValue and EndValue to define custom value boundaries.
<dx:RadialProgressBar Value="30"
StartValue="0"
EndValue="100"/>
#Define Indeterminate State
Set a progress bar’s IsIndeterminate property to true
to switch the progress bar to indeterminate state. In this state, RadialProgressBar
moves its value indicator along the ring or arc to indicate that some operation is in progress. Note that different animation effects apply to the value indicator for a circle scale and arc scale.
<dx:RadialProgressBar ...
IsIndeterminate="{Binding Source={x:Reference switch}, Path=IsToggled, Mode=TwoWay}">
#Specify Scale Layout
The position of a scale depends on the following properties:
- StartAngle
The clockwise rotation angle that defines the scale start position, in degrees. The following image shows a radial progress bar with different starting angles (the sweep angle is 240 degrees).
- SweepAngle
Specifies the sweep angle of a scale, clockwise in degrees. The following image shows a radial progress bar with different sweep angles (the start angle is 0):
The following figure shows how StartAngle
and SweepAngle
affect the scale:
<dx:RadialProgressBar ...
StartAngle="0" SweepAngle="360"/>
<dx:RadialProgressBar ...
StartAngle="-180" SweepAngle="180"/>
#Configure Animation
You can apply different animation effects to the value indicator when the Value
property changes. Enable a progress bar’s AllowAnimation property. You can use the AnimationDuration property to set the animation progress time.
Specify the AnimationEasing property to define how the value indicator animation speeds up or slows down. The following easing functions are available:
- BackEasingFunction
- BounceEasingFunction
- CircleEasingFunction
- CubicEasingFunction
- ElasticEasingFunction
- ExponentialEasingFunction
- LinearEasingFunction
- PowerEasingFunction
- QuadraticEasingFunction
- QuarticEasingFunction
- QuinticEasingFunction
- SineEasingFunction
The following example applies animation effects to a radial progress bar:
<dx:RadialProgressBar ...
AllowAnimation="True"
AnimationDuration="0:0:2">
<dx:RadialProgressBar.AnimationEasing>
<dx:ExponentialEasingFunction EasingMode="In" Exponent="2"/>
</dx:RadialProgressBar.AnimationEasing>
</dx:RadialProgressBar>
#Add Center Content
Specify a progress bar’s Content property to add any content to the center of the progress bar. The ContentTemplate property allows you to define how the content looks. ContentTemplate
uses the object you put to Content
as its binding context.
<dx:RadialProgressBar ...
SweepAngle="360" StartAngle="-180"
Value="{Binding ChargeInfo.Value}"
StartValue="0" EndValue="100"
Content="{Binding ChargeInfo}">
<dx:RadialProgressBar.BindingContext>
<local:MainViewModel/>
</dx:RadialProgressBar.BindingContext>
<dx:RadialProgressBar.ContentTemplate>
<DataTemplate>
<dx:DXStackLayout Orientation="Vertical">
<dx:DXImage Source="{Binding Icon}"
TintColor="#8F79CA" HeightRequest="50"/>
<Label HorizontalOptions="Center" FontSize="Title" >
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding Value}" FontAttributes="Bold"/>
<Span Text="%"/>
</FormattedString>
</Label.FormattedText>
</Label>
</dx:DXStackLayout>
</DataTemplate>
</dx:RadialProgressBar.ContentTemplate>
</dx:RadialProgressBar>
public class MainViewModel {
public ChargeInfo ChargeInfo { get; set; } = new() { Value = 30, Icon = ImageSource.FromFile("lightning.svg") };
}
public class ChargeInfo : INotifyPropertyChanged {
double _value;
public ImageSource Icon { get; set; }
public double Value {
get { return _value; }
set {
_value = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged([CallerMemberName] string propertyName = "") {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
#Customize Appearance
The following properties allow you to customize radial progress bar appearance:
<dx:RadialProgressBar ...
Fill="LightGray"
ValueIndicatorFill="Coral"
Thickness="40"
ValueIndicatorThickness="34"/>