An extended ContentView for Xamarin.Forms with rounded corners, borders, shadows and more!

In a lot of Xamarin.Forms UI work I do I have the need for a layout/view that I can use that supports gradients, borders, rounded corners and shadows. Since none of the existing Xamarin.Forms controls fit the bill I decided to roll my own. And why is it called a PancakeView you ask? Well, pancakes are also round, have shadows and have a glorious gradient color. What better fit can you think of?

The project is up on NuGet at the following URL:

https://www.nuget.org/packages/Xamarin.Forms.PancakeView

You could also simply clone the repository and include the projects in the src folder in your Xamarin.Forms and Platform projects. It uses multi-targeting to resolve to the correct platform.

The first thing we need to do is tell our XAML page where it can find the PancakeView, which is done by adding the following attribute to our ContentPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView">
   ...
</ContentPage>

Next up, just smack a PancakeView onto that page and you're all set, simple as baking real pancakes!

<yummy:PancakeView BackgroundColor="#bc91d7" CornerRadius="60,0,0,60" IsClippedToBounds="true" HorizontalOptions="FillAndExpand" HeightRequest="150">
   <Image Source="unicorn.png" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" />
</yummy:PancakeView>

PancakeView supports calling an Init() method to prevent the linker from stripping it out of your code that you can call in each platforms initializer. However, for UWP this might not be enough. When the .NET Native tool chain is used (e.g., to submit to the Microsoft Store), the renderer could be missing. To prevent this from happening, replace the Init() call in your App.xaml.cs file with the following:

List assembliesToInclude = new List();
assembliesToInclude.Add(typeof(Xamarin.Forms.PancakeView.UWP.PancakeViewRenderer).GetTypeInfo().Assembly);
Xamarin.Forms.Forms.Init(e, assembliesToInclude);

You need to call PancakeViewRenderer.Init() in MainWindow

 InitializeComponent();
 Forms.Init();
 PancakeViewRenderer.Init();
 LoadApplication(new PancakeViewSample.App());

At the time of this writing PancakeView has full support for iOS and Android, but only partial support for UWP and WPF. The matrix below shows which features are and aren't supported on UWP and WPF. Feel like implementing one of them? I'm taking PRs! ☺️

^* Limited shadow support available.