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

5 мин

После установки и настройки средств MAUI .NET можно использовать Visual Studio для создания приложения .NET MAUI.

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

Как приступить к работе

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

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

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

Созданный проект .NET MAUI содержит следующие элементы, как показано ниже.

A screenshot of the solution explorer of the default structure of a new .NET MAUI solution in Visual Studio.

Структура проекта .NET MAUI и запуск приложения

Проект содержит следующие элементы:

App.xaml. Этот файл определяет ресурсы приложения, которые приложение будет использовать в макете XAML. Ресурсы по умолчанию находятся в Resources папке и определяют цвета и стили по умолчанию для каждого встроенного элемента управления .NET MAUI. Здесь вы увидите два словаря ресурсов, объединенные вместе:

<?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:MyMauiApp"
             x:Class="MyMauiApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

App.xaml.cs. Это код программной части для файла App.xaml. В этом файле определен класс App. Этот класс представляет приложение во время выполнения. Конструктор этого класса создает начальное окно и присваивает его свойству MainPage, которое определяет, какая страница будет отображаться при запуске приложения. Кроме того, этот класс позволяет переопределить обработчики событий жизненного цикла платформонезависимых приложений. К этим событиям относятся OnStart, OnResume и OnSleep. Эти обработчики определены как члены базового класса Application. В следующем коде показаны примеры:

Примечание.

Вы также можете переопределить платформозависмые события жизненного цикла приложения при первом его запуске. Это будет описано далее.
```
namespace MyMauiApp;

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

        MainPage = new AppShell();
    }

    protected override void OnStart()
    {
        base.OnStart();
    }

    protected override void OnResume()
    {
        base.OnResume();
    }

    protected override void OnSleep()
    {
        base.OnSleep();
    }
}
```
AppShell.xaml. Этот файл представляет собой основную структуру приложения .NET MAUI. .NET MAUI Shell предоставляет множество функций, которые полезны для приложений с несколькими платформами, включая стили приложений, навигацию на основе URI и параметры макета, включая всплывающую навигацию и вкладки для корневого каталога приложения. Шаблон по умолчанию имеет одну страницу (или ShellContent), которая увеличивается при запуске приложения.
```
  <?xml version="1.0" encoding="UTF-8" ?>
  <Shell
      x:Class="MyMauiApp.AppShell"
      xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      xmlns:local="clr-namespace:MyMauiApp"
      Shell.FlyoutBehavior="Disabled">

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

  </Shell>
```

MainPage.xaml. Этот файл содержит определение пользовательского интерфейса. Пример приложения, которое создает шаблон приложения MAUI, содержит две метки, кнопку и изображение. Элементы управления упорядочиваются с помощью элемента VerticalStackLayout, помещенного внутрь элемента ScrollView. Элемент VerticalStackLayout управления упорядочивает элементы управления по вертикали (в стеке) и ScrollView предоставляет полосу прокрутки, если представление слишком велико для отображения на устройстве. Вы намерены заменить содержимое этого файла собственным макетом пользовательского интерфейса. Вы также можете определить дополнительные страницы XAML, если создаете многостраничное приложение.

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

    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />

            <Label 
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />

            <Label 
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

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

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

MainPage.xaml.cs. Это код программной части страницы. В этом файле вы определяете логику различных обработчиков событий и других действий, инициируемых с помощью элементов управления на странице. В примере кода реализован обработчик события Clicked для кнопки на странице. Этот код просто увеличивает значение переменной-счетчика и отображает результат в метке на странице. Семантическая служба, входящая в библиотеку MAUI Essentials, поддерживает специальные возможности. Статический метод Announce класса SemanticScreenReader задает текст, который зачитывается средством чтения с экрана при нажатии кнопки:
```
namespace MyMauiApp;

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);
    }
}
```
MauiProgram.cs. На всех платформах существует отдельная начальная точка, в которой создается и инициализируется приложение. Этот код можно найти в папке "Платформы " в проекте. Этот код зависит от платформы, но в конце вызывает CreateMauiApp метод статического MauiProgram класса. Метод CreateMauiApp используется для настройки приложения — для этого создается объект построителя приложений. Необходимо, как минимум, указать, какой класс описывает ваше приложение. Это можно сделать с помощью универсального метода UseMauiApp объекта построителя приложений. Параметр типа указывает класс приложения. Построитель приложений также имеет методы для решения таких задач, как регистрация шрифтов, настройка служб для внедрения зависимостей, регистрация пользовательских обработчиков для элементов управления и пр. В следующем примере кода показано, как построитель приложений используется для регистрации шрифта:
```
namespace MyMauiApp;

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

        return builder.Build();
    }
}
```
Platforms. Эта папка содержит файлы и ресурсы кода инициализации для конкретной платформы. Существуют папки для Android, iOS, MacCatalyst, Tizen и Windows. Во время выполнения приложение запускается специфическим для конкретной платформы образом. Большая часть процесса запуска абстрагируется внутренними компонентами библиотек MAUI, но файлы кода в этих папках предоставляют механизм подключения к собственной инициализации. Важно отметить, что при завершении инициализации код для конкретной платформы вызывает MauiProgram.CreateMauiApp метод, который затем создает и запускает App объект, как описано ранее. Например, файл MainApplication.cs в папке Android, файл AppDelegate.cs в папках iOS и MacCatalyst и файл App.xaml.cs в папке Windows содержат следующие переопределения:
```
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
```

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

