Welcome FancyFrame

Yuriy Holembyovskyy, Lead Xamarin developer

Tech

14.07.2020.

featured image

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.

Pancake view
Pancake view
FancyFrame for Android
FancyFrame for Android

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.

Pancake View
Pancake View
FancyFrame for iOS
FancyFrame for iOS

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.

Pancake View
Pancake View
FancyFrame for UWP
FancyFrame for UWP

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.

Pancake View
Pancake View
FancyFrame for WPF
FancyFrame for WPF

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.

FancyFrame MacOs
FancyFrame MacOs
FancyFrame GTK for MacOs
FancyFrame GTK for MacOs
FancyFrame GTK for Win
FancyFrame GTK for Win

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!

FancyFrame Mobile
FancyFrame Mobile
FancyFrame (Watch) for Tizen
FancyFrame (Watch) for 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:

RELATED

07.07.2020.

Scaling Scrum – Intro to Nexus

When it comes to efficiently managing the interaction and coordination of multiple Scrum teams in an agile way, the traditional management approach falls short of its mark. Clearly, one needs an Agile framework for scaling Scrum effectively.

Read more