Xamarin Forms Pages MasterDetailPage FlyoutPage Step by step Implementation and Top 10 Questions and Answers
 Last Update: April 01, 2025      16 mins read      Difficulty-Level: beginner

Xamarin.Forms Pages: MasterDetailPage and FlyoutPage

Xamarin.Forms is a powerful framework that enables developers to build native user interfaces for iOS, Android, and UWP applications using C#. Within Xamarin.Forms, Pages are the building blocks for user interfaces. Two specific kinds of Pages that are particularly useful for creating navigation interfaces in mobile applications are MasterDetailPage and FlyoutPage. These pages provide a hierarchical navigation scheme by maintaining a primary screen (or Master) and a secondary screen (or Detail/Flyout) that can be toggled to display additional data or options.

Overview

Both MasterDetailPage and FlyoutPage cater to similar use cases, such as navigating a main menu to additional content. The main difference lies in their appearance and behavior on various devices, especially in response to different screen sizes.

MasterDetailPage

The MasterDetailPage is a type of Page that allows you to create a navigation pattern with two main components: a master page and a detail page.

  • Master Page: This is the first, or "master", page in the hierarchy which is usually a ContentPage or a ListView. It typically contains menu items or navigation links.

  • Detail Page: This is the second, or "detail", page in the hierarchy. When a user selects an item in the Master Page, the Detail Page is changed to reflect the user's selection.

Usage:

public class MasterDetailExample : MasterDetailPage
{
    public MasterDetailExample()
    {
        var masterPage = new ContentPage
        {
            Title = "Menu",
            Content = new StackLayout
            {
                Children = {
                    new Label { Text = "Option 1" },
                    new Label { Text = "Option 2" }
                }
            }
        };

        var detailPage = new NavigationPage(new ContentPage
        {
            Title = "Home",
            Content = new Label { Text = "Select an option from the menu" }
        });

        Master = masterPage;
        Detail = detailPage;
    }
}

Advantages:

  • Responsive Design: Automatically adjusts its layout depending on the device’s screen size. On smaller screens, the Detail page covers the Master page.
  • Simple Structure: Easy to implement and understand due to its straightforward structure.
  • Cross-Platform: Works consistently across iOS, Android, and UWP.

Limitations:

  • Legacy: Considered somewhat outdated compared to modern alternatives like FlyoutPage.
  • Limited Customization: Offers fewer customization options as compared to other layout mechanisms.

FlyoutPage

The FlyoutPage is another type of Page that provides a flyout menu that can be used for navigation. Introduced in Xamarin.Forms 4.0, FlyoutPage replaces MasterDetailPage as the preferred choice for such navigation schemes.

Structure:

  • Flyout Layout: This is the primary layout that users can slide out or tap to open. Typically contains navigation items.
  • Detail Layout: This is the secondary layout that users interact with most of the time. Content is displayed here based on the user's selection from the flyout menu.

Usage:

public class FlyoutPageExample : FlyoutPage
{
    public FlyoutPageExample()
    {
        Flyout = new FlyoutMenuPage();
        Detail = new NavigationPage(new MainPage());
    }
}

public class FlyoutMenuPage : ContentPage
{
    public FlyoutMenuPage()
    {
        Title = "Menu";
        Content = new StackLayout
        {
            Children = {
                new Label { Text = "Option 1" },
                new Label { Text = "Option 2" }
            }
        };
    }
}

Advantages:

  • Modern Design: Aligns more closely with modern mobile UI guidelines.
  • Customization: Offers greater control over styling and behavior via various properties and event handlers.
  • Consistency: Provides a consistent user experience across platforms, adhering more closely to native guidelines compared to MasterDetailPage.

Limitations:

  • Newer Feature: Requires Xamarin.Forms 4.0 or later, meaning some legacy projects may need upgrading.

Comparison Table

