Создание проекта .NET MAUI

Создадим первый проект, который будет использовать .NET MAUI. Для этого мы будем использовать среду разработки Visual Studio 2022. Для работы с .NET MAUI в Visual Studio имеется ряд шаблонов проектов:

• .NET MAUI App: стандартный тип проекта, который использует .NET MAUI

• .NET MAUI Blazor Hybrid App: тип проекта, который использует фреймворк Blazor

• .NET MAUI Class Library: тип проекта, для создания библиотеки классов под .NET MAUI

Для быстрого поиска шаблона проекта можно отфильтровать шаблоны по типу "MAUI"

Для создания первого проекта выберем первый тип - .NET MAUI App.

После выбора типа проекта на следующем шаге укажем для него каталог и имя, к примеру, назовем его HelloApp:

На следующем шаге укажем последнюю доступную версию .NET (в моем случае .NET 8):

Нажмем на кнопку Create, и Visual Studio создаст новый проект:

Вкратце рассмотрим его структуру:

• Папка Platforms содержит подкаталоги для каждой отдельной платформы. Каждая папка содержит файлы кода для взаимодействия с определенной платформой

• Папка Resources содержит файлы ресурсов, применяемых в приложении, в частности, файлы шрифтов, иконок, изображений и т.д.

• App.xaml: определяет ресурсы, общие для всего приложения

• App.xaml.cs: файл с кодом C#, с которого начинается выполнение приложения

• AppShell.xaml: определяет общий визуальный интерфейс многостраничного приложения

• AppShell.xaml.cs: файл с кодом C#, который связан с файлом AppShell.xaml и определяет связанную с ним программную логику

• MainPage.xaml: файл с визуальным интерфейсом для единственной страницы MainPage в виде xaml

• MainPage.xaml.cs: файл, который содержит логику страницы MainPage на языке C#

• MauiProgram.cs: содержит класс MauiProgram, который определяет стартовый класс приложения (по умолчанию класс App) и ряд общих для приложения настроек

Общая организация приложения MAUI выглядит следующим образом:

Каждая из платформ, файлы которых расположены в папке Platforms, использует класс MauiProgram для запуска приложения .NET MAUI. Класс MauiProgram устанавливает класс, который запускается при запуске приложения и который устанавливает визуальный облик приложения. Например, откроем код данного класса:

using Microsoft.Extensions.Logging;

namespace HelloApp;

public static class MauiProgram
{
	public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			});

#if DEBUG
		builder.Logging.AddDebug();
#endif

		return builder.Build();
	}
}

Строка

.UseMauiApp<App>()

как раз определяет класс, запускаемый при старте приложения и задающий внешний приложения. По умолчанию это класс App из файла App.xaml.cs.

Класс App использует класс AppShell из файла AppShell.xaml.cs и связанный с ним файл AppShell.xaml для установки, как страницы будут структурированы внутри приложения. Для этого у класса App устанавливается свойство MainPage:

namespace HelloApp;

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

		MainPage = new AppShell();
	}
}

Класс AppShell представляет оболочку, которая позволяет создавать многостраничное приложение и устанавливает главную страницу приложению, которая в данном случае представлена классом MainPage из файлов MainPage.xaml и MainPage.xaml.cs. Так, обратимся к файлу AppShell.xaml

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

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

</Shell>

Данный xml-файл с помощью атрибута Route="MainPage" элемента ShellContent как раз определяет, что главной страницей, которую мы увидим при запуске, будет MainPage.

Таким образом, при запуске приложения мы увидим на экране содержимое, которое устанавливается страницей MainPage. Собственно это единственная определенная в проекте страница. Перейдем к определению этой страницы. Оно разбито на два файла. Файл MainPage.xaml представляет визуальный интерфейс страницы в виде кода XAML, который аналогичен HTML:

<?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="HelloApp.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to 
.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Так как для создания страниц используется класс ContentPage, то в качестве корневого элемента в этом файле определен именно элемент ContentPage.

Все его содержимое состоит из элемента ScrollView, который представляет прокручиваемую область. ScrollView в свою очередь содержит элемент VerticalStackLayout, который позволяет расположить вложенные элементы в виде вертикального стека.

Внутри VerticalStackLayout определен ряд элементов, которые собственно определяют видимые на экране элемента. В данном случае в основном это элементы Label, которые служат для вывода простого или отформатированного текста на экран, элемент Image для вывода изображения и элемент Text для вывода текста.

Также в проекте есть и файл с кодом логики страницы - файл MainPage.xaml.cs:

namespace HelloApp
{
    public partial class MainPage : ContentPage
    {
        int count = 0;

        public MainPage()
        {
            InitializeComponent();
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            count++;

            if (count == 1)
                CounterBtn.Text = $"Clicked {count} time";
            else
                CounterBtn.Text = $"Clicked {count} times";

            SemanticScreenReader.Announce(CounterBtn.Text);
        }
    }

}

Стоит отметить, что чтобы связать оба определения страницы, класс MainPage определяется здесь как частичный (partial), а в файле MainPage.xaml в определении страницы ContentPage указан класс, название которого совпадает с классом из MainPage.xaml.cs:

x:Class="HelloApp.MainPage"

В классе определен конструктор, который с помощью вызова InitializeComponent() создает визуальный интерфейс, определенный в файле MainPage.xaml.

Кроме того в классе по умолчанию определен метод OnCounterClicked(), который выступает в качестве обработчика кнопки, которая определена в файле MainPage.xaml. При нажатии на кнопку данный метод будет увеличивать значение переменной count.

Теперь рассмотрим запуск данного кода на различных платформах.