Cvičení: Vytvoření první aplikace .NET MAUI

  • 5 min

V tomto cvičení začnete vytvářet aplikaci .NET MAUI (Multi-platform Application User Interface) pro řetězec obchodu s potravinami. Pomocí šablony vygenerujete výchozí aplikaci a spustíte ji ve Windows a v emulátoru Androidu. V pozdějším cvičení upravíte tuto aplikaci tak, aby přizpůsobila uživatelské rozhraní a přidala funkce vyžadované aplikací řetězce obchodu s potravinami.

Vytvoření nového projektu

  1. Otevřete Visual Studio a vytvořte nové řešení. Tato akce otevře průvodce novým projektem v sadě Visual Studio.

    Tip

    Ujistěte se, že máte nainstalovanou úlohu .NET MAUI se sadou Visual Studio 2022 v17.3 nebo novější (upřednostňovaná verze 17.8 s .NET 8). Další informace najdete tady.

  2. Vyberte typ projektu MAUI, vyberte šablonu aplikace .NET MAUI a vyberte Další.

    Snímek obrazovky s dialogovým oknem Vytvořit nový projekt Je vybraná šablona aplikace .NET MAUI.

  3. Na stránce Konfigurovat nový projekt pojmenujte název phoneword projektu a uložte ho do libovolného umístění. Vyberte Další.

    Snímek obrazovky s dialogovým oknem Konfigurovat nový projekt Uživatelské jméno projektu Phoneword a vybere umístění na pevném disku, do něhož se uloží.

  4. V rozevíracím seznamu Rozhraní vyberte .NET 8.0 (Dlouhodobá podpora) a pak vyberte Vytvořit a vytvořte aplikaci.

Prozkoumání struktury řešení

  1. V okně Průzkumník řešení rozbalte projekt Phoneword. Rozbalte složku Prostředky a její podsložky, rozbalte uzel App.xaml, uzel AppShell.xaml a uzel MainPage.xaml.

    Snímek obrazovky s projektem Phoneword v okně Průzkumníka řešení sady Visual Studio

  2. V projektu si všimněte následujících položek:

    • Složka Resources obsahuje sdílená písma, obrázky a prostředky používané všemi platformami.

    • Soubor MauiProgram.cs obsahuje kód, který konfiguruje aplikaci a určuje, že se třída aplikace má použít ke spuštění aplikace.

    • App.xaml.cs soubor, konstruktor pro třídu Aplikace, vytvoří novou instanci třídy AppShellu, která se pak zobrazí v okně aplikace.

    • Soubor AppShell.xaml obsahuje hlavní rozložení aplikace a úvodní stránku MainPage.

    • Soubor MainPage.xaml obsahuje rozložení stránky. Toto rozložení obsahuje kód XAML (Extensible Application Markup Language) tlačítka s titulkem Klikněte na mě a obrázek, který zobrazuje soubor dotnet_bot.png . Existují i dva další popisky.

    • Soubor MainPage.xaml.cs obsahuje logiku aplikace pro stránku. Konkrétně MainPage třída obsahuje metodu s názvemOnCounterClicked, která se spustí, když uživatel klepne na tlačítko Click me.

