Hello, I am trying to use the Xam slideOverKit. I've got my first pull up menu working, but I'm wanting to add another menu to the same page. I'm having an issue where the ShowMenuAction?.Invoke() and the HideMenuAction?.Invoke() target is still the Pull up menu instead of the second menu I created (a right to left menu). I'm new to Xamarin and C#. All of the menus are working correctly on their own on separate pages, but I don't know how to use them together...
public partial class MainActivityPage : ContentPage, IMenuContainerPage
{
/*
* Doing IMenuContainerPage stuff
*/
public Action HideMenuAction
{
get;
set;
}
public Action ShowMenuAction
{
get;
set;
}
public SlideMenuView SlideMenu
{
get;
set;
}
public SlideMenuView RightSlideMenu
{
get;
set;
}
/*
called when a button is clicked-works to pull up bottomMenu
*/
void rise(object sender, EventArgs args)
{
if (this.SlideMenu.IsShown)
{
HideMenuAction?.Invoke();
}
else
{
ShowMenuAction?.Invoke();
}
}
/*
public SlideUpLoggingView loggingMenu;
public SlideRightFilterView filterMenu;
public MainActivityPage()
{
InitializeComponent();
}
public MainActivityPage(object deviceInput)
{
InitializeComponent();
loggingMenu = new SlideUpLoggingView();
filterMenu = new SlideRightFilterView();
this.SlideMenu = loggingMenu;
filterMenu = new SlideRightFilterView();
this.RightSlideMenu = filterMenu;
MessagingCenter.Subscribe<MainActivityPage>(this, "OpenFilter", (sender) => {
/*
* I tried changing the this.SlideMenu to filterMenu (the rightMenu) but this still didn't work...
*/
//this.SlideMenu = filterMenu;
if (this.RightSlideMenu.IsShown)
{
HideMenuAction?.Invoke();
}
else
/*
*Action is still called on the bottom menu (not rightMenu)
*/
ShowMenuAction?.Invoke();
}
});
}
Hello @Unicorn7 ,
well for the absolute layout you can use the tutorials provided by Xamarin API.
The idea is to create :
Absolute
StackLayout or Grid or other components --> page content
StackLayout or Grid or other components --> Menu from left to right
Here you can find all you need for this kind of layout structure:
https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/
You have to animate the second panel in order to have the desired effect.
I played a little bit with visibility, animations and positions.
An example is this:
await this.bottomMenu.TranslateTo(0, 360, 1, Easing.Linear); --> at first : i move the invisible panel "under" the screen
this.bottomMenu.IsVisible = true; --> set it to visible
await this.bottomMenu.TranslateTo(0, 0, 250, Easing.CubicIn); --> animate to show it from bottom to top moving it into the screen.
This is only an example, i don't know if it's a good approach, I think that it's a good starting point and from that it's possible to optimize that effect.
The most relevant thing is that this animation is cross platform, so i obtain the same effect in iOS and Android.
Hope it helps,
Best Regards
Answers
Hello,
i tried to do the same thing.
Looking into the web i found this:
https://github.com/XAM-Consulting/SlideOverKit/issues/21
I resolved this problem, wrapping all the contents of the page into an absolute layout and then I create an user control, very similar to slideOverKit.
For example:
--> page contents
--> user control container
Hope it helps,
Best Regards,
Mattia
@MattiaSantangelo
Thank you so much for the response. I'm really new to xamarin, so do you have any example code of how you resolved the issue? Or at least relevant tutorials or walkthroughs online? This sounds exactly like what I might need.
Thank you once again!
Best Regards,
Katie
Hello @Unicorn7 ,
well for the absolute layout you can use the tutorials provided by Xamarin API.
The idea is to create :
Absolute
StackLayout or Grid or other components --> page content
StackLayout or Grid or other components --> Menu from left to right
Here you can find all you need for this kind of layout structure:
https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/absolute-layout/
You have to animate the second panel in order to have the desired effect.
I played a little bit with visibility, animations and positions.
An example is this:
await this.bottomMenu.TranslateTo(0, 360, 1, Easing.Linear); --> at first : i move the invisible panel "under" the screen
this.bottomMenu.IsVisible = true; --> set it to visible
await this.bottomMenu.TranslateTo(0, 0, 250, Easing.CubicIn); --> animate to show it from bottom to top moving it into the screen.
This is only an example, i don't know if it's a good approach, I think that it's a good starting point and from that it's possible to optimize that effect.
The most relevant thing is that this animation is cross platform, so i obtain the same effect in iOS and Android.
Hope it helps,
Best Regards