Sliding in and out using xamarin

Question

I am trying to implement this kind of design as shown in fig on my page, how can I achieve this in Xamarin.forms mainly in shared project. As I am trying to reduce the complexity by doing in platform specific.

I tried using this even https://github.com/XAM-Consulting/SlideOverKit . But the issue is I can't slide in the menu when its open (i.e after touching on page I want the menu to hide) but it doesn't happen. We need to manually drag that out to close it.

So please let me know how to achieve this.

Thanks

Answer 1

Based on your description, I modifed my code,there is a GIF

When you click the ImageButton, you should call this method this.HideMenu();

code of QuickInnerMenuPage

  public QuickInnerMenuPage()
    {
        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
              new Label(){Text="1222"}
            }
        };

        this.SlideMenu = new QuickInnerMenuView(MenuOrientation.RightToLeft);

        QuickInnerMenuView.ib.Clicked += (o, e) =>
        {

            this.HideMenu();
        };


    }
}

There is code of QuickInnerMenuView

    public class QuickInnerMenuView : SlideMenuView
{
    public static ImageButton ib;
    public QuickInnerMenuView (MenuOrientation orientation)
    {
         ib = new ImageButton
        {
            Source = "Happy.png",
            WidthRequest = 25,
            HeightRequest = 25,
        };

        var mainLayout = new StackLayout {
            Spacing = 15,
            Children = {
                ib,
                new ImageButton {
                    Source = "Home.png",
                    WidthRequest = 25,
                    HeightRequest = 25,
                },
                new ImageButton {
                    Source = "MessageFilled.png",
                    WidthRequest = 25,
                    HeightRequest = 25,
                },
                new ImageButton {
                    Source = "Settings.png",
                    WidthRequest = 25,
                    HeightRequest = 25,
                },
            }
        };
        // In this case the IsFullScreen must set false
        this.IsFullScreen = false;
        this.BackgroundViewColor = Color.Transparent;

        // You must set BackgroundColor, 
        // and you cannot put another layout with background color cover the whole View
        // otherwise, it cannot be dragged on Android
        this.BackgroundColor = Color.FromHex ("#C82630");
        this.MenuOrientations = orientation;
        if (orientation == MenuOrientation.BottomToTop) {
            mainLayout.Orientation = StackOrientation.Vertical;
            mainLayout.Children.Insert (0, new Image {
                Source = "DoubleUp.png",
                WidthRequest = 25,
                HeightRequest = 25,
            });
            mainLayout.Padding = new Thickness (0, 5);
            // In this case, you must set both WidthRequest and HeightRequest.
            this.WidthRequest = 50; 
            this.HeightRequest = 200;

            // A little bigger then DoubleUp.png image size, used for user drag it.
            this.DraggerButtonHeight = 30;

            // In this menu direction you must set LeftMargin.
            this.LeftMargin = 100;

        }

Answer 2

Do you add want to achieve it like following GIF.

If so,when you used SlideMenu, you should Create a new view that inherit's from MenuContainerPage like following code.Note:MenuContainerPage comes from SlideOverKit

    public class QuickInnerMenuPage: MenuContainerPage
{
    public QuickInnerMenuPage()
    {
        Content = new StackLayout
        {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Children = {
              new Label(){Text="1222"}
            }
        };

        this.SlideMenu = new QuickInnerMenuView(MenuOrientation.RightToLeft);
    }
}

Here is my demo.you could refer to it. https://github.com/851265601/SlideOverKitDemo