| Feature | MasterDetailPage | FlyoutPage | |--------------------------|--------------------------------------------------------|--------------------------------------------------------| | Structure | Master (primary), Detail (secondary) | Flyout (primary), Detail (secondary) | | Responsiveness | Automatically adjusts layout based on screen size | Automatically adjusts layout based on screen size | | Customization | Limited | High | | Modern Design | Legacy approach | More modern, adheres to native guidelines | | Platform Support | Consistent across iOS, Android, UWP | Consistent across iOS, Android, UWP | | Introduction | Available from Xamarin.Forms 1.0 | Introduced in Xamarin.Forms 4.0 | | Best Use Case | Simple, straightforward navigation | More complex, customizable navigation |

Conclusion

While MasterDetailPage remains a valid option for simpler, straightforward navigation schemes in legacy applications, FlyoutPage is the recommended choice for newer applications due to its enhanced flexibility, better alignment with modern UI standards, and advanced customization features. Understanding the appropriate use case for each type of Page will help you design better and more adaptive mobile applications with Xamarin.Forms.

Certainly! Below is a structured, step-by-step guide to help beginners understand how to set up, route, and run applications using the MasterDetailPage and FlyoutPage in Xamarin.Forms. We'll also cover the data flow involved in these scenarios.

Step 1: Setting Up Your Xamarin.Forms Project

  1. Create a New Project:

    • Open Visual Studio.
    • Go to File > New > Project.
    • Select Mobile App (Xamarin.Forms).
    • Name your project and choose a location.
    • Select the template Blank and ensure .NET Standard is chosen for code sharing.

  2. Add the Necessary Packages:

    • Right-click on the solution, then Manage NuGet Packages for Solution.
    • Ensure Xamarin.Forms is up to date. Add or update it if necessary.

Step 2: Creating a MasterDetailPage

  1. Create Master Page:

    • Add a new ContentPage named MasterPage.xaml.
    • Define the UI elements here, e.g., ListView for selecting different details.
    <!-- MasterPage.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.MasterPage">
    <StackLayout Padding="15">
        <Label Text="Menu" FontSize="26" HorizontalOptions="Center"/>
        <ListView x:Name="MenuListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

    // MasterPage.xaml.cs
public partial class MasterPage : ContentPage
{
    public ListView MenuListView { get { return menuListView; } }

    public MasterPage()
    {
        InitializeComponent();
        MenuListView.ItemsSource = new[]
        {
            new { Title = "Home", TargetType = typeof(HomePage) },
            new { Title = "Profile", TargetType = typeof(ProfilePage) }
        };
    }
}

  2. Create Detail Pages:

    • Add new ContentPage items such as HomePage.xaml and ProfilePage.xaml.
    • Define their respective UI elements.

  3. Set Up MasterDetailPage:

    • Create a new MasterDetailPage named MainPage.xaml.
    <!-- MainPage.xaml -->
<MasterDetailPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:local="clr-namespace:YourApp"
                  x:Class="YourApp.MainPage">
    <MasterDetailPage.Master>
        <local:MasterPage x:Name="masterPage" />
    </MasterDetailPage.Master>
    <MasterDetailPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:HomePage />
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>

Step 3: Creating a FlyoutPage (Equivalent in .NET MAUI)

  1. Create Flyout Page:

    • FlyoutPage is more commonly used in .NET MAUI. If you are using .NET MAUI instead of Xamarin.Forms, you can set up a FlyoutPage as follows.
    • Add a FlyoutPage named AppFlyoutPage.xaml.
    <!-- AppFlyoutPage.xaml -->
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:YourApp"
            x:Class="YourApp.AppFlyoutPage">
    <FlyoutPage.Flyout>
        <ShellContent ContentTemplate="{DataTemplate local:FlyoutPageContent}" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:HomePage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

  2. Create Flyout Content:

    • Create a ContentPage named FlyoutPageContent.xaml.
    <!-- FlyoutPageContent.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.FlyoutPageContent">
    <StackLayout Padding="15">
        <Label Text="Menu" FontSize="26" HorizontalOptions="Center"/>
        <ListView x:Name="MenuListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Title}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

    // FlyoutPageContent.xaml.cs
public partial class FlyoutPageContent : ContentPage
{
    public ListView MenuListView { get { return menuListView; } }

