App.xaml

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiApp1"
             x:Class="MauiApp1.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Application is root element of xaml file and it contains all the setting that is applicable for whole application of.

But let’s look closer on the “Appplication” element and the available attibutes.

• xmlns: This element defines the namespace of entire application.
• xmlns:x : The x helps to navigate to the additional features and rules available in the XAML file for your application.
• xmlnx:local : The local maps a prefix to a CLR (Common Language Runtime) namespace within your project. the Purpose of local, enables one to include classes, controls and other types defined in your local project namespace in an XML style language such as XAML.
• x:Class : Binds the XAML markup with its code-behind file to support generation of the partial class where XAML and code-behind are interlinked in the single class.

You can even define what is called an application resources within the section of “Application.Resources”. This resources will be useful for entire application. Examples of application resources may inter alia include, styles, colors and data templates among others.

AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiApp1.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp1"
    Shell.FlyoutBehavior="Disabled"
    Title="Home">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

Let’s zoom in more on the “Shell.FlyoutBehavior”.The “FlyoutBehavior" property can be set to one of the following values:

• disabled : Within the second state the flyout menu (hamburger menu) is completely disabled and no flyout icon or gesture is used to open the menu.
• flyout : The end-users can interact with the flyout menu since it is enabled. By a means of physically touching the icon on the screen or sliding the finger right from the side of the screen, the flyout can be opened by the end users.
• locked : It is also a fixed panel which is located rightward in the GUI while the other remains hidden unless the user commands for them. Unlike many windows, flyouts cannot be hidden by the end user; the flyout remains fixed.

Title attribute : That is, when setting Title=”Home” in the <Shell> element, you can use “Home,” for instance, in the Shell’s navigation bar or flyout header of your application.

How Title Works in Shell Navigation

The Title property is not used only for the <Shell> element; it can be defined in various child elements to define titles of the specific sections or pages.

Section Level Title

• Tabs and Flyout Items: When defining tabs or items in the flyout menu, the Title dependency property that can be used to set the name, which will be displayed in the interface, is available.

Example

<TabBar>
    <Tab Title="Home" Icon="home.png">
        <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
    </Tab>
    <Tab Title="Settings" Icon="settings.png">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </Tab>
</TabBar>

Page Level Title

Individual Pages: When any page is loaded, you can set the Title property as by which the title in the navigation bar will be set.

<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="YourAppNamespace.HomePage"
    Title="Home Page">
    
    <!-- Page content goes here -->

</ContentPage>

NOTE: The Title set here comes into play when this page is active to cancel that Title stated in the Shell or parent elements.

It is time to examine the component in more detail ShellContent element;

ShellContent element is used to display a page of your app’s experience.