Руководство по .NET MAUI | Ваше первое мультиплатформенное приложение в C#

Введение

Цель

Настройте среду разработки и создайте свое первое приложение .NET Multi-platform App UI (.NET MAUI).

Обязательные требования

Проверьте системные требования для Visual Studio 2022.

Время завершения

10 минут + время загрузки/установки

Сценарий

Мобильное и настольное приложение, которое работает в Windows и Android и выводит сообщение Hello, World!.

Загрузить и установить

Загрузите и установите Visual Studio 2022.

Скачать Visual Studio 2022

Во время установки следует выбрать рабочую нагрузку Разработка .NET Multi-platform App UI. Использование приведенной выше ссылки должно правильно выбрать все предварительные условия, как показано на следующем изображении:

У вас уже есть Visual Studio 2022?

Если у вас уже есть решение Visual Studio 2022, обновите его и установите требуемую рабочую нагрузку:

Нажмите клавишу Windows, введите Установщик Visual Studio и нажмите клавишу Enter.
При появлении запроса разрешите программе установки обновить себя.
If an update for Visual Studio 2022 is available, an Update button will be shown. Select it to update before modifying the installation. This tutorial only works with Visual Studio 2022 17.12 and later versions.
Найдите свою установку Visual Studio 2022 и выберите Изменить.
Выберите Разработка .NET Multi-platform App UI.
Нажмите кнопку Изменить.

Download and install the .NET SDK. After the download completes, launch the download to begin the install.

Download .NET 9 SDK x64 (Intel)
Download .NET 9 SDK Arm64 (Apple Silicon)

Если вы работаете на Mac с чипом Apple M1 или M2, вам необходимо установить версию Arm64 для SDK.
Скачайте и установите VS Code:

Скачать VS Code
Откройте VS Code и нажмите кнопку Расширения на панели действий VS Code слева. Введите MAUI на панели поиска, выберите .NET MAUI, а затем нажмите кнопку Установить на странице расширения .NET MAUI.

Это расширение поставляется с расширениями C# Dev Kit и C#, которые необходимы для запуска расширения .NET MAUI.
Откройте новый терминал и установите рабочую нагрузку .NET MAUI, выполнив следующую команду:
Terminal
```
sudo dotnet workload install maui
```
Если установка прошла успешно, вы должны увидеть вывод, подобный следующему:
Terminal
```
Successfully installed workload maui
```

Проверьте, все ли установлено правильно

После настройки среды откройте новый терминал VS Code. На панели инструментов выберите Терминал, а затем Новый терминал.

В терминале выполните следующую команду, чтобы проверить установку.

Terminal

dotnet workload list

Если установка прошла успешно, вы должны увидеть вывод, подобный следующему:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

Произошла ошибка?

Если вы получили сообщение об ошибке dotnet не распознается как внутренняя или внешняя команда, откройте новый терминал VS Code. Если перезапуск VS Code или перезагрузка компьютера не решает проблему, воспользуйтесь кнопкой У меня возникла проблема в нижней части окна, чтобы получить помощь в ее устранении.

Установить Xcode

Для разработки приложений .NET MAUI вам также потребуется следующее.

Последняя версия Xcode

To find the latest version of Xcode that is compatible with .NET MAUI, check this release version reference. Go to the Apple Tools column to find the latest compatible Xcode version.

Apple ID

Если у вас еще нет Apple ID, вы можете создать новый на странице https://appleid.apple.com. . Apple ID требуется для установки и входа в Xcode.
После установки Xcode требуется открыть Xcode, принять лицензионные соглашения и установить дополнительные компоненты, если будет предложено.
При запросе о предпочитаемых платформах для разработки выберите платформы macOS и iOS, а затем нажмите Скачать и установить.
Откройте новый терминал и установите средства разработчика командной строки Xcode, выполнив следующую команду:
Terminal
```
xcode-select --install
```
При запросе на установку средств разработчика командной строки Xcode выберите Установить. В конце примите лицензионное соглашение.

Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.

Создайте свое приложение

Создание приложения .NET MAUI:

Откройте Visual Studio 2022
Нажмите кнопку Создать новый проект.
В окне Создать новый проект введите в поле поиска Приложение MAUI. Выберите шаблон Приложение .NET MAUI и нажмите кнопку Далее.
В окне Настройте новый проект введите MyFirstMauiApp в качестве имени проекта и нажмите кнопку Далее.
In the Additional information window, select .NET 9.0 in the Framework drop-down if not already selected and click the Create button.

Visual Studio создает новый проект. Если вы получили предупреждение системы безопасности Windows о том, что брандмауэр блокирует некоторые функции, нажмите кнопку Разрешить доступ.

Подождите процесса восстановления пакетов NuGet

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

Процесс восстановления пакета начнется автоматически. Подождите, пока в строке состояния в левом нижнем углу экрана не появится сообщение Восстановлено или Готово.

Запустите свое приложение

В этом руководстве основное внимание будет уделено развертыванию приложения .NET MAUI в первую очередь на вашем локальном компьютере с Windows. Позже у вас будет возможность настроить Android-устройство или эмулятор.

На панели инструментов Visual Studio в качестве целевого объекта отладки по умолчанию указан компьютер с Windows. Нажмите кнопку компьютера с Windows, чтобы выполнить сборку и запуск приложения:

В работающем приложении нажмите кнопку "Нажми меня" несколько раз и убедитесь, что значение счетчика нажатий кнопки увеличивается:

В этом руководстве внимание будет в первую очередь уделено развертыванию приложения .NET MAUI на локальном компьютере с Mac. Позже у вас будет возможность выполнить запуск на симуляторе iOS.

В правом нижнем углу окна VS Code вы должны увидеть фигурные скобки в строке состояния. Щелкните фигурные скобки, и в качестве целевого объекта отладки по умолчанию будет выбрано Мой Mac.

Если фигурные скобки не отображаются в строке состояния, убедитесь, что открыт соответствующий файл проекта, например файл CS, XAML или CSPROJ, принадлежащий проекту .NET MAUI. Или вы можете открыть палитру команд в VS Code, нажав клавиши CMD+SHIFT+P. Затем введите .NET MAUI: Pick. В результате отобразятся параметры выбора платформы отладки для проекта.

Если ничего не выбрано, щелкните Целевой объект отладки и выберите Мой Mac в списке. Обратите внимание, что это может быть не первый элемент в списке при первом выборе целевого объекта отладки.

Чтобы запустить приложение, щелкните значок Запуск и отладка на панели действий VS Code. Затем нажмите Запуск и отладка.

В работающем приложении нажмите кнопку "Нажми меня" несколько раз и убедитесь, что значение счетчика нажатий кнопки увеличивается:

Поздравляем! Вы построили и запустили свое первое приложение .NET MAUI! Оставьте приложение открытым и продолжайте выполнять инструкции руководства.

Отредактируйте свой код

При разработке приложений с помощью .NET MAUI горячая перезагрузка XAML доступна во время отладки приложения. Это означает, что вы можете изменить пользовательский интерфейс (UI) XAML во время работы приложения, и пользовательский интерфейс будет обновляться автоматически.

Вернитесь в Visual Studio, оставив приложение запущенным. В Обозревателе решений дважды щелкните файл MainPage.xaml в проекте MyFirstMauiApp. Если вы не видите область Обозреватель решений, выберите " > Обозреватель решений" в основном меню (или нажмите CTRL+ALT+L).

В настоящее время для параметра Text второго элемента Label в строке 17 установлено значение Hello, World!, как показано в следующем коде:

MainPage.xaml

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

Обновите текст следующим образом: Hello, .NET MAUI!:

MainPage.xaml

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

Пользовательский интерфейс приложения обновляется автоматически по мере внесения изменений.

При разработке приложений с .NET MAUI также можно использовать Горячую перезагрузку .NET для перезагрузки кода C#. Давайте изменим логику в приложении, чтобы при нажатии кнопки значение счетчика увеличивалось на 10, а не на 1.

Откройте MainPage.xaml.cs (этот файл вложен в MainPage.xaml, или вы можете щелкнуть правой кнопкой мыши и выбрать в меню Просмотреть код).

Метод OnCounterClicked в этом файле сейчас содержит следующий код:

MainPage.xaml.cs

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);
}

Обновите count++;, увеличив его на 10, изменив его на count += 10;.

MainPage.xaml.cs

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

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

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Чтобы применить изменения кода, сохраните файл и нажмите кнопку "Горячая перезагрузка" в Visual Studio или сочетание клавиш ALT+F10.

Выберите кнопку "Нажми меня" и посмотрите, как значение увеличивается на 10. Отлично! Теперь можно закрыть работающее приложение.

Запуск на мобильном устройстве

Вы можете принять решение о развертывании на одной или нескольких платформах в зависимости от среды разработки. Вы только что запустили и развернули свое приложение в Windows. Теперь давайте настроим устройство Android или Android Emulator.

Активировать Hyper-V

В строке поиска Windows введите Функции Windows и выберите Включить или отключить функции Windows.

Установите флажок Microsoft Hyper-V и нажмите ОК.

Необходимо перезагрузить компьютер, чтобы изменения вступили в силу.

Установка Android SDK

Откройте Visual Studio и ваше решение MyFirstMauiApp. В раскрывающемся меню целевого объекта отладки выберите net8.0-android в разделе Framework.

Для создания проектов требуются определенные версии Android SDK. Если вы не приняли лицензию Android SDK, вы увидите следующее сообщение об ошибке в окне Список ошибок.

Дважды щелкните сообщение, чтобы начать процесс принятия лицензии. Нажмите Принять для каждой из имеющихся лицензий, после чего начнется автоматическая установка.

Настроить эмулятор Android

Если у вас нет устройства Android, чтобы развернуть приложение на нем, выполните описанные далее действия, чтобы настроить эмулятор Android. Если вы уже сделали это или хотите использовать собственное устройство Android, можете пропустить этот шаг.

Если вы впервые создаете приложение .NET MAUI, то в раскрывающемся меню целевого объекта отладки увидите выбранный пункт Android Emulator. Щелкните его, чтобы начать процесс создания. Если появится диалоговое окно принятия лицензии, выберите Принять.

В результате откроется окно Новое устройство. Нажмите кнопку Создать, чтобы создать эмулятор с параметрами по умолчанию. Будут скачаны образы эмулятора и завершено его создание для использования в Visual Studio. Это может занять некоторое время.

Не беспокойтесь, если уровень API, который вы видите, отличается от изображений. Возможно, значение равно 33 или выше.

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

Возможно, вы увидите запрос на включение платформы низкоуровневой оболочки Windows. Следуйтедокументации, чтобы включить ускорение для повышения производительности (это необходимо для запуска эмулятора). Выберите Все равно запустить.

Android Emulator запустится и будет полностью завершен, когда вы увидите возможность Остановить в Диспетчере устройств Android. Это может занять некоторое время.

Когда все будет готово, оно отобразится в меню отладки Visual Studio.

Ваш эмулятор Android создан и готов к использованию. В следующий раз, когда вы запустите Visual Studio, эмулятор появится непосредственно в целевом окне отладки и запустится, когда вы его выберете. Если вы столкнулись с какими-либо проблемами или проблемами с производительностью эмулятора, прочтите полную документацию по установке.

Настройка устройства с Android

Для разработки на устройстве с Android необходимо включить отладку USB. Выполните следующие действия на устройстве, чтобы подключить его к Visual Studio. Если у вас нет устройства с Android, вы можете пропустить этот раздел.

Включить режим разработчика

Перейдите на экран Настройки.
Найдите номер сборки с помощью поиска в верхней части экрана настроек или найдите его в разделе «О телефоне».
Нажмите Номер сборки 7–10 раз, пока не появится сообщение «Теперь вы разработчик!\».

Проверьте состояние отладки USB

Перейдите на экран Настройки.
Найдите Отладка по USB с помощью поиска в верхней части экрана настроек или найдите его в параметрах разработчика.
Включите отладку по USB, если она еще не включена.