Q: How to use Master Detail Page in Xamarin Forms.
3. Create a MenuPage like below
public class MenuPage : ContentPage
{
public ListView Menu { get; set; }
public MenuPage()
{
Icon = "settings.png";
Title = "Menu"; // The Title property must be set.
BackgroundColor = Color.FromHex("333333");
Menu = new MenuListView();
var layout = new StackLayout
{
Spacing = 0,
VerticalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(Menu);
Content = layout;
}
}
4. Create the "ManuItem" class, like below
public class MenuItem {
public string Title { get; set; }
public string IconSource { get; set; }
public Type TargetType { get; set; }
}
5. Create a class inheritance listview, like below
public class MenuListView : ListView
{
public MenuListView()
{
List<MenuItem> data = new MenuListData();
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 MenuListData : List<MenuItem>
{
public MenuListData()
{
this.Add(new MenuItem()
{
Title = "Home",
TargetType = typeof(HomePage)
});
this.Add(new MenuItem()
{
Title = "About Us",
TargetType = typeof(AboutUsPage)
});
}
}
6. Create the content pages according to your requirement.
public class HomePage : ContentPage
{
public HomePage()
{
BackgroundColor = Color.Yellow;
Title = "Home Page";
Content = new Label
{
Text = "Home Page!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
}
}
public class AboutUsPage : ContentPage
{
public AboutUsPage()
{
BackgroundColor = Color.Green;
Title = "AboutUs Page";
Content = new Label
{
Text = "About Us Page!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
}
}
7. Output
Ans:
1. Create a Mobile Project using "Visual Studio" or "Xamarin Studio".
2. Create a page in shared section and type the code below.
public class MainPage : MasterDetailPage
{
public MainPage()
{
var menuPage = new MenuPage();
menuPage.Menu.ItemSelected += (sender, e) => NavigateToPage(e.SelectedItem as MenuItem);
Master = menuPage;
Detail = new NavigationPage(new HomePage());
}
void NavigateToPage(MenuItem menu)
{
Page displayPage = (Page)Activator.CreateInstance(menu.TargetType);
Detail = new NavigationPage(displayPage);
IsPresented = false;
}
}
public class MenuPage : ContentPage
{
public ListView Menu { get; set; }
public MenuPage()
{
Icon = "settings.png";
Title = "Menu"; // The Title property must be set.
BackgroundColor = Color.FromHex("333333");
Menu = new MenuListView();
var layout = new StackLayout
{
Spacing = 0,
VerticalOptions = LayoutOptions.FillAndExpand
};
layout.Children.Add(Menu);
Content = layout;
}
}
4. Create the "ManuItem" class, like below
public class MenuItem {
public string Title { get; set; }
public string IconSource { get; set; }
public Type TargetType { get; set; }
}
5. Create a class inheritance listview, like below
public class MenuListView : ListView
{
public MenuListView()
{
List<MenuItem> data = new MenuListData();
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 MenuListData : List<MenuItem>
{
public MenuListData()
{
this.Add(new MenuItem()
{
Title = "Home",
TargetType = typeof(HomePage)
});
this.Add(new MenuItem()
{
Title = "About Us",
TargetType = typeof(AboutUsPage)
});
}
}
6. Create the content pages according to your requirement.
public class HomePage : ContentPage
{
public HomePage()
{
BackgroundColor = Color.Yellow;
Title = "Home Page";
Content = new Label
{
Text = "Home Page!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
}
}
public class AboutUsPage : ContentPage
{
public AboutUsPage()
{
BackgroundColor = Color.Green;
Title = "AboutUs Page";
Content = new Label
{
Text = "About Us Page!",
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
};
}
}
7. Output