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: