Xamarin Master Details Page

How to Set Master Details Page in Xamarin Forms
-----------------------------------------------------------------------

Add 3 File in New Folder in Soultion

1.RootPage
2.SideMenuListview
3.SideMenu



1.RootPage
----------------------
public class RootPage : Xamarin.Forms.MasterDetailPage
    {
        public RootPage ()
        {
            var menuPage = new MenuPage ();

            menuPage.Menu.ItemSelected += (sender, e) => NavigateTo (e.SelectedItem as MenuItem);

            Master = menuPage;
            Detail = new NavigationPage (new ContractsPage ());
        }

        void NavigateTo (MenuItem menu)
        {
            Page displayPage = (Page)Activator.CreateInstance (menu.TargetType);

            Detail = new NavigationPage (displayPage);

            IsPresented = false;
        }
    }

------------------------
2.SideMenuListview
----------------------

namespace SideMenuPagePOC.MasterDetailsComponents
{
    public class SideMenuListView : ContentPage
    {
        public ListView Menu { get; set; }
        public SideMenuListView()
        {
            Icon = "settings.png";
            Title = "menu"; // The Title property must be set.
            BackgroundColor = Color.FromHex("333333");

            Menu = new MenuListView();

            var menuLabel = new ContentView
            {
                Padding = new Thickness(10, 36, 0, 5),
                Content = new Label
                {
                    TextColor = Color.FromHex("AAAAAA"),
                    Text = "MENU",
                }
            };

            var layout = new StackLayout
            {
                Spacing = 0,
                VerticalOptions = LayoutOptions.FillAndExpand
            };
            layout.Children.Add(menuLabel);
            layout.Children.Add(Menu);

            Content = layout;
        }
    }


    public class MenuListView : ListView
    {
        public MenuListView()
        {
            List<MenuItem> data = new SideMenu();
            ItemsSource = data;
            VerticalOptions = LayoutOptions.FillAndExpand;
            BackgroundColor = Color.Transparent;

            var cell = new DataTemplate(typeof(ImageCell));
            cell.SetBinding(TextCell.TextProperty, "Title");
            cell.SetBinding(ImageCell.ImageSourceProperty, "IconSource");

            ItemTemplate = cell;
            SelectedItem = data[0];
        }
    }



    public class MenuItem
    {
        public string Title { get; set; }

        public string IconSource { get; set; }

        public Type TargetType { get; set; }
    }
}



------------------------
3.SideMenu
----------------------

 public class SideMenu : List<MenuItem>
    {
        public SideMenu()
        {
            this.Add(new MenuItem()
            {
                Title = "Contracts",
                IconSource = "contacts.png",
                TargetType = typeof(Page1)
            });

            this.Add(new MenuItem()
            {
                Title = "Leads",
                IconSource = "leads.png",
                TargetType = typeof(Page2)
            });

            this.Add(new MenuItem()
            {
                Title = "Accounts",
                IconSource = "accounts.png",
                TargetType = typeof(Page3)
            });

            this.Add(new MenuItem()
            {
                Title = "Opportunities",
                IconSource = "opportunities.png",
                TargetType = typeof(Page4)
            });
        }
    }


-----------------------------------------------------------------------------
Add your Pages in SideMenu
Set Root Page in  App.xaml.cs as MainPage

Comments

Popular posts from this blog

Drawer Navigation with Custom Side Menu — React Native

SideMenu React native

Button click event with current object from listview having button