microsoft / microsoft/microsoft-ui-xaml

Animation glitch in WinUI ProgressBar when reducing value

Open
#10,257 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-Progress bug
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

### Describe the bug

The WinUI ProgressBar control exhibits an animation glitch when the Value property is decreased. During this process, the left side of the bar briefly shifts, creating a distracting visual effect.
https://github.com/user-attachments/assets/094c192b-8b90-4ae9-908f-d1d52133c5a4

### Steps to reproduce the bug

1. Paste the below xaml code in MainWindow.xaml
```









```
2. Paste the below code in MainWindow.xaml.cs

```c#
public sealed partial class MainWindow : Window
{
DispatcherTimer dispatcherTimer = new DispatcherTimer();
private int _count = 0;
private double _currentValue = 1;

private int _direction = -1;
public MainWindow()
{
this.InitializeComponent();
dispatcherTimer.Interval = TimeSpan.FromSeconds(0.5);
dispatcherTimer.Tick += DispatcherTimer_Tick;
dispatcherTimer.Start();
}

private void DispatcherTimer_Tick(object? sender, object e)
{
_currentValue += 0.05 * _direction;
if (_currentValue < 0)
_currentValue = 1;
if (_currentValue > 1)
_currentValue = 0;

this.TheProgressBar.Value = _currentValue;
this.ProgressBarvalue.Text = $"{_currentValue}";
this.TheLabel.Text = $"{_count++}";
}
private void OnCounterClicked(object sender, RoutedEventArgs e)
{
_direction *= -1;
_count = 0;
}
}
```

### Expected behavior

The left bar shouldn't blink when reducing the value.

### Screenshots

_No response_

### NuGet package version

WinUI 3 - Windows App SDK 1.6.3: 1.6.241114003

### Windows version

Windows 11 (23H2): Build 22631

### Additional context

_No response_

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the ProgressBar reproduction from MainWindow.xaml and MainWindow.xaml.cs with Windows App SDK 1.6.3, then compare behavior while decreasing and increasing Value. Done means the left side of the bar no longer blinks or shifts when the value is reduced.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp
Domain
desktop
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.