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

Овладейте опытом работы с .NET MAUI, создавая свое первое кроссплатформенное приложение на Windows.

Знакомство

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

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

Если вы еще не настроили среду для разработки .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.

   пакет 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++;
   
               // Pluralize the message if the count is greater than 1
               message = count == 1 ? $"Clicked {count} time" : $"Clicked {count} times";
   
               WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
           }
       }
   }
   

   Заметка

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

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

10. Добавьте следующий код в конструктор MainPage после вызова InitializeComponent(). Этот код получит сообщение, отправленное 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!" в первом Label, чтобы оно отображалось как "Hello, Windows!" в MainPage.xaml. Сохраните файл и обратите внимание, что XAML Hot Reload обновляет пользовательский интерфейс, пока приложение работает:

    

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

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

Связанное содержимое

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

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