How to create a Custom Drawer in Xamarin forms?

Question

How to create a custom drawer with slide down animation in xamarin forms using content view or any other views

without using any paid controls,how to create this?

Answer 1

I have created something similar to this. This works in both android and iOS.

Step 1: Add a stack layout which is having Aqua color as it background color and 2 labels within it.

  <StackLayout x:Name="stackLayout" Margin="0,0,0,0" WidthRequest="0" HeightRequest="0" Orientation="Vertical" BackgroundColor="Aqua">
                <Label Text="Welcome" 
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand" />
                <Label Text=" Xamarin.Forms!" 
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand" />
            </StackLayout>

Step 2: On click of Refine Button I am animating this stack layout's height. When the stack layout's height is 0 I am animating it to 200. When the stack layout's height is 200 I am animating it to 0.

   private void OnNextButtonClicked(object sender, EventArgs e)
            {
                if (stackLayout.Height == 0)
                {
                    Action<double> callback = input => stackLayout.HeightRequest = input;
                    double startingHeight = 0;
                    double endingHeight = 200;
                    uint rate = 16;
                    uint length = 3000;
                    Easing easing = Easing.CubicOut;
                    stackLayout.Animate("invis", callback, startingHeight, endingHeight, rate, length, easing);
                }
                else
               {
                    Action<double> callback = input => stackLayout.HeightRequest = input;
                    double startingHeight = 200;
                    double endingHeight = 0;
                    uint rate = 16;
                    uint length = 3000;
                    Easing easing = Easing.CubicIn;
                    stackLayout.Animate("inviss", callback, startingHeight, endingHeight, rate, length, easing);

                }
            }

You can see the complete files here

Answer 2

We solved this with the use of Rg.Plugins.Popup. Using this plugin you can create a separate page which represents the drawer. This makes it easy to reuse it throughout your app.

Below is a sample which lets the drawer fly in from the right. Note that the translucent background and the padding makes the lower page partly visible.

<?xml version="1.0" encoding="UTF-8" ?>
<pages:PopupPage
    x:Class="MyNameSpace.ContextMenuPopup"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
    xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
    BackgroundColor="{StaticResource Colors.TransparentMediumGray}"
    Padding="113,0,0,0"
    HasSystemPadding="False">
    <pages:PopupPage.Animation>
        <animations:MoveAnimation
            DurationIn="200"
            DurationOut="100"
            EasingIn="SinOut"
            EasingOut="SinIn"
            HasBackgroundAnimation="True"
            PositionIn="Right"
            PositionOut="Right" />
    </pages:PopupPage.Animation>
    <ContentPage.Content>
        ...
    </ContentPage.Content>
</pages:PopupPage>

In the screenshot below the drawer in action. Note the cool feature: the drawer is visible in the system area as well.