Xamarin Forms Sidebar - xamarin

Question

I have created a basic Master Detail navigation by following the following code:
https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/
I want to be able to make a clickable section on my sidebar which will take the user to their profile page. Similar to googles sidebar: https://github.com/jamesmontemagno/Xam.NavDrawer
Where can i find some tutorials on how i would do that? They would click on their name/profile picture and that would take them to their profile page.

Answer 1

Checkout SlideOverKit for Xamarin.Forms #
https://github.com/XAM-Consulting/SlideOverKit
It allows menu slide outs, sliding panels, etc... from the top, bottom, left, right...

Answer 2

Here is an example of navigating to another page on click of an image in MasterPage. This is the XAML of the Image in MasterPage.
<Image
x:Name="profileImage"
HeightRequest="100"
WidthRequest="100"
HorizontalOptions="Center"/>
We will add a TapGestureRecogniser to the Image and then invoke an Event defined in MasterPage.
public partial class MenuPage : ContentPage
{
public event EventHandler MenuTapped;
public MenuPage ()
{
InitializeComponent ();
TapGestureRecognizer imageViewTap = new TapGestureRecognizer ();
imageViewTap.Tapped+= ImageViewTap_Tapped;
profileImage.GestureRecognizers.Add (imageViewTap);
}
async void ImageViewTap_Tapped (object sender, EventArgs e)
{
if (MenuTapped != null)
MenuTapped (this,EventArgs.Empty);
}
}
We can listen to the event invoked from MasterPage in the MasterDetailPage and navigate to Profile page.
public class DashboardPage : MasterDetailPage
{
DetailPage detailPage;
MenuPage masterPage;
public DashboardPage ()
{
detailPage = new DetailPage ();
var detailNavigationPage=new NavigationPage(detailPage);
Detail = detailNavigationPage;
masterPage= new MenuPage(){Title="Menu",Icon="ic_menuIcon.png"};
Master = masterPage;
masterPage.MenuTapped+= MasterPage_MenuTapped;
}
async void MasterPage_MenuTapped (object sender, EventArgs e)
{
Detail=new new NavigationPage(new ProfilePage());// If you want to load profile page as `DetailPage`
await Navigation.PushModalAsync(new ProfilePage)// If you want to load profile page as another page modally.
}