How to create a progress bar with the WinUI linear gauge (SfLinearGauge)?

4 mins read

This article describes how to display a progress bar using Syncfusion WinUI Linear Gauge control.

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

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

XAML

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis Maximum="100"
                          ShowLabels="False"
                          ShowTicks="False">
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>

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

XAML

<gauge:LinearAxis CornerStyle="BothCurve"
                  AxisLineStrokeThickness="30">
</gauge:LinearAxis>

Step 4: To display the progress bar, add the BarPointer as shown in the following code sample.

XAML

<gauge:LinearAxis.BarPointers>
    <gauge:BarPointer Value="41.47"
                      PointerSize="30"/>
</gauge:LinearAxis.BarPointers>

Step 5: Customize the progress bar by setting EnableAnimation, AnimationEasingFunction, Background and CornerStyle properties as shown the following code sample.

XAML

<gauge:LinearAxis.BarPointers>
    <gauge:BarPointer x:Name="barPointer"
                    Value="41.47"
                    PointerSize="30"
                    Background="#683ab7"
                    CornerStyle="BothCurve"
                    EnableAnimation="True">
        <gauge:BarPointer.AnimationEasingFunction>
            <CircleEase EasingMode="EaseOut" />
        </gauge:BarPointer.AnimationEasingFunction>
    </gauge:BarPointer>
</gauge:LinearAxis.BarPointers>

Step 6: To display the current value of the progress bar, use the Child property of the bar pointer as shown in the following code sample.

XAML

<gauge:LinearAxis.BarPointers>
    <gauge:BarPointer>
        <gauge:BarPointer.Child>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding ElementName=barPointer, Path=Value}"
                           Foreground="White"
                           Margin="15,0,0,0"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Left" />
                <TextBlock Text="%"
                           Foreground="White"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Left" />
            </StackPanel>
        </gauge:BarPointer.Child>
    </gauge:BarPointer>
</gauge:LinearAxis.BarPointers>

Output

Progress Bar using Sycfusion WinUI SfLinearGauge

View the sample in the GitHub.

How to create a progress bar with the WinUI linear gauge (SfLinearGauge)?

See also

Access denied