Övning: Skapa din första .NET MAUI-app

Slutförd

I den här övningen börjar du skapa .NET MAUI-appen (Multi-platform Application User Interface) för livsmedelskedjan. Du använder mallen för att generera standardappen och köra den i Windows och i Android-emulatorn. I en senare övning ändrar du den här appen för att anpassa användargränssnittet och lägga till de funktioner som krävs av butikskedjans app.

Skapa ett nytt projekt

1. Öppna Visual Studio och skapa en ny lösning. Den här åtgärden öppnar guiden Nytt projekt i Visual Studio.

   Dricks

   Kontrollera att .NET MAUI-arbetsbelastningen är installerad med Visual Studio 2022 v17.3 eller senare (v17.8 rekommenderas med .NET 8). Mer information finns här.

2. Välj MAUI-projekttypen, välj mallen .NET MAUI-app och välj Nästa.

   

3. På sidan Konfigurera det nya projektet namnger du projektets telefonord och sparar det på valfri plats. Välj Nästa.

   

4. Välj .NET 8.0 (långsiktig support) i listrutan Framework och välj sedan Skapa för att skapa appen.

Granska lösningsstrukturen

1. I fönstret Solution Explorer expanderar du Phoneword-projektet . Expandera mappen Resurser och dess undermappar, expandera noden App.xaml, Noden AppShell.xaml och noden MainPage.xaml.

   

2. Observera följande objekt i projektet:

   • Mappen Resurser innehåller delade teckensnitt, bilder och tillgångar som används av alla plattformar.

   • Filen MauiProgram.cs innehåller koden som konfigurerar appen och anger att klassen App ska användas för att köra programmet.

   • Den App.xaml.cs filen, konstruktorn för klassen App , skapar en ny instans av Klassen AppShell , som sedan visas i programfönstret.

   • Filen AppShell.xaml innehåller huvudlayouten för programmet och startsidan för MainPage.

   • Filen MainPage.xaml innehåller sidans layout. Den här layouten innehåller XAML-koden (Extensible Application Markup Language) för en knapp med bildtexten Klicka på mig och en bild som visar filen dotnet_bot.png . Det finns även två andra etiketter.

   • Filen MainPage.xaml.cs innehåller programlogik för sidan. Mer specifikt innehåller klassen MainPage en metod med namnet OnCounterClicked som körs när användaren trycker på knappen Klicka på mig.

Skapa och kör programmet i Windows

1. Välj Windows Machine-profilen i Visual Studio-verktygsfältet. Välj .net8.0-windows i listrutan ramverk.

   

2. På menyn Debug (Felsök) väljer du Start Debugging (Börja felsöka). Den här åtgärden skapar, distribuerar och kör appen i Windows:

   

3. Kontrollera att Windows-versionen av appen startas. Välj knappen Klicka på mig flera gånger. Knapptexten bör uppdateras med antalet ökas med varje tryckning.

   

4. På menyn Visa väljer du Solution Explorer. I solution explorer-fönstret expanderar du noden MainPage.xaml och öppnar filen MainPage.xaml.cs code-behind.

5. I metoden OnCounterClicked ändrar du instruktionen som ökar antalet variabeln för att lägga till 5 i den här variabeln i stället:

   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. I Visual Studio-verktygsfältet väljer du knappen Ladda om frekvent:

   

7. Växla tillbaka till appen och välj knappen Klicka på mig . Kontrollera att antalet nu ökar med 5.

   Kommentar

   Med funktionen Frekvent omlastning i Visual Studio kan du ändra koden medan appen körs i felsökningsläge. Du behöver inte stoppa appen för att se ändringarna. Förutom att ändra kod kan du också göra ändringar i XAML-markering för en sida, och dessa ändringar visas i appen som körs.

8. Stäng appen och gå tillbaka till Visual Studio.

Skapa och köra programmet på Android

1. I verktygsfältet i Visual Studio väljer du projektet Phoneword .

2. På menyn Verktyg väljer du Android och sedan Android-Enhetshanteraren. Om du uppmanas att låta Android Enhetshanteraren göra ändringar på datorn väljer du Ja.

   

3. I fönstret Android Enhetshanteraren väljer du + Ny. I fönstret Ny enhet väljer du basenheten Pixel 3a (+ Store), väljer operativsystemet API 30 och väljer Skapa. Vänta medan de olika biblioteken laddas ned och enheten har konfigurerats.

   Kommentar

   I exemplet i den här övningen används basenheten Pixel 3a (+ Store), men du kan använda nyare enheter. Till exempel Pixel 5 – API 31 eller Pixel 5 – API 34.

   

4. När enheten har skapats återgår du till Visual Studio.

5. I verktygsfältet i Visual Studio går du till listrutan Felsökningskonfiguration och väljer profilen Android-emulatorer . Välj den pixel_3a-api_30 enhet som du skapade.

   

6. Börja felsöka med profilen pixel_3a-api_30 . Den här åtgärden skapar, distribuerar och kör appen på Android-enheten.

   

7. När appen börjar köras på emulatorn (den här åtgärden kan ta flera minuter) väljer du knappen Klicka på mig och kontrollerar att appen körs på exakt samma sätt som den gjorde i Windows.

   

8. Gå tillbaka till Visual Studio och sluta felsöka.