Tworzenie pierwszej aplikacji .NET MAUI dla systemu Windows

Korzystaj z praktycznego rozwiązania .NET MAUI, tworząc pierwszą wieloplatformową aplikację w systemie Windows.

Wprowadzenie

Z tego samouczka dowiesz się, jak utworzyć i uruchomić pierwszą aplikację .NET MAUI dla systemu Windows w programie Visual Studio 2022 (17.3 lub nowszym). Dodamy kilka funkcji MVVM Toolkit z zestawu narzędzi .NET Community Toolkit, aby ulepszyć projekt domyślny.

Konfigurowanie środowiska

Jeśli nie skonfigurowałeś jeszcze środowiska do pracy z .NET MAUI, wykonaj kroki, aby Zacząć pracę z .NET MAUI w systemie Windows.

Tworzenie projektu MAUI platformy .NET

1. Uruchom program Visual Studio, a w oknie uruchamiania kliknij Utwórz nowy projekt, aby utworzyć nowy projekt:

   

2. W oknie Utwórz nowy projekt wybierz z listy rozwijanej Wszystkie typy projektów MAUI, wybierz szablon .NET MAUI App, a następnie kliknij przycisk Dalej:

   

3. W oknie Skonfiguruj nowy projekt nadaj projektowi nazwę, wybierz lokalizację, a następnie kliknij przycisk Dalej:

   

4. W oknie Dodatkowe informacje kliknij przycisk Utwórz:

   

5. Poczekaj, aż projekt zostanie utworzony, a jego zależności zostaną przywrócone:

   

6. Na pasku narzędzi programu Visual Studio naciśnij przycisk Maszyna z systemem Windows, aby skompilować i uruchomić aplikację.

7. W uruchomionej aplikacji naciśnij przycisk Kliknij mnie kilka razy i sprawdź, czy liczba kliknięć przycisków jest zwiększana:

   

Właśnie uruchomiono pierwszą aplikację .NET MAUI w systemie Windows. W następnej sekcji dowiesz się, jak dodawać funkcje powiązania danych i obsługi komunikatów z MVVM Toolkit do aplikacji.

Rozwiązywanie problemów

Jeśli kompilacja Twojej aplikacji się nie powiedzie, zapoznaj się z sekcją Rozwiązywanie znanych problemów, która może zawierać rozwiązanie Twojego problemu.

Dodawanie zestawu narzędzi MVVM

Teraz, gdy masz pierwszą aplikację .NET MAUI działającą w systemie Windows, dodajmy do projektu niektóre funkcje zestawu narzędzi MVVM, aby ulepszyć projekt aplikacji.

1. Kliknij prawym przyciskiem myszy projekt w eksploratorze rozwiązań i wybierz pozycję Zarządzaj pakietami NuGet... z menu kontekstowego.

2. W oknie Menedżera pakietów NuGet wybierz kartę Przeglądaj i wyszukaj CommunityToolkit.MVVM:

   pakiet

3. Dodaj do projektu najnowszą stabilną wersję pakietu CommunityToolkit.MVVM (wersja 8.0.0 lub nowsza), klikając Zainstaluj.

4. Zamknij okno Menedżera pakietów NuGet po zakończeniu instalacji nowego pakietu.

5. Ponownie kliknij prawym przyciskiem myszy projekt i wybierz pozycję Dodaj | Klasa z menu kontekstowego.

6. W wyświetlonym oknie Dodaj nowy element nadaj klasie nazwę MainViewModel i kliknij przycisk Dodaj:

   

7. Klasa MainViewModel będzie celem powiązania danych dla MainPage. Zaktualizuj ją tak, aby dziedziczyła z ObservableObject w przestrzeni nazw CommunityToolkit.Mvvm.ComponentModel. To również będzie wymagało zaktualizowania klasy do wartości public i partial.

8. Klasa MainViewModel będzie zawierać następujący kod. Rekord CountChangedMessage definiuje komunikat, który jest wysyłany za każdym razem, gdy klikany jest przycisk "Kliknij mnie", powiadamiając widok o dokonanej zmianie. Atrybuty ObservableProperty i RelayCommand dodane do message i IncrementCounter są generatorami źródłowymi dostarczonymi przez zestaw narzędzi MVVM, aby stworzyć szablonowy kod MVVM do implementacji INotifyPropertyChanged i IRelayCommand. Implementacja metody IncrementCounter zawiera logikę z OnCounterClicked w MainPage.xaml.cs, z modyfikacją polegającą na wysyłaniu komunikatu z nową wartością licznika. Później usuniemy ten kod zaplecza.

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

   Notatka

   Musisz zaktualizować przestrzeń nazw w poprzednim kodzie, aby pasować do przestrzeni nazw w projekcie.

9. Otwórz plik MainPage.xaml.cs do edycji i usuń metodę OnCounterClicked oraz pole count.

10. Dodaj następujący kod do konstruktora MainPage po wywołaniu metody InitializeComponent(). Ten kod otrzyma komunikat wysłany przez IncrementCounter() w MainViewModel i zaktualizuje właściwość CounterBtn.Text przy użyciu nowego komunikatu i ogłosi nowy tekst przy użyciu SemanticScreenReader:

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

11. Należy również dodać do klasy instrukcję using.

    using CommunityToolkit.Mvvm.Messaging;
    

12. W MainPage.xamldodaj deklarację przestrzeni nazw do ContentPage, aby można było znaleźć klasę MainViewModel:

    xmlns:local="clr-namespace:MauiOnWindows"
    

13. Dodaj MainViewModel jako BindingContext dla ContentPage:

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

14. Zaktualizuj Button na MainPage, aby korzystać z Command zamiast obsługiwać zdarzenie Clicked. Polecenie zostanie powiązane z właściwością publiczną IncrementCounterCommand wygenerowaną przez generatory źródłowe narzędzi MVVM.

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

15. Uruchom ponownie projekt i sprawdź, czy licznik jest nadal zwiększany po kliknięciu przycisku:

    

16. Gdy projekt jest uruchomiony, spróbuj zaktualizować komunikat "Hello, World!" w pierwszej etykiecie, aby brzmiał "Hello, Windows!" w MainPage.xaml. Zapisz plik i zwróć uwagę, że funkcja Hot Reload XAML aktualizuje interfejs użytkownika, gdy aplikacja nadal działa.

    

Następne kroki

Dowiedz się, jak utworzyć aplikację wyświetlającą dane programu Microsoft Graph dla użytkownika, korzystając z Graph SDK w samouczku .NET MAUI dla systemu Windows.

Powiązana zawartość

Zasoby do nauki .NET MAUI

Używanie interfejsu API programu Microsoft Graph z interfejsem MAUI platformy .NET w systemie Windows