Welcome FancyFrame

A few months ago, when I did the PR for PancakeView (the version for WPF) and had some issues with borders (which had worked perfectly on UWP), I thought about whether the code could be written once and used everywhere. Does that sound familiar? 😊

Especially if it uses a lot of custom controls. That’s how I came up with the idea of rewriting PancakeView using SkiaSharp. Furthermore, controls written with SkiaSharp are one of the most discussed topics in the .NET MAUI repo.

Please give a warm welcome to FancyFrame!

Proof of Concept – Porting PancakeView to Skiasharp. Why a PoC? Cause it’s still missing some very important properties (like ClipToBounds) – so I am not allowed to call it “A Skiasharp Version of PancakeView” :). The complete source code is available on my github. This article is a general overview of this component with some issues that I have tackled during the development process.

Basically, this component is just a canvas where we draw the layers one by one: Shadows=>Borders=>BackgroundColor/Image

The child components are placed on top of it. Ease of implementation for rounded corners and gradients comes up with limited support for “ClipToBounds”. I have overcome this limitation for images by rendering them with SkiaSharp :). This means that it will have the same look and feel on all available platforms. I also needed to tune the scaling on different platforms for borders, shadows, and image stretching, as to make them look like they do in PancakeView.

iOS and Android are not as interesting, because they are the most supported platforms and all properties have been implemented for both of them. Let’s instead take a look at less supported platforms like UWP and WPF.

As we can see, there are differences in support for DashedBorders, Shadows, and Sides properties, as well as for the combination of all of them.

There are significantly more differences. But this is where everything has started 🙂 I plan to contribute the missing properties to PancakeView.WPF with the release of WinUI 3.0.

Unsupported platforms

Previous implementations didn’t have many differences in comparison to original implementations, except for WPF. Let’s take a look at platforms that are not supported by the original component due to less popularity and probably a lack of time.

Cool!!! The MacOS version looks identical to the desktop version for UWP and WPF. What I found impressive is that I was able to run the GTK version on both desktop platforms –WinOS and MacOS. Thanks, Xamarin.Forms and Skiasharp :). As you have probably noticed, the GTK version is missing controls that are wrapped with FancyFrame. This is a known bug in Xamarin.Forms for GTK .

And last, but not least: Tizen!

The controls are a bit squeezed in the image (Right) due to the low resolution of the emulator. I have added Tizen. Watch in the very last moment. I did not expect that it would run out-of-the-box :).

Summary

We’ve got a nice good-looking control with a single code base and zero percentage of platform-specific code. While there are still some limitations, we can use it on a variety of platforms, even on less supported ones.

To-dos

• Fix (update) the GTK version
• Add dotted line support
• Wrap it in a NuGet package
• Your PRs and Suggestions

Thanks to:

• Steve Thewissen for the original PancakeView component
• Felipe Baltazart for the implementation of the shadows in his awesome Neo.Controls