Сборка приложения .NET MAUI для Windows

Получите практические навыки с .NET MAUI, создав свое первое кроссплатформенное приложение в Windows.

Введение

В этом руководстве описано, как создать и запустить первое приложение .NET MAUI для Windows в Visual Studio 2022 (17.3 или более поздней версии). Мы добавим некоторые функции MVVM Toolkit из набора средств сообщества .NET , чтобы улучшить проектирование проекта по умолчанию.

Настройка среды

Если вы еще не настроили среду для разработки .NET MAUI, выполните действия, описанные в статье Начало работы с .NET MAUI в Windows.

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

1. Запустите Visual Studio и в окне запуска щелкните Создать проект , чтобы создать новый проект:

2. В окне Создание проекта выберите MAUI в раскрывающемся списке Все типы проектов, выберите шаблон приложение .NET MAUI и нажмите кнопку Далее :

3. В окне Настройка нового проекта присвойте проекту имя, выберите для него расположение и нажмите кнопку Далее :

4. В окне Дополнительные сведения нажмите кнопку Создать :

5. Дождитесь создания проекта и восстановления его зависимостей:

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

7. В работающем приложении нажмите кнопку Click me несколько раз и обратите внимание, что количество нажатий кнопки увеличивается:

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

Устранение неполадок

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

Добавление набора средств MVVM

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

1. Щелкните правой кнопкой мыши проект в Обозреватель решений и выберите Управление пакетами NuGet... в контекстном меню.

2. В окне Диспетчер пакетов NuGet перейдите на вкладку Обзор и найдите CommunityToolkit.MVVM:

3. Добавьте в проект последнюю стабильную версию пакета CommunityToolkit.MVVM (версии 8.0.0 или более поздней), нажав кнопку Установить.

4. Закройте окно диспетчера пакетов NuGet после завершения установки нового пакета.

5. Снова щелкните проект правой кнопкой мыши и выберите Добавить | Класс из контекстного меню.

6. В появившемся окне Добавление нового элемента назовите класс MainViewModel и нажмите кнопку Добавить:

7. Класс MainViewModel будет целевым объектом привязки данных для MainPage. Обновите его для наследования от ObservableObject в CommunityToolkit.Mvvm.ComponentModel пространстве имен. Это также потребует обновления класса , чтобы иметь значение public и partial.

8. Класс MainViewModel будет содержать следующий код. Запись CountChangedMessage определяет сообщение, которое отправляется при каждом нажатии кнопки Щелкните меня, уведомляя представление об изменении. Атрибуты ObservableProperty и RelayCommand , добавленные в message элементы и IncrementCounter , являются генераторами источников, предоставляемыми набором средств MVVM для создания стандартного кода MVVM для INotifyPropertyChanged реализаций и IRelayCommand . Реализация IncrementCounter метода содержит логику из OnCounterClicked в Файле MainPage.xaml.cs с изменением для отправки сообщения с новым сообщением счетчика. Мы удалим этот код программной части позже.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

namespace MauiOnWindows
{
    public sealed record CountChangedMessage(string Text);

    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        private string message = "Click me";

        private int count;

        [RelayCommand]
        private void IncrementCounter()
        {
            count++;

            if (count == 1)
                message = $"Clicked {count} time";
            else
                message = $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}

Примечание

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

9. Откройте файл MainPage.xaml.cs для редактирования и удалите OnCounterClicked метод и count поле .

10. Добавьте следующий код в MainPage конструктор после вызова InitializeComponenent()метода . Этот код получит сообщение, отправленное IncrementCounter() в , MainViewModel и обновит CounterBtn.Text свойство новым сообщением и озвучит новый текст с SemanticScreenReaderпомощью :

WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
{
    CounterBtn.Text = m.Text;
    SemanticScreenReader.Announce(m.Text);
});

11. Вам также потребуется добавить using оператор в класс :

using CommunityToolkit.Mvvm.Messaging;

12. В MainPage.xamlдобавьте объявление пространства имен в , ContentPage чтобы MainViewModel можно было найти класс:

xmlns:local="clr-namespace:MauiOnWindows"

13. Добавьте MainViewModel в BindingContext качестве для ContentPage:

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>

14. Button Обновите в , MainPage чтобы использовать Command вместо обработки Clicked события. Команда привязывается к свойству IncrementCounterCommand public, созданному генераторами источника набора средств MVVM:

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Command="{Binding Path=IncrementCounterCommand}"
    HorizontalOptions="Center" />

15. Запустите проект еще раз и обратите внимание, что счетчик по-прежнему увеличивается при нажатии кнопки:

16. Во время выполнения проекта попробуйте обновить сообщение "Hello, World!" в первой метке до "Hello, Windows!" в Файле MainPage.xaml. Сохраните файл и обратите внимание, что Горячая перезагрузка XAML обновляет пользовательский интерфейс во время работы приложения:

Дальнейшие действия

Узнайте, как создать приложение, которое отображает данные Microsoft Graph для пользователя, используя пакет SDK Graph в руководстве по .NET MAUI для Windows.

Связанные темы

Ресурсы для обучения .NET MAUI

Использование microsoft API Graph с .NET MAUI в Windows