ProgressBar

Determinate, indeterminate, and styled progress indicators.

Try in Playground

Overview

The ProgressBar control displays a horizontal bar indicating progress. It supports three modes: determinate (bound to a value 0-100), indeterminate (animated marquee), and static with customizable colors. 

<!-- Determinate with percentage display -->
<ProgressBar Value="{Binding ProgressValue}" ShowPercentage="True" />

<!-- Indeterminate (animated marquee) -->
<ProgressBar IsIndeterminate="True" />

<!-- Custom color -->
<ProgressBar Value="25" Foreground="#E06C75" />

<!-- Default at 75% -->
<ProgressBar Value="75" />

ViewModel (C#)

The ProgressValue property cycles from 0 to 100 using a timer, demonstrating real-time data binding to the progress bar. 

public class ProgressBarsViewModel : ViewModelBase, IDisposable
{
    public double ProgressValue
    {
        get;
        set => SetProperty(ref field, value);
    }

    private readonly Timer _timer;

    public ProgressBarsViewModel()
    {
        _timer = new Timer(_ =>
        {
            ProgressValue = (ProgressValue + 2) % 102;
            if (ProgressValue > 100) ProgressValue = 0;
        }, null, TimeSpan.Zero, TimeSpan.FromMilliseconds(500));
    }

    public void Dispose() => _timer.Dispose();
}

Key Concepts