Xamarin Master-Detail Interface

The Master-Detail Interface is a design pattern that provides a consistent way to navigate and display a list of items and their details. Xamarin provides a built-in feature to implement this design pattern, which can be used to create master-detail interfaces in a Xamarin.Forms application.

Syntax

The Master-Detail interface can be created using the MasterDetailPage class in Xamarin.Forms. The MasterDetailPage class contains two pages, the Master page and the Detail page.

public class MasterDetailPage : Xamarin.Forms.ContentPage
{
    public Page Master { get; set; }
    public Page Detail { get; set; }
    // Other properties and methods
}

To set the Master and Detail pages, simply assign the corresponding page to the Master and Detail properties.

var masterDetailPage = new MasterDetailPage();
masterDetailPage.Master = new MyMasterPage();
masterDetailPage.Detail = new MyDetailPage();

Example

Let's create a simple Master-Detail interface with a list of items and their details.

Step 1: Create a new Xamarin.Forms project.

Step 2: Create a new MasterDetailPage page.

using Xamarin.Forms;

namespace MyApp
{
    public partial class MyMasterDetailPage : MasterDetailPage
    {
        public MyMasterDetailPage()
        {
            InitializeComponent();

            Master = new MyMasterPage();
            Detail = new MyDetailPage();
        }
    }
}

Step 3: Create a new Master and Detail pages.

using Xamarin.Forms;

namespace MyApp
{
    public partial class MyMasterPage : ContentPage
    {
        public MyMasterPage()
        {
            InitializeComponent();

            var listView = new ListView
            {
                ItemsSource = new[] { "Item 1", "Item 2", "Item 3" }
            };

            listView.ItemSelected += (sender, e) =>
            {
                Detail = new MyDetailPage(e.SelectedItem.ToString());
                IsPresented = false;
            };

            Content = listView;
        }
    }
}

using Xamarin.Forms;

namespace MyApp
{
    public partial class MyDetailPage : ContentPage
    {
        public MyDetailPage(string item)
        {
            InitializeComponent();

            var label = new Label
            {
                Text = $"You selected {item}",
                HorizontalOptions = LayoutOptions.Center,
                VerticalOptions = LayoutOptions.Center
            };

            Content = label;
        }
    }
}

Step 4: Launch the MyMasterDetailPage.

using Xamarin.Forms;

namespace MyApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new MyMasterDetailPage();
        }
    }
}

Output

The above example will display a list of items on the Master page. When an item is selected, the Detail page will change and display the corresponding message.

Explanation

The MasterDetailPage is a XAML page that consists of two sections, the Master section and the Detail section. The Master section is typically a list of items while the Detail section displays the details of the selected item. When an item is selected in the Master section, the corresponding details are displayed in the Detail section.

In the example above, we created a MyMasterDetailPage that contains a MyMasterPage as the Master section and a MyDetailPage as the Detail section. The MyMasterPage contains a ListView that displays a list of items. When an item is selected, we set the Detail page to a new instance of the MyDetailPage and pass the selected item as a constructor parameter.

Use

The Master-Detail interface is commonly used in mobile applications to display a list of items and their details. It provides a consistent way to navigate through the application and provides a better user experience.

Important Points

• The Master and Detail pages can be any Xamarin.Forms page.
• The Master page should contain a list of items.
• When an item is selected in the Master page, the corresponding details should be displayed in the Detail page.
• The Detail page can be replaced dynamically based on the user's selection.

Summary

The Master-Detail interface is a common design pattern used in mobile applications to display a list of items and their details. Xamarin provides a built-in feature to implement this design pattern, the MasterDetailPage class. The MasterDetailPage contains two sections, the Master section and the Detail section, which can be any Xamarin.Forms page. The Master section typically displays a list of items, and the Detail section displays the corresponding item details when an item is selected in the Master section.