User avatar
stonstad
Topic Author
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Subpixel Rounding Question

06 Mar 2019, 16:40

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:
Image

Repeating Element
Image

XAML
<Rectangle Width="32" HorizontalAlignment="Left" Margin="0, 41, 0, 38">
            <Rectangle.Fill>
                <ImageBrush ImageSource="titledwindow_left.png" Stretch="None" ViewportUnits="RelativeToBoundingBox" TileMode="Tile"/>
            </Rectangle.Fill>
        </Rectangle>

Thank you in advance for your consideration.
Shaun
Last edited by stonstad on 06 Mar 2019, 17:07, edited 1 time in total.
 
User avatar
stonstad
Topic Author
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 16:46

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.
Last edited by stonstad on 06 Mar 2019, 17:24, edited 1 time in total.
 
User avatar
stonstad
Topic Author
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 17:08

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.
 
User avatar
stonstad
Topic Author
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 17:34

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.
 
User avatar
jsantos
Site Admin
Posts: 3905
Joined: 20 Jan 2012, 17:18
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 17:40

Hi! Do you have the same problem in WPF / Blend? Just to discard a possible bug here. Thanks!
 
User avatar
stonstad
Topic Author
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 17:44

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.
 
User avatar
jsantos
Site Admin
Posts: 3905
Joined: 20 Jan 2012, 17:18
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 17:47

Could you please pack this in a simple XAML + Image (no code-behind) reproducing the issue?
 
User avatar
jsantos
Site Admin
Posts: 3905
Joined: 20 Jan 2012, 17:18
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 17:48

This is probably related to #916
 
User avatar
stonstad
Topic Author
Posts: 241
Joined: 06 Jun 2016, 18:14
Location: Lesser Magellanic Cloud
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 17:59

OK, will do. I see #916 has a known work-around. Is there a work-around for my scenario?
 
User avatar
jsantos
Site Admin
Posts: 3905
Joined: 20 Jan 2012, 17:18
Contact:

Re: Subpixel Rounding Question

06 Mar 2019, 18:04

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.

Who is online

Users browsing this forum: Google [Bot] and 86 guests