I am learning Xamarin at the moment and I need to implement master-detail page for an app. I found the official instructions online, downloaded sample code, and it has 2 folders: 1 with CS, another with XAML. After trying to replace those folders with ContentPage only, I get 2 ambiguity errors which confuses me. The question is: is it possible to do what I am trying to do, and what could I do? Thanks in advance. P.S. Link of the Master-Detail page: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/master-detail-page
This is the error I'm getting and how I am trying to make it
MainPage.xaml.cs:
using System;
using Xamarin.Forms;
namespace MyApp
{
public partial class MainPage : MasterDetailPage // added partial. What is partial anyway?
{
MasterPage masterPage; //what's dis
public MainPage()
{
var masterPage = new MasterPage(); // added var
//Master = masterPage;
Detail = new NavigationPage(new ContactsPage());
masterPage.ListView.ItemSelected += OnItemSelected;
if (Device.RuntimePlatform == Device.UWP)
{
MasterBehavior = MasterBehavior.Popover;
}
}
void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null)
{
Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
}
}
using System.Collections.Generic;
using Xamarin.Forms;
namespace MyApp
{
public partial class MasterPage : ContentPage
{
public ListView ListView { get { return listView; } }
ListView listView;
public MasterPage()
{
InitializeComponent();
var masterPageItems = new List<MasterPageItem>();
masterPageItems.Add(new MasterPageItem
{
Title = "Contacts",
IconSource = "contacts.png",
TargetType = typeof(ContactsPage)
});
masterPageItems.Add(new MasterPageItem
{
Title = "TodoList",
IconSource = "todo.png",
TargetType = typeof(TodoListPage)
});
masterPageItems.Add(new MasterPageItem
{
Title = "Reminders",
IconSource = "reminders.png",
TargetType = typeof(ReminderPage)
});
listView = new ListView
{
ItemsSource = masterPageItems,
ItemTemplate = new DataTemplate(() =>
{
var grid = new Grid { Padding = new Thickness(5, 10) };
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
var image = new Image();
image.SetBinding(Image.SourceProperty, "IconSource");
var label = new Label { VerticalOptions = LayoutOptions.FillAndExpand };
label.SetBinding(Label.TextProperty, "Title");
grid.Children.Add(image);
grid.Children.Add(label, 1, 0);
return new ViewCell { View = grid };
}),
SeparatorVisibility = SeparatorVisibility.None
};
Icon = "hamburger.png";
Title = "Personal Organiser";
Padding = new Thickness(0, 40, 0, 0);
Content = new StackLayout
{
Children = { listView }
};
}
}
}
MainPage.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
MasterPage.xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="using:MasterDetailPageNavigation"
x:Class="MyApp.MasterPage"
Padding="0,40,0,0"
Icon="hamburger.png"
Title="Personal Organiser">
<StackLayout>
<ListView x:Name="listView" x:FieldModifier="public">
<ListView.ItemsSource>
<x:Array Type="{x:Type local:MasterPageItem}">
<local:MasterPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
<local:MasterPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
<local:MasterPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
App.xaml.cs
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
namespace MyApp
{
public partial class App : Application
{
public App()
{
MainPage = new MyApp.MainPage();
}
protected override void OnStart()
{
// Handle when your app starts
}
protected override void OnSleep()
{
// Handle when your app sleeps
}
protected override void OnResume()
{
// Handle when your app resumes
}
}
}
P.S. Had to upload it as a CSS snippet, as code sample doesn't go really well. I hope it is ok. MasterPage should contain Links to ContacstsPage, ReminderPage and ToDoListPage. I can upload it, if necessary.
P.S. GitHub source. Maybe it'll help: https://github.com/EdgarKa/MasterDetailPage