CODEWITHSUNDEEP
xamarinxamarin.forms
zen_1991
zen_1991

Reputation: 629

Xamarin Forms Sidebar

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.

Upvotes: 1

Views: 3195

Answers (2)

Sreeraj
Sreeraj

Reputation: 2434

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.
     }

Upvotes: 2

SushiHangover
SushiHangover

Reputation: 74209

Checkout SlideOverKit for Xamarin.Forms @

It allows menu slide outs, sliding panels, etc... from the top, bottom, left, right...

enter image description here

enter image description here

Upvotes: 2

Related Questions