An extended ContentView for Xamarin.Forms with rounded corners, borders, shadows and more!
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
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 Explorerto open the context menu and then press
Manage NuGet Packages for Solution...
- Select the
Browsetab and search for
Xamarin.Forms.PancakeViewby Steven Thewissen.
- Select all projects (right side) and press
- If the installation is successful, you should see something like
Successfully installed 'Xamarin.Forms.PancakeView'in
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
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)
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