microsoft / microsoft/microsoft-ui-xaml
SwapChainPanel has lines on the sides (background hole showing through) in some situations
- Dominant language
- C++
- Stars
- 8.4k
- Forks
- 942
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 105
Description
### Describe the bug
This seems like an extension of this bug, which obviously wasn't fully fixed - https://github.com/microsoft/microsoft-ui-xaml/issues/5021. It seems that if I have a SwapChainPanel that exceeds the size of its container (doesn't have to be direct container), then it can result in lines being seen around the edge of it (assuming the window's theme background color is different from the background of the swapchainpanel and surrounding content). Potentially it happens when the the swapchainpanel is not aligned to whole pixels, although I don't understand this since layout rounding is enabled. I have provided a repo under 'Steps to reproduce'. Also, in the image below, there should be no white square showing (that is the window background showing through).
### Why is this important?
Can't use SwapChainPanel to display content without annoying lines being drawn around it. Regression from UWP. Blocking me from updating.
### Steps to reproduce the bug
Ensure display scaling is at 100%.
Create a blank WinUI packaged app. Add a reference to Microsoft.Graphics.Win2D. Ensure the app's theme is Light. For the MainWindow class, add the following XAML.
```XAML
```
and the following code
```C#
using Microsoft.Graphics.Canvas;
using Microsoft.UI;
using Microsoft.UI.Xaml;
using System.Numerics;
using Windows.Foundation;
namespace TestSwapChain {
public sealed partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
void AddSwapChain() {
var device = CanvasDevice.GetSharedDevice();
var rasterizationScale = swapChainPanel.XamlRoot.RasterizationScale;
var size = new Size(200, 200);
container.Width = size.Width - 5; //Can replace 5 with any odd number (if rasterizationScale = 1)
container.Height = size.Height - 5; //Can replace 5 with any odd number (if rasterizationScale = 1)
swapChainPanel.Width = size.Width;
swapChainPanel.Height = size.Height;
var swapChain = new CanvasSwapChain(device, (float)size.Width, (float)size.Height, (float)(96.0 * rasterizationScale), Windows.Graphics.DirectX.DirectXPixelFormat.B8G8R8A8UIntNormalized, 2, CanvasAlphaMode.Premultiplied);
swapChainPanel.SwapChain = swapChain;
using (var ds = swapChain.CreateDrawingSession(Colors.Transparent)){
var pixelSize = swapChain.SizeInPixels;
ds.Units = CanvasUnits.Pixels;
ds.Clear(new Vector4(0, 0, 0, 1.0f));
}
swapChain.Present(0);
}
private void drawButton_Click(object sender, RoutedEventArgs e) {
AddSwapChain();
}
}
}
```
Run and press the draw button. Observe the white line. Change the '5' to an even number and observe no white line. Also switching to +5 instead of -5 will fix the problem, so it seems to only occur when some sort of clipping kicks in.
### Actual behavior
White line around swap chain panel
### Expected behavior
No white line
### Screenshots
_No response_
### NuGet package version
Microsoft.WindowsAppSDK 1.8.260317003
### Windows version
Windows 11 (24H2): Build 26100
### Additional context
_No response_
Contributor guide
Research direction
Start by reproducing the issue with the MainWindow XAML and AddSwapChain code in the report, using odd versus even container dimensions and observing clipping around CanvasSwapChainPanel. Compare the behavior with the referenced issue 5021; done means the white line no longer appears when the swap chain is clipped or aligned on fractional pixels.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, csharp
- Domain
- computer-graphics, desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100