A ProgressBar can be used in many ways. It can, as its name implies, be used to display the progress of an operation, but it can also be used for more game-specific requirements like health bars.

An optional SliceFrame is used to define the graphic used to display the current progress of the bar. The graphic can also be set to a colour without needing to define a whole SliceFrame, see the ProgressBar controller page for more information on this behaviour.

<ProgressBar Components="Frame" Controller="ProgressBar"/>

The ProgressBar template simply defines the Frame component and ProgressBar controller with no children.

<ProgressBar Size="128, 16"/>

Simply adding a ProgressBar to a layout will add a progress bar with a value of 0, and a minimum and maximum of 0 and 1 respectively.

float

<ProgressBar MinimumValue="-5.75" MaximumValue="6.25"/>

Sets the minimum and maximum values of the progress bar. The minimum cannot be higher than the maximum, and they default to 0 and 1 respectively.

float

<ProgressBar Value="2.5"/>

Sets the starting value of the progress bar to the given float value. This value is clamped between the minimum and maximum values and defaults to 0.

int

<ProgressBar DecimalDigits="0"/>

Sets the number of decimal digits that the value is rounded to. This is an integer value that defaults to 10, setting it to 0 rounds the value to the nearest whole number.

Direction

<ProgressBar Direction="Horizontal"/>

Sets the direction of the progress bar between these two values:

• Horizontal
• Vertical

Defaulting to horizontal.

Colour

<ProgressBar FillColour="Green" FillTint="#CCC"/>

Sets the colour and tint of the progress bar's fill. This overrides the SliceFrame named "Fill" of the element's base style variant, creating it if it does not exist.

Sides

<ProgressBar FillPadding="3, 5"/>

Sets the padding applied to the fill. This allows the fill to be properly resized within the element without affecting the main padding of the element.

bool

<ProgressBar DrawBehind="true"/>

Sets the boolean that determines the draw order of the frame and the fill. If this is true, the fill is drawn first, then the frame is drawn over it. Otherwise; the fill is drawn over the frame. This allows a frame with transparency to act as a border around the fill, although the value defaults to false.