Maui introductory tutorial series (5.xaml and page introduction)

Preface

As a Microsoft UI frame , except Winform outside , Most are created by XAML File way to write front-end pages , Although you can also pass C# Code to write your user interface , And Xamarin.Forms identical , stay MAUI Write on XAML Is declared in the same way , The underlying part is reconstructed, but most of it inherits the original pattern .

Compared with other XAML Declarative UI frame , Such as :WPF、UWP、UnoPlatform、Avalonia Their declaration methods are different .

XAML Introduce

stay MAUI in , Create a XAML page , It mainly consists of two parts : XAML file +CS file .

• XAML

<ContentPage
    x:Class="MauiApp5.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <!--    -->
</ContentPage>

x:Class : representative XAML The file points to partial class , XAML be responsible for UI Design , CS Class is responsible for writing business logic .
xmlns : full name xamlnamespace, The representative declared that XAML Namespace
xmlns:x="..." : Aliased naming xml Space , The objects under this namespace can be accessed through aliases ( Accessible )

problem 1: What is the difference between a namespace with an alias and a namespace without an alias ?

First , For one XAML In terms of documents , Only one namespace without alias can exist , In this way, you can access the objects under the namespace without alias , By default , We can use various... Provided by the framework UI object , This is the default , We don't need to show that we can access these objects through aliases , For our customized namespace , Can be accessed by alias .

• Access objects under the default namespace

<Grid>
        <StackLayout>
            <Button/> 
            <Label/>
            <Image/>
        </StackLayout>
    </Grid>

• Declare an alias to access the object

<m:ContentPage
    x:Class="MauiApp5.MainPage"
    xmlns:m="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <m:Grid>
        <m:StackLayout>
            <m:Button/>
            <m:Label/>
            <m:Image/>
        </m:StackLayout>
    </m:Grid>
</m:ContentPage>

problem 2: x:Class What are the requirements of some classes pointed to ?

CS partial Class and XAML It's the same class , Just responsible for different work .XAML Usually more concise and readable than equivalent code , and C# Code can handle complex conditional judgments 、 Logical processing . Make sure , This part of the class needs and XAML The base class of is the same .

• CS

public partial class MainPage : ContentPage
{ 
    public MainPage()
    {
        InitializeComponent(); 
    } 
}

Page introduction

MAUI Frame built in 4 Page types , To meet different application scenarios , as follows :

• ContentPage
  Content page , Usually used to define the visual layout of a page 、 Nested display sub elements, etc

• FlyoutPage
  It contains a floating control page of display items and a detailed information page , It encapsulates the functions for side navigation and operation

• NavigationPage
  Provides pages for forward and backward navigation
  
  

• TabbedPage
  Provide tab switching pages , Common in mobile devices .

These page types , They are all directly or indirectly inherited from Page class , Each realizes some functions .

summary

This paper mainly introduces MAUI in XAML File class description and several page types provided , The following article will mainly introduce XAML Specific layout and methods in .