.Net Maui Page Types Tabbedpage Flyoutpage Complete Guide

Step-by-Step Guide: Creating a TabbedPage in .NET MAUI

Prerequisites

• .NET 7 SDK installed
• Visual Studio (2022 recommended) with .NET MAUI workload

Step 1: Create a New .NET MAUI Project

1. Open Visual Studio.
2. Select "Create a new project".
3. Search for "MAUI" and select the ".NET MAUI App" template.
4. Click "Next".
5. Configure your project with the desired name, location, and solution name.
6. Click "Create".

Step 2: Create Individual Content Pages

You need at least two content pages to add to the TabbedPage.

1. Right-click on the Pages folder (or the project root) in Solution Explorer.
2. Select "Add" > "New Item".
3. Choose "Content Page" and name it HomePage.xaml.
4. Repeat the above steps to create another content page; name it SettingsPage.xaml.

Example: HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.Pages.HomePage"
             Title="Home">
    <StackLayout>
        <Label Text="Welcome to the Home Page!"
               FontSize="Large"
               VerticalOptions="Center"
               HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

Example: SettingsPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.Pages.SettingsPage"
             Title="Settings">
    <StackLayout>
        <Label Text="This is the Settings Page!"
               FontSize="Large"
               VerticalOptions="Center"
               HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

Step 3: Create the TabbedPage

1. Add a new ContentPage as before and name it MainTabPage.xaml.
2. Remove the generated code behind (.cs) file.
3. Modify MainTabPage.xaml to inherit from TabbedPage.

Example: MainTabPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:YourNamespace.Pages"
            x:Class="YourNamespace.Pages.MainTabPage">
    <local:HomePage />
    <local:SettingsPage />
</TabbedPage>

Step 4: Set the MainPage of the App to MainTabPage

Modify App.xaml.cs to set the MainPage of the application to the newly created TabbedPage.

Example: App.xaml.cs

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

            MainPage = new Pages.MainTabPage();
        }
    }
}

Step 5: Run the Application

• Press F5 or click on the Run button in Visual Studio to execute the project.
• You should see a tabbed interface with the "Home" and "Settings" tabs.

Step-by-Step Guide: Creating a FlyoutPage in .NET MAUI

Step 1: Create the FlyoutPage

Similar to the TabbedPage example, create a content page for the main content and one for the navigation flyout.

1. Create a new ContentPage named MainContentPage.xaml.
2. Create another ContentPage named MenuPage.xaml.

Example: MainContentPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.Pages.MainContentPage"
             Title="Main">
    <StackLayout>
        <Label Text="Welcome to the Main Content Page!"
               FontSize="Large"
               VerticalOptions="Center"
               HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

Example: MenuPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.Pages.MenuPage"
             Title="Menu">
    <StackLayout Padding="20">
        <Button Text="Home"
                Clicked="OnHomeButtonClicked"
                Margin="0,5,0,5" />
        <Button Text="Settings"
                Clicked="OnSettingsButtonClicked"
                Margin="0,5,0,5" />
    </StackLayout>
</ContentPage>

Example: MenuPage.xaml.cs

Add event handlers for the button clicks to navigate to different pages.

using Microsoft.Maui.Controls;

namespace YourNamespace.Pages
{
    public partial class MenuPage : ContentPage
    {
        public MenuPage()
        {
            InitializeComponent();
        }

        private void OnHomeButtonClicked(object sender, EventArgs e)
        {
            if (Parent is FlyoutPage flyoutPage)
            {
                flyoutPage.Detail = new NavigationPage(new MainContentPage());
                flyoutPage.IsPresented = false;
            }
        }

        private void OnSettingsButtonClicked(object sender, EventArgs e)
        {
            if (Parent is FlyoutPage flyoutPage)
            {
                flyoutPage.Detail = new NavigationPage(new SettingsPage());
                flyoutPage.IsPresented = false;
            }
        }
    }
}

Step 2: Create the Main FlyoutPage

Create a new FlyoutPage called MainFlyoutPage.xaml.

Example: MainFlyoutPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:YourNamespace.Pages"
            x:Class="YourNamespace.Pages.MainFlyoutPage">
    <FlyoutPage.Flyout>
        <local:MenuPage />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:MainContentPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

Step 3: Update the App.xaml.cs

Set the MainPage of the application to the FlyoutPage.

Example: App.xaml.cs

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

            MainPage = new Pages.MainFlyoutPage();
        }
    }
}

Step 4: Run the Application

• Press F5 or click on the Run button in Visual Studio to execute the project.
• You should see a side menu with buttons to navigate to the "Main" and "Settings" pages.

Summary

In this guide, you learned how to create and use TabbedPage and FlyoutPage in .NET MAUI, providing a structured and detailed step-by-step process for beginners. Feel free to customize the UI and functionalities as per requirements.