Vytvoření první aplikace .NET MAUI pro Windows

Získejte praktické informace o .NET MAUI vytvořením první multiplatformní aplikace ve Windows.

Úvod

V tomto kurzu se dozvíte, jak vytvořit a spustit první aplikaci .NET MAUI pro Windows v sadě Visual Studio 2022 (17.3 nebo novější). Přidáme některé MVVM Toolkit funkce z .NET Community Toolkit ke zlepšení návrhu výchozího projektu.

Nastavení prostředí

Pokud jste ještě nenastavili prostředí pro vývoj pro .NET MAUI, postupujte podle pokynů k Začínáme s .NET MAUI ve Windows.

Vytvoření projektu .NET MAUI

1. Spusťte Visual Studio a v úvodním okně klikněte na Vytvořit nový projekt a vytvořte nový projekt:

   

2. V okně Vytvořit nový projekt v rozevíracím seznamu Všechny typy projektů vyberte MAUI, zvolte šablonu aplikace .NET MAUI a klikněte na tlačítko Další:

   

3. V okně Konfigurace nového projektu zadejte název projektu, zvolte umístění a klikněte na tlačítko Další:

   

4. V okně Další informace klikněte na tlačítko Vytvořit:

   

5. Počkejte na vytvoření projektu a obnovení jeho závislostí:

   

6. Na panelu nástrojů sady Visual Studio stisknutím tlačítka Počítače s Windows sestavte a spusťte aplikaci.

7. V běžící aplikaci několikrát stiskněte tlačítko Klikněte na mě a všimněte si, že počet kliknutí na tlačítko se zvýší:

   

Právě jste spustili svou první aplikaci .NET MAUI ve Windows. V další části se dozvíte, jak do aplikace přidat funkce datové vazby a zasílání zpráv z MVVM Toolkit.

Řešení problémů

Pokud se vaší aplikaci nepodaří zkompilovat, projděte si Řešení známých problémů, které můžou mít řešení vašeho problému.

Přidání sady nástrojů MVVM

Teď, když máte první aplikaci .NET MAUI spuštěnou ve Windows, přidáme do projektu některé funkce MVVM Toolkit, abychom zlepšili návrh aplikace.

1. Klikněte pravým tlačítkem myši na projekt v Průzkumníku řešení a v kontextové nabídce vyberte Spravovat balíčky NuGet....

2. V okně správce balíčků NuGet vyberte kartu Procházet a vyhledejte CommunityToolkit.MVVM:

   

3. Přidejte do projektu nejnovější stabilní verzi balíčku CommunityToolkit.MVVM (verze 8.0.0 nebo novější) kliknutím na Nainstalovat.

4. Po dokončení instalace nového balíčku zavřete okno Správce balíčků NuGet.

5. Znovu klikněte pravým tlačítkem myši na projekt a vyberte Přidat | Třída z místní nabídky.

6. V okně Přidat novou položku, které se objeví, pojmenujte třídu MainViewModel a klikněte na Přidat:

   cs-CZ:

7. Třída MainViewModel bude cílem datové vazby pro MainPage. Aktualizujte jej tak, aby dědil z ObservableObject v oboru názvů CommunityToolkit.Mvvm.ComponentModel. To bude také vyžadovat aktualizaci třídy tak, aby byla public a partial.

8. Třída MainViewModel bude obsahovat následující kód. Záznam CountChangedMessage definuje zprávu, která se odešle při každém kliknutí na tlačítko „Klikni na mě“ a informuje zobrazení o změně. Atributy ObservableProperty a RelayCommand, přidané k členům message a IncrementCounter, jsou generátory zdrojů poskytované MVVM Toolkitem pro vytvoření šablonového kódu MVVM pro implementace INotifyPropertyChanged a IRelayCommand. Implementace IncrementCounter metody obsahuje logiku z OnCounterClicked v MainPage.xaml.cs se změnou odeslání zprávy s novou zprávou čítače. Později odebereme kód code-behind.

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

   Poznámka

   Budete muset aktualizovat obor názvů v předchozím kódu tak, aby odpovídal oboru názvů v projektu.

9. Otevřete soubor MainPage.xaml.cs pro úpravy a odeberte metodu OnCounterClicked a pole count.

10. Přidejte následující kód do konstruktoru MainPage za volání InitializeComponent(). Tento kód obdrží zprávu odeslanou IncrementCounter() v MainViewModel a aktualizuje vlastnost CounterBtn.Text novou zprávou a oznámí nový text pomocí SemanticScreenReader:

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

11. Do třídy budete také muset přidat příkaz using:

    using CommunityToolkit.Mvvm.Messaging;
    

12. V MainPage.xamlpřidejte deklaraci oboru názvů do ContentPage, aby byla nalezena třída MainViewModel:

    xmlns:local="clr-namespace:MauiOnWindows"
    

13. Jako BindingContext pro ContentPagepřidejte MainViewModel:

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

14. Aktualizujte Button na MainPage tak, aby místo zpracování události Clicked používali Command. Příkaz vytvoří vazbu na veřejnou vlastnost IncrementCounterCommand, která je generována zdrojovými generátory MVVM Toolkit:

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

15. Spusťte projekt znovu a všimněte si, že se čítač stále zvýší, když kliknete na tlačítko:

    

16. V době, kdy projekt běží, zkuste změnit zprávu "Hello, World!" v prvním popisku na "Hello, Windows!" v souboru MainPage.xaml. Uložte soubor a všimněte si, že XAML Hot Reload aktualizuje uživatelské rozhraní, zatímco aplikace stále běží.

    

Další kroky

Naučte se vytvořit aplikaci, která zobrazuje microsoft Graph data pro uživatele pomocí Graph SDK v kurzu .NET MAUI pro Windows.

Související obsah

Zdroje pro výuku .NET MAUI

použití rozhraní Microsoft Graph API s rozhraním .NET MAUI ve Windows