    public FlyoutPageContent()
    {
        InitializeComponent();
        MenuListView.ItemsSource = new[]
        {
            new { Title = "Home", TargetType = typeof(HomePage) },
            new { Title = "Profile", TargetType = typeof(ProfilePage) }
        };
    }
}

Step 4: Navigating and Data Flow

  1. Set Up Navigation Logic:

    • Handle the ItemTapped event of the ListView to navigate between pages.
    // MasterPage.xaml.cs
public partial class MasterPage : ContentPage
{
    public MasterPage()
    {
        InitializeComponent();
        menuListView.ItemTapped += OnMenuItemSelected;
        MenuListView.ItemsSource = new[]
        {
            new { Title = "Home", TargetType = typeof(HomePage) },
            new { Title = "Profile", TargetType = typeof(ProfilePage) }
        };
    }

    private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var item = e.SelectedItem as MenuItem;
        if (item != null)
        {
            var page = (Page)Activator.CreateInstance(item.TargetType);
            ((MasterDetailView)Parent).Detail = new NavigationPage(page);
        }
    }
}

  2. Pass Data Between Pages:

    • Use constructors or dependency injection to pass data between pages.
    public class HomePage : ContentPage
{
    public HomePage(string message)
    {
        InitializeComponent();
        // Use the message
    }
}

// Usage in navigation
var homePage = new HomePage("Hello from Master!");
Detail = new NavigationPage(homePage);

Step 5: Running the Application

  1. Set Up the Main Page:

    • Open App.xaml.cs and set the main page.
    // App.xaml.cs
public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new MainPage();
    }
}

  2. Build and Run:

    • Select a platform to run, e.g., Android or iOS by selecting the corresponding simulator or device.
    • Click on the run button in Visual Studio.

Conclusion

By following these steps, you can create a multi-page application using MasterDetailPage and FlyoutPage in Xamarin.Forms (or .NET MAUI). Managing navigation between pages and passing data is fundamental for building dynamic applications. As you become more comfortable, you can explore more advanced features in Xamarin.Forms for a richer user experience.

Top 10 Questions and Answers about Xamarin.Forms Pages: MasterDetailPage and FlyoutPage

Navigating through Xamarin.Forms can be overwhelming, especially with different types of pages like MasterDetailPage and FlyoutPage. Here are ten frequently asked questions to help you understand and implement these pages effectively.

1. What is a MasterDetailPage in Xamarin.Forms?

A MasterDetailPage in Xamarin.Forms is a navigation pattern where the UI consists of two pages: a master page and a detail page. The master page typically contains a menu of choices, and the detail page displays the content related to the selected menu item.

Sample Code:

public class MainPage : MasterDetailPage
{
    public MainPage()
    {
        Master = new ContentPage 
        { 
            Title = "Menu",
            Content = new StackLayout { 
                Children = { 
                    new Button { Text = "Page 1", Command = new Command(() => Detail = new NavigationPage(new Page1())) },
                    new Button { Text = "Page 2", Command = new Command(() => Detail = new NavigationPage(new Page2()))) 
                } 
            } 
        };

        Detail = new NavigationPage(new Page1());  
    }
}

2. What is a FlyoutPage in Xamarin.Forms?

The FlyoutPage in Xamarin.Forms replaces the MasterDetailPage and provides more customization options. The FlyoutPage consists of a flyout page (menu) and a detail page (content). Unlike the MasterDetailPage, FlyoutPage allows for more flexible layouts.

Sample Code:

public class MainPage : FlyoutPage
{
    public MainPage()
    {
        Flyout = new MenuPage();
        Detail = new NavigationPage(new Page1());
    }
}

public class MenuPage : ContentPage
{
    public MenuPage()
    {
        Content = new StackLayout
        {
            Children = {
                new Button { Text = "Page 1", Command = new Command(() => App.Current.MainPage = new FlyoutPage { Flyout = this, Detail = new NavigationPage(new Page1()) }) },
                new Button { Text = "Page 2", Command = new Command(() => App.Current.MainPage = new FlyoutPage { Flyout = this, Detail = new NavigationPage(new Page2()) }) }
            }
        };
    }
}

3. How do I change the detail page in a MasterDetailPage or FlyoutPage?

