Search code examples
wpfpixelavaloniaui

Pixelart with WPF/AvaloniaUI


I started looking into WPF and Avalonia to build a ui with a pixelart look. I get that both are built around vector based graphics and probably not best suited towards pixel graphics.

I was not looking to get an opinion, even if the original question was maybe unclear. The question was: is wpf/avalonia the right tool for it?

After the answer I got and some more reading/tinkering I could say that it is quite feasible but slightly more complicated. As mentioned in the answer, for example, if I strip away all the default styles of a button and slap in a pixel art "facade" I just need to lock the button dimensions. So even if the whole window can resize and controls move (like in modern apps) the controls that use custom pixel "facade" have the dimensions locked and still keeping the wanted look.

Furthermore I guess it could be possible to use vector graphics but with a pixelart look, meaning graphics with higher resolution "pretending to be pixels" (like a single pixel is drawn using a vector square), but I would need to do some more experimenting.

I'm sort of answering my own question here, but the answer I got from users made me dig into wpf more, so I post here my humble findings.


Solution

  • Yes, this is completely possible. Avalonia, like WPF, is a fully rendered UI which means you have near total control over the way controls layout. The big difference between the two is that Avalonia uses Google Skia to render, allowing it to be cross platform. Both UI use "lookless" controls that only specify it's programmatic behavior and then allow you to apply a template to customize the controls appearances to suit whatever your whim. The syntax between the two is quite different, however. Along with control styling, templated controls are among the biggest changes moving from WPF to Avalonia.

    In some cases it could be a simple as re-styling. For example, if I wanted a button that looked like a pixel art, I would create a button with an Image as it's content, I would then make the button transparent, remove any borders, basically style it in such a way that you can't see the actual button, only it's content.

    You could also draw "pixels" using geometric shapes or line drawings rather than using raster images. This would have the advantage of allowing them to be resized without corruption. Even though they are made to look like pixels, they would still be vector art.

    In other cases you may have to re-template the control entirely or even make your own control.