Skip to content

Latest commit

 

History

History
77 lines (52 loc) · 4.77 KB

progressbar.md

File metadata and controls

77 lines (52 loc) · 4.77 KB
Raw
-api-id -api-type
T:Microsoft.UI.Xaml.Controls.ProgressBar
winrt class

Microsoft.UI.Xaml.Controls.ProgressBar

-description

Represents a control that indicates the progress of an operation.

This documentation applies to WinUI 2 for UWP (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

-remarks

A ProgressBar control visually indicates progress of an operation with one of two styles: a bar that displays a repeating pattern, or a bar that fills based on a value.

Indeterminate and determinate progress bar controls

The IsIndeterminate property determines the appearance of a ProgressBar.

  • Set IsIndeterminate to true to display a repeating pattern. An alternative control to use for indeterminate progress is a ProgressRing.
  • Set IsIndeterminate to false to fill the bar based on a value. (This is the default.) When IsIndeterminate is false, you specify the range with the Minimum and Maximum properties. By default Minimum is 0 and Maximum is 100. To specify the progress value, you set the Value property.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see XAML styles. XAML also includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. Modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the XAML styles article.

The resources for this control are listed in the ThemeDictionaries section of the ProgressBar_themeresources.xaml file on GitHub. The ResourceKey value for each StaticResource references a brush and color in the Common_themeresources_any.xaml file.

-see-also

ProgressRing, Progress controls

-examples

Tip

For more info, design guidance, and code examples, see Progress controls.

[!div class="nextstepaction"] Open the WinUI 2 Gallery app and see the ProgressBar in action.

The WinUI 2 Gallery app includes interactive examples of most WinUI 2 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

The following shows how to set up an indeterminate ProgressBar and a basic determinate ProgressBar where the value is dependent on a RepeatButton click.

<!-- xmlns:muxc="using:Microsoft.UI.Xaml.Controls" -->

<StackPanel x:Name="LayoutRoot">
    <StackPanel BorderThickness="4" BorderBrush="Black" Padding="12">
        <TextBlock Text="Indeterminate Progress Bar"/>
        <muxc:ProgressBar IsIndeterminate="True" Margin="0,12"/>
    </StackPanel>
    <StackPanel BorderBrush="Black" BorderThickness="4" Padding="12">
        <TextBlock Text="Value-Based Progress Bar"/>
        <muxc:ProgressBar x:Name="progressBar1" Value="0" Maximum="200" Margin="0,12"/>
        <RepeatButton Content="Press and hold" Click="RepeatButton_Click"/>
    </StackPanel>
</StackPanel>
private static int _clicks = 0;

private void RepeatButton_Click(object sender, RoutedEventArgs e)
{
    _clicks += 1;
    progressBar1.Value = _clicks;
    if (_clicks >= progressBar1.Maximum) _clicks = 0;
}