Changing the detail page is straightforward in both MasterDetailPage and FlyoutPage.

For MasterDetailPage:

Detail = new NavigationPage(new Page2());

For FlyoutPage:

Detail = new NavigationPage(newPage2());

4. How can I customize the appearance of the flyout (menu) in a FlyoutPage?

You can fully customize the flyout page by creating a custom FlyoutPage and setting its properties.

Sample Code:

public class CustomFlyoutPage : FlyoutPage
{
    public CustomFlyoutPage()
    {
        Flyout = new CustomFlyout();
        Detail = new NavigationPage(new Page1());
    }
}

public class CustomFlyout : ContentPage
{
    public CustomFlyout()
    {
        Title = "Custom Flyout";
        BackgroundColor = Color.Gray;
        Content = new ScrollView
        {
            Content = new StackLayout
            {
                Children = {
                    new Label { Text = "Welcome" },
                    new Button { Text = "Page 1", Command = new Command(() => App.Current.MainPage = new CustomFlyoutPage { Detail = new NavigationPage(new Page1()) }) },
                    new Button { Text = "Page 2", Command = new Command(() => App.Current.MainPage = new CustomFlyoutPage { Detail = new NavigationPage(new Page2()) }) }
                }
            }
        };
    }
}

5. How do I use gestures to toggle the flyout (menu) in a FlyoutPage?

FlyoutPage automatically comes with built-in gesture support to open and close the flyout (menu).

Sample Code:

FlyoutBehavior = FlyoutBehavior.Flyout;

This property can be set to Flyout, Disabled, or Locked.

6. Is it possible to use a FlyoutPage in Xamarin.Forms for both iOS and Android?

Yes, FlyoutPage is cross-platform and works on both iOS and Android, giving developers a consistent user interface across platforms.

7. What are the advantages of using FlyoutPage over MasterDetailPage?

FlyoutPage offers the following advantages over MasterDetailPage:

  • More customizable layout.
  • Better support for modern UX patterns.
  • Enhanced gesture support (e.g., swiping to open the menu).
  • Built-in animation support for transitions.

8. How can I handle back button behavior in a FlyoutPage?

Handling the back button can be tricky in a FlyoutPage because pressing the back button may either close the app or go back to the previous detail page. It's essential to manage this behavior by overriding the OnBackButtonPressed method.

Sample Code:

public bool OnBackButtonPressed()
{
    if (FlyoutIsPresented)
    {
        IsPresented = false;
        return true;
    }
    return base.OnBackButtonPressed();
}

9. Can I use MasterDetailPage or FlyoutPage with other navigation patterns in Xamarin.Forms?

Yes, you can nest MasterDetailPage or FlyoutPage with other navigation patterns like NavigationPage or TabbedPage.

Sample Code:

public class MainPage : MasterDetailPage
{
    public MainPage()
    {
        Master = new ContentPage
        {
            Title = "Menu",
            Content = new StackLayout
            {
                Children = {
                    new Button { Text = "Page 1", Command = new Command(() => Detail = new NavigationPage(new TabbedPageWithMasterDetail())) },
                    new Button { Text = "Page 2", Command = new Command(() => Detail = new NavigationPage(new Page2()))) }
                }
            }
        };

        Detail = new NavigationPage(new Page1());
    }
}

public class TabbedPageWithMasterDetail : TabbedPage
{
    public TabbedPageWithMasterDetail()
    {
        Children.Add(new Page1 { Title = "Tab 1" });
        Children.Add(new Page2 { Title = "Tab 2" });
    }
}

10. What are the performance implications when using MasterDetailPage or FlyoutPage?

While both MasterDetailPage and FlyoutPage have been optimized for performance, FlyoutPage offers better performance due to its modern and more flexible architecture. However, performance heavily depends on the application's complexity and the developer's implementation.

In conclusion, while both MasterDetailPage and FlyoutPage serve important roles in creating navigation-heavy Xamarin.Forms applications, FlyoutPage provides more modern and flexible options, aligning with current user interface trends. Properly managing these pages will help in creating a seamless and responsive application.