microsoft / microsoft/microsoft-ui-xaml

SwapChainPanel has lines on the sides (background hole showing through) in some situations

Open
#11,056 2 comments 1 reaction 0 assignees View on GitHub
area-Layouts bug
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).

Image

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.