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
-----------------------------------------------------------------------
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
Post a Comment