1

I noticed ugly banding issues when using Gradients in WPF, and saw that a solution was to set the "bits per pixel" property to 32. The thing is that the property seem to be Windows Phone only, ie not working on a program for desktop devices, since trying to add this string in the ApplicationManifest didn't seem to do anything.

Does anyone know if/how I can set this property?

Thank you.

My function which draws the gradients:

public LinearGradientBrush getGradient(Color c1, Color c2, double opacity)
{
    LinearGradientBrush gradient = new LinearGradientBrush();
    gradient.StartPoint = new Point(0, 0);
    gradient.EndPoint = new Point(1, 1);
    gradient.GradientStops.Add(new GradientStop(c1, 0.0));
    gradient.GradientStops.Add(new GradientStop(c2, 1.0));
    gradient.Opacity = opacity;
    return gradient;
}

I draw the gradients off of the two most dominant colors in an AlbumCover. You can see the two colors on the top left of the window. I then call the getGradient-function with this:

getGradient(Colors[0], Colors[1], 0.5); // 0.5 is dynamic depending on the brightness of those colors. Tried with 1 opacity but it's still the same.

Here are the sample images (in PNG and uploaded without compression)

As you can see, there is banding going on. There are worse examples but I can't remember what Cover gave it.

Please notice that Image1 does not have banding on it's AlbumCover. Even though there is a gradient on it.

Todd
  • 30,472
  • 11
  • 81
  • 89
Tokfrans
  • 1,939
  • 2
  • 24
  • 56
  • @HighCore What? banding is not caused by a bad video-card, and if so, my two 770's should be enough to draw gradients, yes? – Tokfrans Sep 02 '14 at 21:56
  • @HighCore I'm sorry but your comments aren't really helping me. My problems are real and I want to know how to amp the pixelformat for my WPF application. To get banding - try draw a gradient with really similar colors. You'll most likely get the same result as I get. – Tokfrans Sep 02 '14 at 22:10
  • I'm not an expert, but I would think that your color depth would come from your Windows display settings. Is that set to 24 or 32 bit? – vesan Sep 02 '14 at 23:01
  • could you please post some screens of what you see? also please share some sample code to draw the same. – pushpraj Sep 03 '14 at 07:12
  • @vesan I have the system default on Windows 8.1, which is 32-bit?? Gradients on with 32-bit looks smooth. So it's not my hardware. – Tokfrans Sep 03 '14 at 17:09
  • @pushpraj Updated the original question with examples =) – Tokfrans Sep 03 '14 at 17:21

2 Answers2

2

By doing a quick search I found some suggestions that the issue may be just a visual effect that is a result of having only 256 values for each of R, G and B channels that defines a color and the way that gradients work. If You try to cover a large area with a gradient, it'll divide it into smaller areas filled with solid colors, slightly changing between neighbouring areas. Additionally, there is an optical illusion called Mach bands that makes the borders of the areas even more visible.

Take a look at those links for more information and some suggested solutions:

Community
  • 1
  • 1
Lukasz M
  • 5,635
  • 2
  • 22
  • 29
1

After digging around a long time I finally found the best solution:

Adding a little bit of noise to the image! This does mean I have to draw the gradient myself, but I believe the quality will be much better.

I will update this post with the algorithm itself and examples when I'm done writing.

Stay tuned I guess.

Tokfrans
  • 1,939
  • 2
  • 24
  • 56
  • In the first link I mentioned in my answer, You can find a suggestion to use ordered dithering and some sample code, which may be helpful (it's not in the accepted answer, but in the other one). – Lukasz M Sep 04 '14 at 17:22