Search code examples
uwpwinui

How to change the foreground display point to long bar? ProgressBar

The Official UWP ProgressBar Control:https://learn.microsoft.com/zh-cn/windows/apps/design/controls/progress-controls

Demo show : enter image description here

But what I get is like this: enter image description here

How can I change it?

Solution

  • I could reproduce your problem. So there are two progress bars: the default one (dotted) is native uwp and the other one(the one you would like to get) comes with the Winui2 nuget package.

    How to install and add the nuget:

    1. rightclick your project in solutionexplorer
    2. click on manage nuget packages
    3. search for the Microsoft.Ui.Xaml nuget and install it
    4. Add this code to your app.xaml inside the application tags to reference the winui2 controls:
    <Application.Resources>
     <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
    1. add a reference to the Microsoft.UI.Xaml.Controls namespace as muxc to your mainpage:
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    1. Add the progressbar from the muxc namespace:
    <muxc:ProgressBar Width="150" IsIndeterminate="True"/>