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

  • 5 мин

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

Создание нового проекта

  1. Откройте среду Visual Studio и создайте новое решение. При этом действии в Visual Studio откроется мастер создания проекта.

    Совет

    Убедитесь, что у вас установлена рабочая нагрузка .NET MAUI с Visual Studio 2022 версии 17.3 или более поздней версии (версия 17.8 предпочтительнее с .NET 8). Дополнительные сведения см. здесь.

  2. Выберите тип проекта MAUI, выберите шаблон приложения .NET MAUI и нажмите кнопку "Далее".

    A screenshot of the Create a new project dialog box. The user has selected the .NET MAUI App template.

  3. На странице Настроить новый проект назовите проект Phoneword и сохраните его в выбранном расположении. Выберите Далее.

    A screenshot of the Configure your new project dialog box. The user has named the project Phoneword and selected a location on their hard drive to store it.

  4. Выберите .NET 8.0 (долгосрочная поддержка) в раскрывающемся списке Framework , а затем нажмите кнопку "Создать ", чтобы создать приложение.

Изучение структуры решения

  1. В окне Обозревателя решений разверните проект Phoneword. Разверните папку Resources и ее вложенные папки, разверните узлы App.xaml, AppShell.xaml и MainPage.xaml.

    A screenshot of the Phoneword project in the Visual Studio solution explorer window.

  2. В проекте обратите внимание на следующие элементы:

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

    • Файл MauiProgram.cs содержит код, который настраивает приложение, и указывает, что для запуска приложения должен использоваться класс App.

    • Файл App.xaml.cs, конструктор класса App, создает новый экземпляр класса AppShell, который затем отображается в окне приложения.

    • Файл AppShell.xaml содержит основной макет приложения и начальную страницу MainPage.

    • Файл MainPage.xaml содержит макет для страницы. Этот макет включает код XAML для кнопки с подпись Щелкните меня и изображение, отображающее файл dotnet_bot.png. Существуют и две другие метки.

    • Файл MainPage.xaml.cs содержит логику приложения для страницы. В частности, класс MainPage включает метод с именем OnCounterClicked , который запускается, когда пользователь нажимает кнопку "Щелкнуть меня ".

Сборка и запуск приложения в Windows

  1. На панели инструментов Visual Studio выберите профиль компьютера с Windows. Выберите платформу .net6.0-windows в раскрывающемся списке платформ.

    A screenshot of the target runtime dropdown in Visual Studio. The user has set the Windows.Machine profile as the startup profile for the solution.

  2. В меню Отладка выберите пункт Начать отладку. Это действие создаст, развернет и запустит приложение в Windows:

    A screenshot of the Visual Studio debug menu. The user has started debugging the app using the Windows Machine profile.

  3. Убедитесь, что версия приложения для Windows запускается. Нажмите кнопку Щелкните здесь несколько раз. Текст кнопки должен обновляться при каждом нажатии, так как приращивается переменная count.

    A screenshot of the Windows UI app running. The user has tapped the 'Click me' button four times.

  4. В меню Вид выберите Обозреватель решений. В окне Обозреватель решений разверните узел MainPage.xaml и откройте файл кода MainPage.xaml.cs.

  5. В методе OnCounterClicked измените оператор, который приращивает переменную count, добавляя 5 к этой переменной:

    private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

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

    SemanticScreenReader.Announce(CounterBtn.Text);
}

  6. На панели инструментов Visual Studio нажмите кнопку Горячая перезагрузка:

    A screenshot of the Visual Studio toolbar. The Hot Reload button is highlighted.

  7. Вернитесь к приложению и нажмите кнопку Щелкните здесь. Убедитесь, что переменная count приращивается на 5.

    Примечание.

    Функция Горячая перезагрузка Visual Studio позволяет изменять код во время работы приложения в режиме отладки. Вам не нужно останавливать приложение, чтобы увидеть изменения. Кроме изменения кода, вы также можете внести изменения в разметку XAML для страницы, и эти изменения станут видимыми в работающем приложении.

  8. Закройте приложение и вернитесь в Visual Studio.

Сборка и запуск приложения на Android

  1. На панели инструментов Visual Studio выберите проект Phoneword.

  2. В меню Сервис выберите Android, а затем — Диспетчер устройств Android. Если вам будет предложено разрешить Android диспетчер устройств внести изменения на компьютер, нажмите кнопку "Да".

    A screenshot of the Visual Studio tools menu. The user has selected the Android Device Manager option.

  3. В окне Диспетчер устройств Android выберите + Создать. В окне "Новое устройство" выберите базовое устройство Pixel 3a (+ Store), выберите ОС API 30 и нажмите кнопку "Создать". Подождите, пока будут скачаны различные библиотеки и настроено устройство.

    A screenshot of the New Device window from the Android SDK. The user is creating a new Pixel 3 device with API 30 selected.

  4. После создания устройства вернитесь в Visual Studio.

  5. На панели инструментов Visual Studio в раскрывающемся списке конфигурации отладки выберите профиль эмуляторов Android и выберите устройство pixel_3a-api_30 . Это устройство, которое вы только что создали.

    A screenshot of the Visual Studio toolbar. The user has specified the Pixel 3 with the API 30 profile for the Android emulator to start debugging with.

  6. Начните отладку с помощью профиля pixel_3a-api_30 . Это действие создаст, развернет и запустит приложение на устройстве Android.

    A screenshot of the Visual Studio toolbar. It shows the pixel 3 a p i 30 profile has been selected and ready to start debugging with as soon as the user presses the play button.

  7. Когда приложение начинает работать в эмуляторе (это может занять несколько минут), нажмите кнопку "Щелкнуть меня" и проверка, что приложение работает точно так же, как и в Windows.

    A screenshot of the Android version of the Phoneword application running in the selected emulator.

  8. Вернитесь в Visual Studio и остановите отладку.