Первое приложение .NET MAUI

В качестве знакомства с .NET MAUI, создадим свое первое кроссплатформенное приложение, используя уже имеющиеся шаблоны в Visual Studio.

Типы приложений .NET MAUI

Прежде, чем мы создадим свой первый проект .NET MAUI, стоит немного разобраться с тем, какие типы приложений .NET MAUI нам доступны. На данный момент, в Visual Studio 2022 v17.13.0 доступны следующие типы проектов .NET MAUI

1. Приложение .NET MAUI (Майкрософт) — это, можно сказать, «канонический» проект .NET MAUI в котором как раз и используются C# и XAML. С этим типом проектов мы и будем, в основном, работать.
2. Приложение .NET MAUI Blazor (Майкрософт) — тип проекта .NET MAUI, использующий для построение графического интерфейса Blazor — фреймворк для работы над графическими web-приложениями. Также этот тип проектов называется Blazor Hybrid (гибридные приложения Blazor). Подробно об этом типе проектов можно узнать из руководства по Blazor Hybrid.
3. Библиотека классов .NET MAUI (Майкрософт) — тип проекта для создания библиотеки классов .NET MAUI
4. .NET MAUI Blazor Hybrid and Web App — тип проекта, совмещающий в себе, как кроссплатформенное приложение Blazor Hybrid, так и обычное web-приложение, для разработки которых используется единая кодовая база.
5. .NET MAUI Multi-Project App — раздельное приложение .NEt MAUI. Если в «каноническом» проекте .NET MAUI у нас имеется один проект для всех поддерживаемых платформ, то в этом типе проекта создается отдельное приложение под каждую платформу.

Первое приложение .NET MAUI

Итак, создадим новый проект, выбрав тип проекта Приложение .NET MAUI (Майкрософт)

На втором шаге создания проекта нам предложат включить в проект демонстрационное содержимое. Пока не будем использовать эту возможность

После того, как вы нажмете кнопку «Создать», в обозревателе решений Visual Studio появится наш первый проект .NET MAUI, который должен выглядеть следующим образом:

Рассмотрим структуру этого проекта.

Структура проекта .NET MAUI

Папка Platforms содержит подкаталоги для каждой из поддерживаемых в .NET MAUI платформ:

В каждом из подкаталогов папки Platforms содержатся файлы, необходимые для сборки под конкретную платформу. Благодаря такой структуре проекта в .NET MAUI происходит так называемое мультинацеливание смысл которого в следующем: в сборку попадают только те файлы и ресурсы, которые необходимы для выбранной платформы. Например, если мы собираем приложение под Windows, то в сборку попадают все файлы и ресурсы расположенные вне папки Platforms и только те файлы, которые расположены в папке Platforms/Windows. Соответственно, при сборке под Android будет задействована папка Platforms/Android и так далее.

Папка Resources содержит файлы ресурсов приложения: иконки приложения, шрифты, картинки и т.д.

Файл App.xaml определяет ресурсы, общие для всего приложения, а файл App.xaml.cs содержит код C#, с которого начинается выполнение приложения. Например, по умолчанию, в файле 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:FirstApp"
             x:Class="FirstApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

В файлах Resources/Styles/Colors.xaml и Resources/Styles/Styles.xaml, в свою очередь, содержатся стили оформления различных элементов управления и ресурсы, определяющие цветовую схему приложения.

Файл MainPage.xaml — главная страница приложения. Именно эту страницу мы увидим первой после запуска приложения. 

Файл MauiProgram.cs — содержит класс MauiProgram, который определяет стартовый класс приложения (класс App) и ряд общих для приложения настроек. В этом файле настраиваются шрифты приложения, подключаются сервисы и т.д.

Запуск приложения в Windows 10/11

Запустим наше приложение в Windows, нажав клавишу F5. После запуска вы увидите наше приложение, состоящее из одной страницы на которой расположена картинка, текст и кнопка:

Клик по кнопке выполняет простейшую логику в нашем приложении — наращивает счётчик на 1 и отображает значение на кнопке. Например,

Также, наше приложение уже имеет боковое меню

Запуск приложения в Android

Для запуска приложения в Android мы можем использовать два варианта:

• использовать эмулятор Android (для этого придется загрузить на свой компьютер необходимые компоненты и настроить эмулятор)
• воспользоваться любым физическим устройством на базе Android (планшетом или телефоном)

Рассмотрим оба варианта запуска.

Запуск приложения в эмуляторе Android

Для запуска приложения в эмуляторе Android необходимо выбрать соответствующий профиль запуска:

При запуске приложения запустится Android Device Manager, в котором нам необходимо настроить новое устройство:

Нажимаем кнопку «Создать» и принимаем лицензионное соглашение:

После этого начнется скачивание файлов и настройка виртуального устройства Android:

После настройки эмулятора он появился в списке запуска проекта в Visual Studio:

и запустится с нашим проектом. При необходимости, вы также можете создать различные эмуляторы Android, воспользовавшись диспетчером устройств Android вызвав его через меню Visual Studio «Средства — Android»

Запуск приложения на физическом устройстве Android

Чтобы запустить приложение на физическом устройстве Android, на устройстве необходимо включить режим разработчика, подключить устройство к компьютеру через USB-кабель и выбрать в профиле запуска необходимое устройство. Например,

Например, вот так будет выглядеть наше приложение, при запуске на физическом устройстве Android с включенной темной темой:

Управление Android SDK

Возможно, что при подключении вашего устройства Android к компьютеру, Visual Studio не сможет его обнаружить. Одной из причин такой ситуации может быть отсутствие установленного на вашем компьютере USB-драйвера. Чтобы его установить достаточно зайти в меню Visual Studio «Средства — Android — Диспетчер SDK Android»

В открывшемся диспетчере перейти на вкладку «Средства» и выбрать в списке «Дополнительно — Google USB Driver»

После чего применить изменения. Здесь же, в диспетчере SDK Android можно установить другие версии Android SDK вплоть до Android 5 Lolipop.

Итого

Итак, сегодня мы разобрались в общих чертах из чего состоит шаблонный проект .NET MAUI и запустили наше приложение в Windows и Android. Далее мы будем рассматривать более детально то, как разрабатываются кроссплатформенные приложения в .NET MAUI