mcpField
S
syncfusion-wpf-linear-progressbar

syncfusion-wpf-linear-progressbar

github.com/syncfusionDesign & UI5155 installsUpdated 1w ago
Repository

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

  1. 01Determinate and indeterminate states
  2. 02Secondary buffer progress
  3. 03Segmented progress display
  4. 04Range-based colors and gradients
  5. 05Custom colors, padding, and corner radius

Use cases

  1. 01Show file download progress
  2. 02Animate loading when duration is unknown
  3. 03Display video buffering progress
  4. 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-progressbar

After 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.md
getting-started.md
states.md

Details

From the project README

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 Progress property
  • 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 ends
  • IndicatorPadding — gap between track and progress bar
  • ProgressColor / TrackColor — solid color customization
  • RangeColors: RangeColor with Start, End, Color
  • Gradient: RangeColor.IsGradient
  • AnimationDuration / AnimationEasing (indeterminate only)
  • SegmentCount — split bar into sections
  • Segments with corner radius

Key Properties

PropertyTypeDefaultPurpose
Progressdouble0Current progress value (0–100)
IsIndeterminateboolfalseIndeterminate bouncing animation
SecondaryProgressdouble0Buffer/secondary progress value
SecondaryProgressColorBrushthemeColor of the buffer bar
ProgressColorBrushthemeColor of the progress bar
TrackColorBrushthemeColor of the background track
IndicatorCornerRadiusdouble0Rounded ends on progress bar
IndicatorPaddingThickness0Gap between track and indicator
SegmentCountint0Number of segments (0 = none)
AnimationDurationTimeSpan3000msIndeterminate animation cycle time

Common Use Cases

  • File download bar — determinate with Progress bound to download percentage
  • Loading animation — indeterminate (IsIndeterminate="True")
  • Video buffering — SecondaryProgress ahead of Progress
  • Step tracker — SegmentCount matching total steps
  • Health/battery bar — RangeColors mapping green/yellow/red zones
  • Styled progress pill — IndicatorCornerRadius="10" for rounded bar

Comments

Markdown supported