DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

PeterMilovcik
PeterMilovcik

Posted on

Xamarin.Forms - How to Use PancakeView

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

PancakeVIew

Source: https://github.com/sthewissen/Xamarin.Forms.PancakeView

Let's try to add it to our Xamarin.Forms application. An example is created using Blank Template, but it can be used in an application created with any other template as well.

Add NuGet Package

To use this PancakeView you need to add a reference to NuGet package called
Xamarin.Forms.PancakeView.

There are multiple ways on how to install some NuGet package, here is one way how to do it:

  1. Right-click on the solution name in Solution Explorer to open the context menu and then press Manage NuGet Packages for Solution...
  2. Select the Browse tab and search for Xamarin.Forms.PancakeView by Steven Thewissen.
  3. Select all projects (right side) and press Install.
  4. If the installation is successful, you should see something like Successfully installed 'Xamarin.Forms.PancakeView' in Output window.

Add Namespace in XAML

Once you reference PancakeView reference in your projects, you have to add a namespace in your XAML file.
Open XAML where you would like to use it and add

xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
Enter fullscreen mode Exit fullscreen mode

Use it in XAML

Here is example how it can be used:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="PancakeView.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
    mc:Ignorable="d">
    <StackLayout>
        <yummy:PancakeView
            Margin="16"
            BackgroundGradientAngle="45"
            BackgroundGradientEndColor="Azure"
            BackgroundGradientStartColor="LightSkyBlue"
            CornerRadius="32,0,0,32"
            HasShadow="True"
            HeightRequest="100"
            VerticalOptions="CenterAndExpand">
            <Label
                Margin="16,0"
                FontSize="50"
                Text="PancakeView"
                VerticalOptions="Center" />
        </yummy:PancakeView>
    </StackLayout>
</ContentPage>
Enter fullscreen mode Exit fullscreen mode

The result looks like this:

PancakeView

Top comments (1)

Collapse
 
christophe06410 profile image
Christophe06410

Hi Peter,

I love your control. This is very useful, thank you!
Recently, I stumbled upon an issue while trying to adapt a Xamarin form app to different screen sizes.
I use a custom ViewBox implementation that is greatly inspired from the WPF ViewBox.
Under the hood, it computes a scale factor and applies it to the inner controls.
It works great except for the PancakeView control (and regular button as well by the way).
Basically, the inner control is displayed only in half width and half height at top left corner (inside PancakeView).
Did you get a similar issue in the past?

Thanks for your help
Christophe

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.