Progress

A progress bar, determinate and indeterminate, as Avalonia's ProgressBar.

ExampleInteractive

Progress — Avalonia UIKit

<ProgressBar Value="40" Width="240" HorizontalAlignment="Left" />

View code

#Usage

The theme covers ProgressBar in full: a bar in the progress color over the same color at 20%, with half its height as the radius. A change of Value animates the bar's width over 180ms on the cubic Bézier easing (0.2, 0, 0, 1). IsIndeterminate="True" repeats a one-second sweep: the bar's leading edge runs across in the second, and its trailing edge follows in the second half, both ends rounded. Sizes: xsmall (4px), small (6px), large (10px); medium (8px) needs no class.

#Examples

The four heights.

<StackPanel Spacing="12" Width="240" HorizontalAlignment="Left">
  <ProgressBar Classes="xsmall" Value="40" />
  <ProgressBar Classes="small" Value="40" />
  <ProgressBar Value="40" />
  <ProgressBar Classes="large" Value="40" />
</StackPanel>

View code

IsIndeterminate="True" repeats the sweep.

<ProgressBar IsIndeterminate="True" Width="240" HorizontalAlignment="Left" />

View code

#Not covered

• A color property of its own; set Foreground directly.