Basics of XAML

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 is representing application wide settings.

Let’s look closer to the “Appplication” element attibutes.

• xmlns: This element defines the namespace for entire application.
• xmlns:x : The x provides access to XAML-specific features and directives within your XAML file.
• xmlnx:local : The local maps a prefix to a CLR (Common Language Runtime) namespace within your project. the Purpose of local, allows you to reference and use classes, controls, and other types defined in your local project namespace directly in XAML.
• x:Class : Associates the XAML markup with its code-behind file, enabling partial class generation where the XAML and code-behind are combined into a single class.

You can define application resources inside of the “Application.Resources” element. This resources will be available for entire application. Example of application resources can be, styles, color and data templates etc.

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 look closer to the “Shell.FlyoutBehavior”. The “FlyoutBehavior" property can be set to one of the following values:

• disabled : The flyout menu(hamburger menu) is completely disabled and no flyout icon or gesture will open the menu
• flyout : The flyout menu is enabled and can be accessed by the user. End users can open the flyout by tapping the menu icon or swiping from the side.
• locked : The flyout menu is always visible, occupying a portion of the screen. End users cannot hide the flyout; it remains fixed.

Title attribute : Setting Title="Home" in your <Shell> element assigns the title “Home” to the Shell, which can be displayed in various parts of your application’s user interface, such as the navigation bar or the flyout header.

How Title Works in Shell Navigation

The Title property is not limited to the <Shell> element; it can also be used within various child elements to specify titles for different sections or pages.

Section Level Title

• Tabs and Flyout Items: When defining tabs or items in the flyout menu, you can set the Title property to specify the name that appears in the UI.

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: You can set the Title property on individual pages to specify what appears in the navigation bar when that page is displayed.

<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 overrides the Title specified in the Shell or parent elements when this page is active.

Lets look closer ShellContent element;

ShellContent element represents a page in your app.