microsoft-ui-xaml icon indicating copy to clipboard operation
microsoft-ui-xaml copied to clipboard

The flickering issue occurs due to a mismatch in the ActualOffset of the control in UWP when arranging the element.

Open SathiyathanamSathish opened this issue 1 year ago • 4 comments

Describe the bug

We have organized our control based on the calculation of the desired size of the element. When we scroll in our control using the mouse, we subtract the scrolled pixels from the rectangle and rearrange the elements based on the updated rectangle. This allows us to hide the control. However, when we decrease the rectangle by 5 (scrolledPixels), we encounter some inconsistent results with the ActualOffset. If we further decrease the rectangle by another value (scrolledPixels), we obtain the correct ActualOffset. Because of this discrepancy in ActualOffset, we are experiencing flickering issues on our end.

Note: We have received the correct ActualOffset when the system resolution is set to 100, but the above problem occurs when the resolution is set to 125, 150, or 175.

Can you suggest a solution to obtain the exact ActualOffset when arranging the elements in all system resolutions?

Steps to reproduce the bug

Run the sample in 150 system resolution. And add the breakpoint in ArrangeOverride method of ScrollableContentViewer. In that method we have reduce 5 pixels from the final rectangle. Then we called the Element.Arrange(finalRect).

Observed Behavior We received the Actual Offset as -4.66667

Expected Behavior: The ActualOffset is should be -5

Sample: FlickeringDemo.zip

Expected behavior

Should return the correct ActualOffset for all system resolution

Screenshots

In 150 System Resolution devenv_J6zOmwGzWn

In 100 System Resolution devenv_MbOay7xfzB

NuGet package version

None

Windows version

Windows 11 (22H2): Build 22621

Additional context

No response

SathiyathanamSathish avatar Feb 05 '24 17:02 SathiyathanamSathish

Hi Team, - Any update on this?.

SathiyathanamSathish avatar Feb 09 '24 06:02 SathiyathanamSathish

The behavior you describe sounds like layout rounding. If you set UseLayoutRounding="false" on the elements involved, do you then see the values you're expecting?

Layout rounding is frequently important to ensure rendering is sharp, so turning it off is generally not recommended.

codendone avatar Feb 13 '24 02:02 codendone

@codendone - We have checked the suggested approach of setting UseLayoutRounding to true from our end. Even then, we are getting the same differences in the ActualOffset values.

devenv_HYFFTLXlyb

Can you confirm why these value differences do not occur in a 100% system resolution, but occur in 125% and 150% system resolutions? Please provide the correct solution to address this issue.

SathiyathanamSathish avatar Feb 13 '24 06:02 SathiyathanamSathish

@SathiyathanamSathish You need to set UseLayoutRounding to false to turn off layout rounding. When layout rounding is on, it will adjust the values based on the system scale factor to align the elements to pixel bounds (to avoid blurring them across partial pixels).

codendone avatar Feb 14 '24 05:02 codendone

@codendone - Thank you for the update. The solution is working in the attached sample, but our application is still experiencing issues with values even after setting the UseLayoutRounding to false.

SathiyathanamSathish avatar Mar 04 '24 09:03 SathiyathanamSathish