Implementing SfLinearProgressBar (WPF)
When to Use This Skill
Use this skill when:
- Displaying a horizontal progress bar for a known task (determinate)
- Showing an indeterminate bouncing animation while progress is unknown
- Visualizing primary + secondary (buffer) progress simultaneously
- Splitting progress into discrete segments
- Customizing colors, gradients, padding, or corner radius
- Applying range-based colors across progress value zones
Assembly: Syncfusion.SfProgressBar.WPF Namespace: Syncfusion.UI.Xaml.ProgressBar XAML Schema: http://schemas.syncfusion.com/wpf Key Class: SfLinearProgressBar
Quick Start
<Window xmlns:Syncfusion="http://schemas.syncfusion.com/wpf">
<Grid x:Name="grid">
<Syncfusion:SfLinearProgressBar
Progress="70"
Width="500"
Height="20" />
</Grid>
</Window>using Syncfusion.UI.Xaml.ProgressBar;
SfLinearProgressBar linear = new SfLinearProgressBar();
linear.Progress = 70;
linear.Width = 500;
linear.Height = 20;
grid.Children.Add(linear);Documentation and Navigation Guide
Getting Started
📄 Read: references/getting-started.md
- NuGet/assembly installation (
Syncfusion.SfProgressBar.WPF) - XAML namespace and schema declaration
- Declaring in XAML and code-behind
- Setting the
Progressproperty - Theme integration via SfSkinManager
States
📄 Read: references/states.md
- Determinate state (default) for known progress
- Indeterminate state (
IsIndeterminate="True") for unknown duration - Buffer state (
SecondaryProgress,SecondaryProgressColor) - Decision guide: which state to use when
- Switching states dynamically via MVVM binding
Appearance & Segments
📄 Read: references/appearance-and-segments.md
IndicatorCornerRadius— rounded endsIndicatorPadding— gap between track and progress barProgressColor/TrackColor— solid color customizationRangeColors:RangeColorwithStart,End,Color- Gradient:
RangeColor.IsGradient AnimationDuration/AnimationEasing(indeterminate only)SegmentCount— split bar into sections- Segments with corner radius
Key Properties
| Property | Type | Default | Purpose |
|---|---|---|---|
Progress | double | 0 | Current progress value (0–100) |
IsIndeterminate | bool | false | Indeterminate bouncing animation |
SecondaryProgress | double | 0 | Buffer/secondary progress value |
SecondaryProgressColor | Brush | theme | Color of the buffer bar |
ProgressColor | Brush | theme | Color of the progress bar |
TrackColor | Brush | theme | Color of the background track |
IndicatorCornerRadius | double | 0 | Rounded ends on progress bar |
IndicatorPadding | Thickness | 0 | Gap between track and indicator |
SegmentCount | int | 0 | Number of segments (0 = none) |
AnimationDuration | TimeSpan | 3000ms | Indeterminate animation cycle time |
Common Use Cases
- File download bar — determinate with
Progressbound to download percentage - Loading animation — indeterminate (
IsIndeterminate="True") - Video buffering —
SecondaryProgressahead ofProgress - Step tracker —
SegmentCountmatching total steps - Health/battery bar —
RangeColorsmapping green/yellow/red zones - Styled progress pill —
IndicatorCornerRadius="10"for rounded bar