A diagram of the flow of control when a .NET MAUI app starts up. It flows from the native specific startup, to the create MAUI app function, to finally the app object constructor.

Ресурсы проекта

Файл .csproj в основном проекте имеет несколько важных разделов. В начальном разделе PropertyGroup указываются целевые платформы проекта, а также такие элементы, как название приложения, идентификатор, версия, отображаемая версия и поддерживаемые операционные системы. Эти свойства можно изменить по мере необходимости.

<Project Sdk="Microsoft.NET.Sdk">

    <PropertyGroup>
        <TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
        <TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
        <!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
        <!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
        <OutputType>Exe</OutputType>
        <RootNamespace>MyMauiApp</RootNamespace>
        <UseMaui>true</UseMaui>
        <SingleProject>true</SingleProject>
        <ImplicitUsings>enable</ImplicitUsings>

        <!-- Display name -->
        <ApplicationTitle>MyMauiApp</ApplicationTitle>

        <!-- App Identifier -->
        <ApplicationId>com.companyname.mymauiapp</ApplicationId>
        <ApplicationIdGuid>272B9ECE-E038-4E53-8553-E3C9EA05A5B2</ApplicationIdGuid>

        <!-- Versions -->
        <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
        <ApplicationVersion>1</ApplicationVersion>

        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
        <TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
        <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
    </PropertyGroup>
    ...

</Project>

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

<Project Sdk="Microsoft.NET.Sdk">

    ...

   <ItemGroup>
        <!-- App Icon -->
        <MauiIcon Include="Resources\appicon.svg" 
                  ForegroundFile="Resources\appiconfg.svg" 
                  Color="#512BD4" />

        <!-- Splash Screen -->
        <MauiSplashScreen Include="Resources\appiconfg.svg" 
                          Color="#512BD4" 
                          BaseSize="128,128" />

        <!-- Images -->
        <MauiImage Include="Resources\Images\*" />
        <MauiImage Update="Resources\Images\dotnet_bot.svg" 
                   BaseSize="168,208" />

        <!-- Custom Fonts -->
        <MauiFont Include="Resources\Fonts\*" />

        <!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
        <MauiAsset Include="Resources\Raw\**" 
                   LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
    </ItemGroup>

    ...

</Project>

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

A screenshot of the resources folder in the main project with a rectangle around it in the Visual Studio solution explorer. Inside the folder are font and image files.

При запуске приложения необходимо с помощью объекта построителя приложений зарегистрировать все шрифты, добавленные в папку Fonts. Вы помните, что в методе CreateMauiApp класса MauiProgram это делается путем вызова метода ConfigureFonts:

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

        ...
    }
}

В этом примере метод AddFont связывает шрифт с именем OpenSansRegular. Этот шрифт можно указать при форматировании элементов в XAML-описании страницы или в словаре ресурсов приложения:

<Application ...">
    <Application.Resources>
        <ResourceDictionary>
            ...
            <Style TargetType="Button">
                ...
                <Setter Property="FontFamily" Value="OpenSansRegular" />
                ...
            </Style>

        </ResourceDictionary>
    </Application.Resources>
</Application>

Для размещения платформозависимых ресурсов Android и iOS используйте подпапки Resources в папках Android и iOS, расположенных в папке Platforms.

Проверка знаний

В каком методе объекта приложения следует создавать начальное окно, отображаемое приложением?

Запуск

Конфигурирование

Конструктор

Где реализуется логика обработчика событий для элемента управления, например, события Clicked для кнопки?

В XAML-описании страницы, содержащей элемент управления

Логика реализуется в файле кода программной части для страницы XAML, содержащей элемент управления.

В файле App.xaml.cs

Вы должны ответить на все вопросы перед проверкой.

Продолжить

Как приступить к работе

Структура проекта .NET MAUI и запуск приложения

Ресурсы проекта

Проверка знаний

Обратная связь