S
syncfusion-wpf-linear-progressbar
About syncfusion-wpf-linear-progressbar
A reference skill for implementing Syncfusion’s SfLinearProgressBar in WPF. It helps WPF developers configure progress states and customize the bar’s appearance and segmentation.
Key features
- 01Determinate and indeterminate states
- 02Secondary buffer progress
- 03Segmented progress display
- 04Range-based colors and gradients
- 05Custom colors, padding, and corner radius
Use cases
- 01Show file download progress
- 02Animate loading when duration is unknown
- 03Display video buffering progress
- 04Track completion across discrete steps
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ syncfusion/ wpf-ui-components-skills --skill syncfusion-wpf-linear-progressbarAfter installing, type/syncfusion-wpf-linear-progressbarin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/appearance-and-segments.mdgetting-started.mdstates.mdDetails
From the project READMEImplementing 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
Comments
Markdown supported