An extended ContentView for Xamarin.Forms with rounded corners, borders, shadows and more!
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:
- Right-click on the solution name in
Solution Explorer
to open the context menu and then pressManage NuGet Packages for Solution...
- Select the
Browse
tab and search forXamarin.Forms.PancakeView
by Steven Thewissen. - Select all projects (right side) and press
Install
. - If the installation is successful, you should see something like
Successfully installed 'Xamarin.Forms.PancakeView'
inOutput
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"
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>
The result looks like this:
Top comments (1)
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