I’m trying to create an angle gradient (similar to the one Photoshop does) in XAML. I found this article: https://stackoverflow.com/a/21096028/2555957 which does work but only supports two gradient stops and I need 11.
I’ve looked over the shader that does the calculations in the backend but I don’t know how to add support for more gradient stops. It would work even if the shader would be hardcoded to work with 11 colors too.
2
Answers
Here’s a shader that is similar to this one that supports twenty stops and has no aliasing around the edges:
Setup:
Xaml:
I reused LinearGradientBrush’s GradientStopCollection/GradientStop for consistency.
AngularGradientEffect.cs:
Shader:
HLSL appears to support arrays in floating point constant buffers, but WPF doesn’t. If it did, the shader could be rewritten to easily support an arbitrary number of stops and would be considerable more elegant.
Resources:
I plan on investigating this further, but for now I have something very close to a real solution (no offense to @Jason Fry!).
The idea is this. Pass in an arbitrary amount of data to these four variables. The two sampler registers contain the "arrays". The constant registers indicate the length.
Currently, I can access each color correctly like so:
In C#, I’d create a WriteableBitmap (any visual brush works, though):
The hard part is figuring out how to pass the array of offsets since they aren’t colors and then subsequently how to loop through them.
When doing local tests with native arrays, I was unable to get a simple for loop to work. For whatever reason, attempting to change the variables needed to get the right colors wouldn’t work in the loop, but would outside of it (no idea why…).
I will update this answer when I conclude my investigation!