How to display a progress bar using the .NET MAUI Linear Gauge (SfLinearGauge)?

6 mins read

This article describes how to display a progress bar using the Syncfusion .NET MAUI Linear Gauge control.

Step 1: Create the linear gauge control by referring to this getting started link.

Step 2: Initialize a SfLinearGauge to display a track bar as demonstrated in the following code example.

XAML

<gauge:SfLinearGauge Maximum="100"
                     EnableAxisAnimation="True"
                     ShowLabels="False"
                     ShowTicks="False">
</gauge:SfLinearGauge>

Note:

Animate the progress bar at loading time by setting the EnableAxisAnimation as true.

Step 3: We can customize the track bar height by setting the Thickness of the LinearLineStyle and customize the range bar corner by using the CornerStyle as both curve.

XAML

<gauge:SfLinearGauge.LineStyle>
    <gauge:LinearLineStyle CornerStyle="BothCurve"
                           Fill="#d6d6d6"
                           Thickness="40" />
</gauge:SfLinearGauge.LineStyle>

Step 4: To display the progress bar by adding the BarPointer as show in the following code sample.

XAML

<gauge:SfLinearGauge.BarPointers>
    <gauge:BarPointer Value="41.47"
                      PointerSize="40"/>
</gauge:SfLinearGauge.BarPointers>

Step 5: Customize the progress bar by setting the EnableAxisAnimation, AnimationEasing, CornerStyle and Fill properties as shown in the following code sample.

XAML

<gauge:SfLinearGauge.BarPointers>
    <gauge:BarPointer x:Name="barpointer"
                      Value="41.47"
                      PointerSize="40"
                      EnableAnimation="True"
                      AnimationEasing="{x:Static Easing.CubicOut}"
                      CornerStyle="BothCurve"
                      Fill="#00a2ed" />
</gauge:SfLinearGauge.BarPointers>

Step 6: To display the current value of the progress bar, use the LinearContentPointer as show in the following code sample.

XAML

<gauge:SfLinearGauge.MarkerPointers>
    <gauge:LinearContentPointer Value="3"
                                Position="Cross"
                                Alignment="End">
        <gauge:LinearContentPointer.Content>
            <HorizontalStackLayout>
                <Label Text="{Binding Source={x:Reference barpointer}, Path=Value}"
                       TextColor="White"
                       FontAttributes="Bold" />
                <Label Text="%"
                       TextColor="White"
                       FontAttributes="Bold" />
            </HorizontalStackLayout>
        </gauge:LinearContentPointer.Content>
    </gauge:LinearContentPointer>
</gauge:SfLinearGauge.MarkerPointers>

View sample in the GitHub.

Output

Progress bar using the .NET MAUI Linear Gauge (SfLinearGauge)

How to display a progress bar using the .NET MAUI Linear Gauge (SfLinearGauge)?

See also

Access denied