How to create a progress bar with the WinUI linear gauge (SfLinearGauge)?
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
View the sample in the GitHub.
See also
How to customize the shape pointer?
How to customize the bar pointer?
