Sliding in and out using xamarin - xaml

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