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

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

Введение

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

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

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

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

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

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

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

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

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

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

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

Вы только что запустили свое первое приложение .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 элементам, являются генераторами источников, предоставляемыми набором средств MVM для создания стандартного кода 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 свойству, созданному генераторами исходного набора средств 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

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