Forums | NoesisGUI

Hi there. Does anyone know what a good solution might be for the behavior shown below? I have a 9-grid UI which aligns layout and image pixels. I use a viewbox for scaling purposes based on target device resolution. (i.e. 100% at 1920x1080 and 200% at 4K, etc).

I am pretty sure the vertical black line shown below is caused by subpixel layout or image scaling, where scale percentage is between 100% and 200%. I like that the viewbox scales to the exact percentage needed to fill a screen identically across all devices, but I do not like the black lines that appear because of ... layout rounding?

I tried two different settings - SnapToDevicePixels (which I learned is deprecated?) and then UseLayoutRounding. Should either of these properties work for the behavior I am seeing? Are there any alternatives I might consider?

Composite Image:


Repeating Element


XAML
Thank you in advance for your consideration.
Shaun

I think I found the culprit -- it appears to be an issue with an image sprite that contains a black line. Not 100% sure but that is what my debugging is showing. *edit* -- nope, this does not appear to be the cause.

It looks like pixels from the left edge of the repeating image is being shown on the right side of the ImageBrush. The initial image was 25 pixels wide. I tried changing to 32 pixels (power of 2 dimension) but no luck so far. I'll keep trying things.

Changing the size of the rectangle (from 32 pixels wide to 31 or 33) does not appear to work. If I set it to 31 pixels wide, the left strip of pixels (1 unit wide) of the image is cut off. It appears that the origin is on the right side of the image, so decreasing width cuts off left-most pixels. If I set to 33 pixels wide the contents repeat since the source image is 32 pixels wide.

Hi! Do you have the same problem in WPF / Blend? Just to discard a possible bug here. Thanks!

I can't speak to Blend -- I'm not using it and this code started in a UWP app. The UWP does not have this issue. So if I set TileMode to None the black line goes away. I think this confirms that pixels on the left side of the image are repeating even though the width of the rectangle matches the width of the image. I think this brings us back full circle to a layout rounding issue, which makes sense since the issue only manifests when the element is contained in a visual hierarchy that has a ViewBox.

I tried adding UseLayoutRounding to this element and the control parent -- but that does not resolve the problem.

* edit for clarification. In my UWP app I wrote my own code for wrapping images with pixel precision.

Could you please pack this in a simple XAML + Image (no code-behind) reproducing the issue?

This is probably related to #916

OK, will do. I see #916 has a known work-around. Is there a work-around for my scenario?

Not sure, I need to understand the issue first. 😃

I am not sure there is a workaround for #916 though. By the way it is also probably related to #1291. I just linked them.