Sestavení a spuštění aplikace ve Windows

  1. Na panelu nástrojů sady Visual Studio vyberte profil počítače s Windows. Ze seznamu v rozevíracím seznamu rozhraní vyberte .net8.0-windows .

    Snímek obrazovky s rozevíracím seznamem cílového modulu runtime v sadě Visual Studio Uživatel nastaví profil počítače s Windows jako spouštěcí profil řešení.

  2. V nabídce Ladit vyberte Spustit ladění. Tato akce sestaví, nasadí a spustí aplikaci ve Windows:

    Snímek obrazovky s nabídkou ladění sady Visual Studio Uživatel aplikaci ladí pomocí profilu počítače s Windows.

  3. Ověřte, že se spustí verze aplikace pro Windows. Několikrát vyberte tlačítko Kliknout na mě. Text tlačítka by se měl aktualizovat s počtem, který se s každým klepnutím zvýší.

    Snímek obrazovky se spuštěnou aplikací uživatelského rozhraní pro Windows Uživatel čtyřikrát kliknul na tlačítko Kliknout na mě.

  4. V nabídce Zobrazit vyberte Průzkumník řešení. V okně Průzkumník řešení rozbalte uzel MainPage.xaml a otevřete soubor MainPage.xaml.cs kódem.

  5. V OnCounterClicked metoda změňte příkaz, který zvýší proměnnou count, aby místo toho přidal 5 do této proměnné:

    private void OnCounterClicked(object sender, EventArgs e)
{
    count+=5; // update this

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

  6. Na panelu nástrojů sady Visual Studio vyberte tlačítko Opětovné načítání za provozu:

    Snímek obrazovky s panelem nástrojů sady Visual Studio Tlačítko Opětovné načítání za provozu je zvýrazněné.

  7. Přepněte zpátky do aplikace a vyberte tlačítko Kliknout na mě . Ověřte, že se počet nyní zvýší o 5.

    Poznámka:

    Funkce Opětovné načítání za provozu sady Visual Studio umožňuje upravit kód, když je aplikace spuštěná v režimu ladění. Abyste viděli změny, nemusíte aplikaci zastavovat. Kromě úprav kódu můžete také provést změny v kódu XAML pro stránku a tyto změny se zobrazí ve spuštěné aplikaci.

  8. Zavřete aplikaci a vraťte se do sady Visual Studio.

Sestavení a spuštění aplikace v Androidu

  1. Na panelu nástrojů sady Visual Studio vyberte projekt Phoneword .

  2. V nabídce Nástroje vyberte Android a pak vyberte Android Správce zařízení. Pokud se zobrazí výzva, aby android Správce zařízení udělal změny v počítači, vyberte Ano.

    Snímek obrazovky s nabídkou Nástrojů sady Visual Studio Uživatel vybral možnost Správce zařízení Androidu.

  3. V okně Správce zařízení Androidu vyberte + Nový. V okně Nové zařízení vyberte základní zařízení Pixel 3a (+ Store), vyberte operační systém API 30 a vyberte Vytvořit. Počkejte, než se stáhnou různé knihovny a nakonfiguruje se zařízení.

    Poznámka:

    Příklad v tomto cvičení používá základní zařízení Pixel 3a (+ Store), ale můžete použít novější zařízení. Například Pixel 5 – ROZHRANÍ API 31 nebo Pixel 5 – API 34.

    Snímek obrazovky s oknem Nové zařízení ze sady Android SDK Uživatel vytváří nové zařízení Pixel 3 s vybraným rozhraním API 30.

  4. Po vytvoření zařízení se vraťte do sady Visual Studio.

  5. Na panelu nástrojů sady Visual Studio vyberte v rozevíracím seznamu Konfigurace ladění profil emulátorů Androidu. Vyberte zařízení pixel_3a-api_30, které jste vytvořili.

    Snímek obrazovky s panelem nástrojů sady Visual Studio Uživatel zadal pixel 3 s profilem rozhraní API 30 pro emulátor Android, aby se spustilo ladění.

  6. Spusťte ladění pomocí profilu pixel_3a-api_30 . Tato akce sestaví, nasadí a spustí aplikaci na zařízení s Androidem.

    Snímek obrazovky s panelem nástrojů sady Visual Studio Zobrazí pixel 3 a p i 30 profil je vybrán a připraven zahájit ladění, jakmile uživatel stiskne tlačítko přehrát.

  7. Když se aplikace spustí v emulátoru (tato akce může trvat několik minut), vyberte tlačítko Kliknout na mě a zkontrolujte, jestli aplikace běží úplně stejně jako ve Windows.

    Snímek obrazovky s verzí aplikace Phoneword pro Android spuštěnou ve vybraném emulátoru

  8. Vraťte se do sady Visual Studio a zastavte ladění.