.NET MAUI-alkalmazás létrehozása

Ez az oktatóanyag-sorozat bemutatja, hogyan hozható létre .NET többplatformos alkalmazás felhasználói felülete (.NET MAUI), amely csak platformfüggetlen kódot használ. Ez azt jelenti, hogy az ön által írt kód nem a Windowsra, Androidra, iOS-re vagy macOS-ra vonatkozik. A létrehozandó alkalmazás egy jegyzetkészítési alkalmazás lesz, ahol a felhasználó több jegyzetet is létrehozhat, menthet és betölthet.

Ebben az oktatóanyagban a következőket sajátíthatja el:

A Visual Studio 2022-vel olyan alkalmazást fog létrehozni, amellyel megjegyzést írhat, és mentheti az eszköztárolóba. A végleges alkalmazás az alábbiakban látható:

Projekt létrehozása

• 47 perc maradt

Mielőtt elkezdené ezt az oktatóanyagot, kövesse az Az első alkalmazáscikk létrehozása. A projekt létrehozásakor használja a következő beállításokat:

• projektnév

  Ennek Noteskell lennie. Ha a projekt neve eltér, az oktatóanyagból másolt és beillesztett kód buildelési hibákat okozhat.

• Megoldás és projekt elhelyezése ugyanabban a könyvtárban

  Törölje a jelölőnégyzet jelölését.

Válassza ki a legújabb .NET-keretrendszert a projekt létrehozásakor.

Válassza ki a céleszközt

A .NET MAUI-alkalmazások több operációs rendszeren és eszközön való futtatásra lettek tervezve. Ki kell választania, hogy melyik célhoz szeretné tesztelni és hibakereséssel használni az alkalmazást.

Állítsa a Hibakeresési cél a Visual Studio eszköztárán arra az eszközre, amellyel hibakeresést és tesztelést szeretne végezni. Az alábbi lépések bemutatják, hogy a Hibakeresési cél Androidra van-e állítva:

1. Válassza a Cél hibakeresése legördülő gombra.
2. Válassza ki az Android Emulators elemet.
3. Válassza ki az emulátoreszközt.

Az alkalmazáshéj testreszabása

• 42 perc maradt

Amikor a Visual Studio létrehoz egy .NET MAUI-projektet, négy fontos kódfájl jön létre. Ezek a Visual Studio Megoldáskezelő paneljén tekinthetők meg:

Ezek a fájlok segítenek a .NET MAUI-alkalmazás konfigurálásában és futtatásában. Minden fájl más célt szolgál, az alábbiakban leírtak szerint:

• MauiProgram.cs

  Ez egy kódfájl, amely elindítja az alkalmazást. A fájlban található kód az alkalmazás platformfüggetlen belépési pontja, amely konfigurálja és elindítja az alkalmazást. A sablon indítási kódja a App.xaml fájl által meghatározott App osztályra mutat.

• App.xaml és App.xaml.cs

  Az egyszerűség érdekében mindkét fájlt egyetlen fájlnak nevezzük. Általában két fájl található az XAML-fájlokkal, a .xaml fájllal, valamint egy megfelelő kódfájllal, amely a Megoldáskezelőgyermekeleme. A .xaml fájl XAML-korrektúrát tartalmaz, a kódfájl pedig a felhasználó által az XAML-korrektúra használatára létrehozott kódot.

  Az App.xaml fájl alkalmazásszintű XAML-erőforrásokat, például színeket, stílusokat vagy sablonokat tartalmaz. A App.xaml.cs fájl általában olyan kódot tartalmaz, amely példányosítja a Shell-alkalmazást. Ebben a projektben a AppShell osztályra mutat.

• AppShell.xaml és AppShell.xaml.cs

  Ez a fájl határozza meg a AppShell osztályt, amely az alkalmazás vizuális hierarchiájának meghatározására szolgál.

• MainPage.xaml és MainPage.xaml.cs

  Ez az alkalmazás által megjelenített indítási oldal. A MainPage.xaml fájl határozza meg a lap felhasználói felületét (felhasználói felületét). MainPage.xaml.cs tartalmazza az XAML mögötti kódot, például egy gombkattintásos esemény kódját.

"Névjegy" lap hozzáadása

Az első testreszabás egy másik oldal hozzáadása a projekthez. Ez a lap egy "névjegy" lap, amely az alkalmazással kapcsolatos információkat, például a szerzőt, a verziót és esetleg a további információkra mutató hivatkozást jelöli.

1. A Visual Studio Megoldáskezelő paneljén kattintson a jobb gombbal a Jegyzetek projektre, >>Új elem hozzáadása....

   

2. Az Új elem hozzáadása párbeszédpanelen válassza .NET MAUI az ablak bal oldalán található sablonlistában. Ezután válassza ki a .NET MAUI ContentPage (XAML) sablont. Nevezze el a fájlt AboutPage.xaml, majd válassza a Hozzáadáslehetőséget.

   

3. Az AboutPage.xaml fájl megnyit egy új dokumentumlapot, amely megjeleníti az oldal felhasználói felületét képviselő összes XAML-korrektúrát. Cserélje le az XAML-korrektúrát a következő korrektúrára:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.AboutPage">
       <VerticalStackLayout Spacing="10" Margin="10">
           <HorizontalStackLayout Spacing="10">
               <Image Source="dotnet_bot.png"
                      SemanticProperties.Description="The dot net bot waving hello!"
                      HeightRequest="64" />
               <Label FontSize="22" FontAttributes="Bold" Text="Notes" VerticalOptions="End" />
               <Label FontSize="22" Text="v1.0" VerticalOptions="End" />
           </HorizontalStackLayout>
   
           <Label Text="This app is written in XAML and C# with .NET MAUI." />
           <Button Text="Learn more..." Clicked="LearnMore_Clicked" />
       </VerticalStackLayout>
   </ContentPage>
   

4. Mentse a fájlt a CTRL+S billentyűkombinációval, vagy válassza a menüt, Fájl>AboutPage.xaml.

Bontsuk le az oldalon elhelyezett XAML-vezérlők főbb részeit:

• <ContentPage> a AboutPage osztály gyökérobjektuma.

• <VerticalStackLayout> a ContentPageegyetlen gyermekobjektuma. ContentPage csak egy gyermekobjektum lehet. A VerticalStackLayout típusnak több gyermeke is lehet. Ez az elrendezésvezérlő függőlegesen, egymás után rendezi a gyermekeket.

• <HorizontalStackLayout> ugyanúgy működik, mint egy <VerticalStackLayout>, kivéve, hogy a gyermekek vízszintesen vannak elrendezve.

• <Image> megjelenít egy képet, ebben az esetben az összes .NET MAUI-projekthez kapcsolódó dotnet_bot.png képet használja.

  Fontos

  A projekthez hozzáadott fájl valójában dotnet_bot.svg. A .NET MAUI a céleszköz alapján konvertálja a méretezhető vektorgrafikus (SVG) fájlokat hordozható hálózati grafikus (PNG-) fájlokká. Ezért ha SVG-fájlt ad hozzá a .NET MAUI-alkalmazásprojekthez, xAML-ből vagy C#-ból kell hivatkozni rá egy .png kiterjesztéssel. Az SVG-fájlra mutató egyetlen hivatkozásnak a projektfájlban kell lennie.

• <Label> vezérlők szöveget jelenítenek meg.

• <Button> vezérlőket a felhasználó lenyomhatja, ami a Clicked eseményt emeli ki. A kódot a Clicked eseményre válaszul futtathatja.

• Clicked="LearnMore_Clicked"

  A gomb Clicked eseménye hozzá van rendelve a LearnMore_Clicked eseménykezelőhöz, amely a kód mögötti fájlban lesz definiálva. Ezt a kódot a következő lépésben fogja létrehozni.

A kattintott esemény kezelése

A következő lépés a gomb Clicked esemény kódjának hozzáadása.

1. A Visual Studio Megoldáskezelő paneljén bontsa ki a AboutPage.xaml fájlt, hogy felfedje a kód mögötti fájl AboutPage.xaml.cs. Ezután kattintson duplán a AboutPage.xaml.cs fájlra a kódszerkesztőben való megnyitásához.

   

2. Adja hozzá a következő LearnMore_Clicked eseménykezelő kódot, amely megnyitja a rendszerböngészőt egy adott URL-címre:

   private async void LearnMore_Clicked(object sender, EventArgs e)
   {
       // Navigate to the specified URL in the system browser.
       await Launcher.Default.OpenAsync("https://aka.ms/maui");
   }
   

   Figyelje meg, hogy a async kulcsszó hozzá lett adva a metódusdeklarációhoz, amely lehetővé teszi a await kulcsszó használatát a rendszerböngésző megnyitásakor.

3. Mentse a fájlt CTRL+S billentyűkombinációval, vagy válassza a Fájl>Mentés AboutPage.xaml.csparancsot.

Most, hogy az XAML és a AboutPage mögötti kód elkészült, meg kell jelenítenie az alkalmazásban.

Képerőforrások hozzáadása

Egyes vezérlők képeket is használhatnak, amelyek javítják, hogy a felhasználók hogyan használják az alkalmazást. Ebben a szakaszban két, az alkalmazásban használt képet fog letölteni, valamint két alternatív rendszerképet az iOS-hez.

Töltse le a következő képeket:

• icon: About
  Ez a kép a korábban létrehozott névjegylap ikonjaként használatos.

• ikon: Jegyzetek
  Ez a kép az oktatóanyag következő részében létrehozott jegyzetoldal ikonjaként használatos.

• Icon: About (iOS)

• icon: Notes (iOS)

Miután letöltötte a képeket, áthelyezheti őket a Fájlkezelővel a projekt Resources\Images mappájába. A mappában lévő fájlok automatikusan bekerülnek a projektbe MauiImage-erőforrásként. A Visual Studio használatával is hozzáadhatja a képeket a projekthez. Ha kézzel mozgatja a képeket, hagyja ki az alábbi eljárást.

Képek áthelyezése a Visual Studióval

1. A Visual Studio Megoldáskezelő ablaktábláján bontsa ki az Erőforrások mappát, amely megjeleníti a Képek mappát.

   Borravaló

   A Fájlkezelővel közvetlenül a Megoldáskezelő panelre húzhatja a képeket a Képek mappa tetején. Ez automatikusan áthelyezi a fájlokat a mappába, és tartalmazza őket a projektben. Ha úgy dönt, hogy áthúzza a fájlokat, hagyja figyelmen kívül az eljárás többi részét.

2. Kattintson a jobb gombbal a Képek elemre, és válassza a >Meglévő elem hozzáadása...lehetőséget.

3. Keresse meg a letöltött képeket tartalmazó mappát.

4. Módosítsa a szűrőt fájltípus-szűrőre Képfájlok.

5. Tartsa lenyomva CTRL, majd kattintson az egyes letöltött képekre, majd nyomja le hozzáadása

Az alkalmazáshéj módosítása

Amint azt a cikk elején említettük, a AppShell osztály meghatározza az alkalmazás vizuális hierarchiáját, az alkalmazás felhasználói felületének létrehozásához használt XAML-korrektúrát. Frissítse az XAML-t egy TabBar vezérlőelem hozzáadásához:

1. Kattintson duplán az AppShell.xaml fájlra a Megoldáskezelő panelen az XAML-szerkesztő megnyitásához. Cserélje le az XAML-korrektúrát a következő kódra:

   <?xml version="1.0" encoding="UTF-8" ?>
   <Shell
       x:Class="Notes.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:Notes"
       Shell.FlyoutBehavior="Disabled">
   
       <TabBar>
           <ShellContent
               Title="Notes"
               ContentTemplate="{DataTemplate local:MainPage}"
               Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />
   
           <ShellContent
               Title="About"
               ContentTemplate="{DataTemplate local:AboutPage}"
               Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
       </TabBar>
   
   </Shell>
   

2. Mentse a fájlt a CTRL+S billentyűkombináció lenyomásával, vagy a Fájl>AppShell.xamlmentéséhez.

Bontsuk le az XAML főbb részeit:

• <Shell> az XAML-korrektúra gyökérobjektuma.
• <TabBar> a Shelltartalma.
• Két <ShellContent> objektum a <TabBar>. A sablonkód cseréje előtt egyetlen <ShellContent> objektum volt, amely a MainPage lapra mutat.

A TabBar és gyermekei nem a felhasználói felület elemeit jelölik, hanem az alkalmazás vizuális hierarchiájának rendszerezését. A Shell felveszi ezeket az objektumokat, és létrehozza a tartalom felhasználói felületét, felül pedig egy sáv jelöli az egyes oldalakat. Az egyes lapok ShellContent.Icon tulajdonsága a OnPlatform jelölőbővítményt használja. Ez az XAML-jelölőbővítmény különböző értékek megadására szolgál a különböző platformokhoz. Ebben a példában minden platform alapértelmezés szerint a icon_about.png ikont használja, de az iOS és a MacCatalyst icon_about_ios.png.

Minden <ShellContent> objektum egy megjelenítendő lapra mutat. Ezt a ContentTemplate tulajdonság állítja be.

Az alkalmazás futtatása

Futtassa az alkalmazást az F5 vagy a Visual Studio tetején található Lejátszás gomb lenyomásával:

Láthatja, hogy két lap van: Jegyzetek és About. Nyomja le a Névjegy lapot, és az alkalmazás a létrehozott AboutPage navigál. A böngésző megnyitásához nyomja le a További információ... gombot.

Zárja be az alkalmazást, és térjen vissza a Visual Studióba. Ha androidos emulátort használ, állítsa le az alkalmazást a virtuális eszközön, vagy nyomja le a Leállítás gombot a Visual Studio tetején:

Lap létrehozása jegyzethez

• 32 perc maradt

Most, hogy az alkalmazás tartalmazza a MainPage és a AboutPage, megkezdheti az alkalmazás többi részének létrehozását. Először létre fog hozni egy lapot, amely lehetővé teszi a felhasználó számára a jegyzet létrehozását és megjelenítését, majd megírja a kódot a jegyzet betöltéséhez és mentéséhez.

A jegyzetoldal megjeleníti a jegyzetet, és lehetővé teszi a jegyzet mentését vagy törlését. Először adja hozzá az új lapot a projekthez:

1. A Visual Studio Megoldáskezelő paneljén kattintson a jobb gombbal a Jegyzetek projektre, >>Új elem hozzáadása....

2. Az Új elem hozzáadása párbeszédpanelen válassza .NET MAUI az ablak bal oldalán található sablonlistában. Ezután válassza ki a .NET MAUI ContentPage (XAML) sablont. Nevezze el a fájlt NotePage.xaml, majd válassza a hozzáadása lehetőséget.

3. A NotePage.xaml fájl egy új lapon nyílik meg, amely megjeleníti az oldal felhasználói felületét képviselő összes XAML-jelölőt. Cserélje le az XAML-kód korrektúrát a következő korrektúrára:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.NotePage"
                Title="Note">
       <VerticalStackLayout Spacing="10" Margin="5">
           <Editor x:Name="TextEditor"
                   Placeholder="Enter your note"
                   HeightRequest="100" />
   
           <Grid ColumnDefinitions="*,*" ColumnSpacing="4">
               <Button Text="Save"
                       Clicked="SaveButton_Clicked" />
   
               <Button Grid.Column="1"
                       Text="Delete"
                       Clicked="DeleteButton_Clicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

4. Mentse a fájlt a CTRL + S billentyűkombináció lenyomásával, vagy a Fájl >A Jegyzetlap.xaml mentéseparancsra kattintva.

Bontsuk le az oldalon elhelyezett XAML-vezérlők főbb részeit:

• <VerticalStackLayout> a gyermekeket függőlegesen, az egyik a másik alatt rendezi.

• <Editor> egy többsoros szövegszerkesztő vezérlő, és az első vezérlő a VerticalStackLayout.

• <Grid> egy elrendezésvezérlő, és a második vezérlő a VerticalStackLayout.

  Ez a vezérlőelem cellák létrehozásához definiál oszlopokat és sorokat. A gyermekvezérlők ezekben a cellákban vannak elhelyezve.

  Alapértelmezés szerint a Grid vezérlőelem egyetlen sort és oszlopot tartalmaz, egyetlen cellát létrehozva. Az oszlopok szélességgel vannak definiálva, és a szélesség * értéke arra utasítja az oszlopot, hogy a lehető legtöbb helyet töltse ki. Az előző kódrészlet két oszlopot definiált, mindkettő a lehető legtöbb helyet használva, ami egyenletesen elosztja az oszlopokat a kiosztott térben: ColumnDefinitions="*,*". Az oszlopméreteket egy , karakter választja el egymástól.

  A Grid által definiált oszlopok és sorok indexelése 0-tól kezdődik. Az első oszlop tehát a 0 index, a második az 1. index, és így tovább.

• Két <Button> vezérlő található a <Grid>, és hozzárendelt egy oszlopot. Ha egy gyermek vezérlőelem nem határoz meg oszlop-hozzárendelést, az automatikusan hozzá lesz rendelve az első oszlophoz. Ebben a korrektúrában az első gomb a "Mentés" gomb, amely automatikusan hozzá van rendelve az első oszlophoz, a 0 oszlophoz. A második gomb a "Törlés" gomb, és hozzá van rendelve a második oszlophoz, az 1. oszlophoz.

  Figyelje meg, hogy a két gombon a Clicked esemény van kezelve. A következő szakaszban adja hozzá a kezelők kódját.

Jegyzet betöltése és mentése

Nyissa meg a NotePage.xaml.cs kód mögötti fájlt. A NotePage.xaml fájl mögötti kódját három módon nyithatja meg:

• Ha a NotePage.xaml meg van nyitva, és az aktív dokumentum szerkesztése folyamatban van, nyomja le F7.
• Ha a NotePage.xaml meg van nyitva, és az aktív dokumentum szerkesztése folyamatban van, kattintson a jobb gombbal a szövegszerkesztőben, és válassza a Kód megtekintéselehetőséget.
• A Megoldáskezelő segítségével bontsa ki a NotePage.xaml bejegyzést, amely megjeleníti a NotePage.xaml.cs fájlt. A fájl megnyitásához kattintson duplán a fájlra.

Új XAML-fájl hozzáadásakor a mögöttes kód egyetlen sort tartalmaz a konstruktorban, a InitializeComponent metódus hívását:

namespace Notes;

public partial class NotePage : ContentPage
{
    public NotePage()
    {
        InitializeComponent();
    }
}

A InitializeComponent metódus beolvassa az XAML-korrektúrát, és inicializálja a korrektúra által definiált összes objektumot. Az objektumok a szülő-gyermek kapcsolatokban vannak összekapcsolva, és a kódban definiált eseménykezelők az XAML-ben beállított eseményekhez vannak csatolva.

Most, hogy egy kicsit jobban megismerte a kód mögötti fájlokat, kódot fog hozzáadni a NotePage.xaml.cs kód mögötti fájlhoz a jegyzetek betöltésének és mentésének kezeléséhez.

1. Amikor létrejön egy jegyzet, az az eszközre szövegfájlként lesz mentve. A fájl nevét a _fileName változó jelöli. Adja hozzá a következő string változódeklarációt a NotePage osztályhoz:

   public partial class NotePage : ContentPage
   {
       string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
   

   A fenti kód egy elérési utat hoz létre a fájlhoz, amely az alkalmazás helyi adatkönyvtárában tárolja. A fájlnév notes.txt.

2. Az osztály konstruktorában a InitializeComponent metódus meghívása után olvassa be a fájlt az eszközről, és tárolja annak tartalmát a TextEditor vezérlő Text tulajdonságában:

   public NotePage()
   {
       InitializeComponent();
   
       if (File.Exists(_fileName))
           TextEditor.Text = File.ReadAllText(_fileName);
   }
   

3. Ezután adja hozzá a kódot az XAML-ben definiált Clicked események kezeléséhez:

   private void SaveButton_Clicked(object sender, EventArgs e)
   {
       // Save the file.
       File.WriteAllText(_fileName, TextEditor.Text);
   }
   
   private void DeleteButton_Clicked(object sender, EventArgs e)
   {
       // Delete the file.
       if (File.Exists(_fileName))
           File.Delete(_fileName);
   
       TextEditor.Text = string.Empty;
   }
   

   A SaveButton_Clicked metódus a Editor vezérlőelemben írja a szöveget a _fileName változó által képviselt fájlba.

   A DeleteButton_Clicked metódus először ellenőrzi, hogy a _fileName változó által képviselt fájl törlődik-e, és ha létezik. Ezután a Editor vezérlőelem szövege törlődik.

4. Mentse a fájlt a CTRL + S billentyűkombinációval, vagy válassza a Fájl>Mentés NotePage.xaml.csparancsot.

A kód mögötti fájl végső kódjának a következőképpen kell kinéznie:

namespace Notes;

public partial class NotePage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    public NotePage()
    {
        InitializeComponent();

        if (File.Exists(_fileName))
            TextEditor.Text = File.ReadAllText(_fileName);
    }

    private void SaveButton_Clicked(object sender, EventArgs e)
    {
        // Save the file.
        File.WriteAllText(_fileName, TextEditor.Text);
    }

    private void DeleteButton_Clicked(object sender, EventArgs e)
    {
        // Delete the file.
        if (File.Exists(_fileName))
            File.Delete(_fileName);

        TextEditor.Text = string.Empty;
    }
}

A jegyzet tesztelése

Most, hogy jegyzetoldal elkészült, meg kell adnia a felhasználónak. Nyissa meg az AppShell.xaml fájlt, és módosítsa az első ShellContent bejegyzést úgy, hogy a NotePage mutasson a MainPagehelyett:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Mentse a fájlt, és futtassa az alkalmazást. Próbáljon meg begépelni a beviteli mezőbe, és nyomja le a Mentés gombot. Zárja be az alkalmazást, és nyissa meg újra. A megadott megjegyzést az eszköz tárolójából kell betölteni.

Adatok kötése a felhasználói felülethez és navigálás a lapok között

• 22 perc maradt

Az oktatóanyag ezen része bemutatja a nézetek, modellek és alkalmazáson belüli navigáció fogalmait.

Az oktatóanyag előző lépéseiben két oldalt adott hozzá a projekthez: NotePage és AboutPage. A lapok az adatok nézetét jelölik. A NotePage egy "nézet", amely "megjegyzésadatokat" jelenít meg, a AboutPage pedig egy "nézet", amely az "alkalmazásinformációs adatokat" jeleníti meg. Mindkét nézet rendelkezik az adatok rögzített vagy beágyazott modelljével, és el kell különítenie az adatmodellt a nézettől.

Mi az előnye a modell nézettől való elválasztásának? Lehetővé teszi, hogy úgy tervezhesse meg a nézetet, hogy a modell bármely részét képviselje és használhassa anélkül, hogy a modellt megvalósító tényleges kód miatt kellene aggódnia. Ez adatkötéssel történik, amelyet az oktatóanyag későbbi részében fogunk bemutatni. Egyelőre azonban lehetővé teszi a projekt átstrukturálását.

A nézet és a modell elkülönítése

A meglévő kód újrabontásával válassza el a modellt a nézettől. A következő néhány lépés a kód rendszerezését fogja elvégezni, hogy a nézetek és modellek egymástól külön legyenek definiálva.

1. Törölje MainPage.xaml és MainPage.xaml.cs a projektből, már nincs rájuk szükség. A Megoldáskezelő panelen keresse meg MainPage.xamlbejegyzését, kattintson rá a jobb gombbal, és válassza a Törléslehetőséget.

   Borravaló

   Ha törli a MainPage.xaml elemet, akkor a MainPage.xaml.cs elemet is törölnie kell. Ha MainPage.xaml.cs nem törölték, kattintson rá a jobb gombbal, és válassza a Törléslehetőséget.

2. Kattintson a jobb gombbal a Notes projektre, és válassza >Új mappa hozzáadásalehetőséget. Nevezze el a mappát Models.

3. Kattintson a jobb gombbal a Notes projektre, és válassza >Új mappa hozzáadásalehetőséget. Nevezze el a mappát Views.

4. Keresse meg a NotePage.xaml elemet, és húzza a Views mappába. A NotePage.xaml.cs vele együtt kell mozognia.

   Fontos

   Amikor áthelyez egy fájlt, a Visual Studio általában figyelmeztetést kap arról, hogy az áthelyezési művelet mennyi ideig tarthat. Ez itt nem jelenthet problémát, ha ezt a figyelmeztetést látja, nyomja le OK.

   A Visual Studio azt is megkérdezheti, hogy módosítani szeretné-e az áthelyezett fájl névterét. Válassza a Nincs lehetőséget, mivel a következő lépések megváltoztatják a névteret.

5. Keresse meg a AboutPage.xaml elemet, és húzza a Views mappába. A AboutPage.xaml.cs kell mozogni vele.

A nézet névterének frissítése

Most, hogy a nézetek át lettek helyezve a Views mappába, frissítenie kell a névtereket az egyezéshez. A lapok XAML-fájljainak és kód mögötti fájljainak névtere Notes. Ezt frissíteni kell a Notes.Views.

1. A Megoldáskezelő panelen bontsa ki NotePage.xaml és AboutPage.xaml a mögöttes fájlok megjelenítéséhez:

   

2. Kattintson duplán a NotePage.xaml.cs elemre a kódszerkesztő megnyitásához. Módosítsa a névteret Notes.Views:

   namespace Notes.Views;
   

3. Ismételje meg a AboutPage.xaml.cs elem előző lépéseit.

4. Kattintson duplán a NotePage.xaml elemre az XAML-szerkesztő megnyitásához. A régi névtérre a x:Class attribútum hivatkozik, amely meghatározza, hogy az XAML kód mögött melyik osztálytípus szerepel. Ez a bejegyzés nem csak a névtér, hanem a típussal rendelkező névtér is. Módosítsa a x:Class értékét Notes.Views.NotePage:

   x:Class="Notes.Views.NotePage"
   

5. Ismételje meg az előző lépést az AboutPage.xaml elemnél, de állítsa a x:Class értéket Notes.Views.AboutPage.

A névtérhivatkozás javítása a Shellben

Az AppShell.xaml két lapot határoz meg, egyet a NotesPage, egyet pedig a AboutPage. Most, hogy ezt a két lapot áthelyezték egy új névtérbe, az XAML típusleképezése érvénytelen. A Megoldáskezelő panelen kattintson duplán az AppShell.xaml bejegyzésre az XAML-szerkesztőben való megnyitásához. Úgy kell kinéznie, mint a következő kódrészlet:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

A .NET-névtér xml-névtér-deklaráción keresztül lesz importálva az XAML-be. Az előző XAML-korrektúra a gyökérelem xmlns:local="clr-namespace:Notes" attribútuma: <Shell>. Az XML-névtér deklarálásának formátuma egy .NET-névtér importálásához ugyanabban a szerelvényben a következő:

xmlns:{XML namespace name}="clr-namespace:{.NET namespace}"

Az előző deklaráció tehát a local XML-névterét a Notes.NET-névteréhez rendeli. Az általános gyakorlat, hogy a local nevet a projekt gyökérnévteréhez rendeli.

Távolítsa el a local XML-névteret, és adjon hozzá egy újat. Ez az új XML-névtér megfelelteti a Notes.Views.NET-névterét, így views. A deklarációnak a következő attribútumhoz hasonlóan kell kinéznie: xmlns:views="clr-namespace:Notes.Views".

A local XML-névteret a ShellContent.ContentTemplate tulajdonságok használták, és módosítsa őket views. Az XAML-nek most az alábbi kódrészlethez hasonlóan kell kinéznie:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Notes.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate views:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate views:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Most már képesnek kell lennie arra, hogy fordítói hibák nélkül futtassa az alkalmazást, és mindennek a korábbiakhoz hasonlóan kell működnie.

A modell definiálása

Jelenleg a modell a jegyzetbe és a nézetekbe beágyazott adatok. Új osztályokat hozunk létre az adatok megjelenítéséhez. Először a jegyzetoldal adatait ábrázoló modell:

1. A Megoldáskezelő panelen kattintson a jobb gombbal a Models mappára, és válassza >osztály hozzáadása....

2. Nevezze el az osztályt Note.cs, és nyomja le hozzáadása gombot.

3. Nyissa meg Note.cs, és cserélje le a kódot a következő kódrészletre:

   namespace Notes.Models;
   
   internal class Note
   {
       public string Filename { get; set; }
       public string Text { get; set; }
       public DateTime Date { get; set; }
   }
   

4. Mentse a fájlt.

Ezután hozza létre a névjegylap modelljét:

1. A Megoldáskezelő panelen kattintson a jobb gombbal a Models mappára, és válassza >osztály hozzáadása....

2. Nevezze el az osztályt About.cs, és nyomja le hozzáadása gombot.

3. Nyissa meg About.cs, és cserélje le a kódot a következő kódrészletre:

   namespace Notes.Models;
   
   internal class About
   {
       public string Title => AppInfo.Name;
       public string Version => AppInfo.VersionString;
       public string MoreInfoUrl => "https://aka.ms/maui";
       public string Message => "This app is written in XAML and C# with .NET MAUI.";
   }
   

4. Mentse a fájlt.

A Névjegy lap frissítése

A névjegylap lesz a leggyorsabban frissíthető lap, és ön futtathatja az alkalmazást, és megtekintheti, hogyan tölti be az adatokat a modellből.

1. A Megoldáskezelő panelen nyissa meg a Views\AboutPage.xaml fájlt.

2. Cserélje le a tartalmat a következő kódrészletre:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:models="clr-namespace:Notes.Models"
                x:Class="Notes.Views.AboutPage">
       <ContentPage.BindingContext>
           <models:About />
       </ContentPage.BindingContext>
       <VerticalStackLayout Spacing="10" Margin="10">
           <HorizontalStackLayout Spacing="10">
               <Image Source="dotnet_bot.png"
                      SemanticProperties.Description="The dot net bot waving hello!"
                      HeightRequest="64" />
               <Label FontSize="22" FontAttributes="Bold" Text="{Binding Title}" VerticalOptions="End" />
               <Label FontSize="22" Text="{Binding Version}" VerticalOptions="End" />
           </HorizontalStackLayout>
   
           <Label Text="{Binding Message}" />
           <Button Text="Learn more..." Clicked="LearnMore_Clicked" />
       </VerticalStackLayout>
   
   </ContentPage>
   

Tekintsük át az előző kódrészletben kiemelt módosított sorokat:

• xmlns:models="clr-namespace:Notes.Models"

  Ez a sor leképozza a Notes.Models .NET-névteret a models XML-névtérre.

• A ContentPageBindingContext tulajdonsága a Note.Models.About osztály egy példányára van állítva a models:AboutXML-névterének és objektumának használatával. Ez tulajdonságelem szintaxisának használatával lett beállítva XML-attribútum helyett.

  Fontos

  Eddig a tulajdonságok XML-attribútummal lettek beállítva. Ez nagyszerűen használható egyszerű értékekhez, például Label.FontSize tulajdonsághoz. Ha azonban a tulajdonság értéke összetettebb, tulajdonságelem szintaxisát kell használnia az objektum létrehozásához. Tekintse meg az alábbi példát egy címke létrehozására a FontSize tulajdonságkészletével:

  <Label FontSize="22" />
  

  Ugyanez a FontSize tulajdonság beállítható tulajdonságelem szintaxisával:

  <Label>
      <Label.FontSize>
          22
      </Label.FontSize>
  </Label>
  

• Három <Label> vezérlőelem Text tulajdonságértékét egy rögzített sztringről kötésszintaxisra módosították: {Binding PATH}.

  {Binding} szintaxis futásidőben lesz feldolgozva, így a kötésből visszaadott érték dinamikus lehet. A {Binding PATH}PATH része a tulajdonság elérési útja. A tulajdonság az aktuális vezérlő BindingContextszármazik. A <Label> vezérlővel a BindingContext nincs halmaza. A környezet akkor öröklődik a szülőtől, ha a vezérlő nem eteti, amely ebben az esetben a szülőobjektum-beállítási környezet a gyökérobjektum: ContentPage.

  A BindingContext objektum a About modell egy példánya. Az egyik címke kötési útvonala a Label.Text tulajdonságot a About.Title tulajdonsághoz köti.

A névjegylap utolsó módosítása a weblapot megnyitó gombkattintás frissítése. Az URL-címet a kód mögötti kód rögzítette, de az URL-címnek a BindingContext tulajdonságban lévő modellből kell származnia.

1. A Megoldáskezelő panelen nyissa meg a Nézetek\AboutPage.xaml.cs fájlt.

2. Cserélje le a LearnMore_Clicked metódust a következő kódra:

   private async void LearnMore_Clicked(object sender, EventArgs e)
   {
       if (BindingContext is Models.About about)
       {
           // Navigate to the specified URL in the system browser.
           await Launcher.Default.OpenAsync(about.MoreInfoUrl);
       }
   }
   

Ha megtekinti a kiemelt sort, a kód ellenőrzi, hogy a BindingContextModels.About típusú-e, és ha igen, hozzárendeli a about változóhoz. A if utasítás következő sora megnyitja a böngészőt a about.MoreInfoUrl tulajdonság által megadott URL-címre.

Futtassa az alkalmazást, és látnia kell, hogy pontosan ugyanúgy fut, mint korábban. Próbálja meg módosítani a modell értékeit, és nézze meg, hogyan változik a böngésző által megnyitott felhasználói felület és URL is.

Jegyzet frissítése lap

Az előző szakasz a about lapnézetet a about modellhez kötötte, és most ugyanezt fogja tenni, és a note nézetet a note modellhez köti. Ebben az esetben azonban a modell nem XAML-ben jön létre, hanem a következő néhány lépésben a kód mögötti kódban lesz megadva.

1. A Megoldáskezelő panelen nyissa meg a Views\NotePage.xaml fájlt.

2. Módosítsa a <Editor> vezérlőelemet, és vegye fel a Text tulajdonságot. A tulajdonság kötése a Text tulajdonsághoz: <Editor ... Text="{Binding Text}":

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.Views.NotePage"
                Title="Note">
       <VerticalStackLayout Spacing="10" Margin="5">
           <Editor x:Name="TextEditor"
                   Placeholder="Enter your note"
                   Text="{Binding Text}"
                   HeightRequest="100" />
   
           <Grid ColumnDefinitions="*,*" ColumnSpacing="4">
               <Button Text="Save"
                       Clicked="SaveButton_Clicked" />
   
               <Button Grid.Column="1"
                       Text="Delete"
                       Clicked="DeleteButton_Clicked" />
           </Grid>
       </VerticalStackLayout>
   </ContentPage>
   

A kód mögötti módosítások bonyolultabbak, mint az XAML. Az aktuális kód betölti a fájltartalmat a konstruktorba, majd közvetlenül a TextEditor.Text tulajdonságra állítja. Így néz ki az aktuális kód:

public NotePage()
{
    InitializeComponent();

    if (File.Exists(_fileName))
        TextEditor.Text = File.ReadAllText(_fileName);
}

Ahelyett, hogy betölti a megjegyzést a konstruktorba, hozzon létre egy új LoadNote metódust. Ez a módszer a következőket teszi:

• Fájlnévparaméter elfogadása.
• Hozzon létre egy új jegyzetmodellt, és állítsa be a fájlnevet.
• Ha a fájl létezik, töltse be a tartalmát a modellbe.
• Ha a fájl létezik, frissítse a modellt a fájl létrehozásának dátumával.
• Állítsa a lap BindingContext a modellre.

1. A Megoldáskezelő panelen nyissa meg a Views\NotePage.xaml.cs fájlt.

2. Adja hozzá a következő metódust az osztályhoz:

   private void LoadNote(string fileName)
   {
       Models.Note noteModel = new Models.Note();
       noteModel.Filename = fileName;
   
       if (File.Exists(fileName))
       {
           noteModel.Date = File.GetCreationTime(fileName);
           noteModel.Text = File.ReadAllText(fileName);
       }
   
       BindingContext = noteModel;
   }
   

3. Frissítse az osztálykonstruktort LoadNotehívásához. A jegyzet fájlnevének véletlenszerűen létrehozott névnek kell lennie, amelyet az alkalmazás helyi adatkönyvtárában kell létrehozni.

   public NotePage()
   {
       InitializeComponent();
   
       string appDataPath = FileSystem.AppDataDirectory;
       string randomFileName = $"{Path.GetRandomFileName()}.notes.txt";
   
       LoadNote(Path.Combine(appDataPath, randomFileName));
   }
   

Az összes jegyzetet listázó nézet és modell hozzáadása

• 7 perc maradt

Az oktatóanyag ezen része hozzáadja az alkalmazás utolsó részét, egy nézetet, amely megjeleníti a korábban létrehozott összes jegyzetet.

Több jegyzet és navigáció

Jelenleg a jegyzet nézet egyetlen megjegyzést jelenít meg. Több jegyzet megjelenítéséhez hozzon létre egy új nézetet és modellt: AllNotes.

1. A Megoldáskezelő panelen kattintson a jobb gombbal a Views mappára, és válassza >Új elem hozzáadása...
2. Az Új elem hozzáadása párbeszédpanelen válassza .NET MAUI az ablak bal oldalán található sablonlistában. Ezután válassza ki a .NET MAUI ContentPage (XAML) sablont. Nevezze el a fájlt AllNotesPage.xaml, majd válassza hozzáadása lehetőséget.
3. A Megoldáskezelő panelen kattintson a jobb gombbal a Models mappára, és válassza >osztály hozzáadása...
4. Nevezze el az osztályt AllNotes.cs, és nyomja le hozzáadása gombot.

Az AllNotes-modell kódolása

Az új modell a több jegyzet megjelenítéséhez szükséges adatokat jeleníti meg. Ezek az adatok olyan tulajdonságok lesznek, amelyek jegyzetek gyűjteményét jelölik. A gyűjtemény egy ObservableCollection lesz, amely egy speciális gyűjtemény. Ha egy vezérlőelem, amely több elemet ( például egy ListView) tartalmaz, egy ObservableCollectionvan kötve, a kettő együttműködve automatikusan szinkronizálja az elemek listáját a gyűjteményrel. Ha a lista hozzáad egy elemet, a gyűjtemény frissül. Ha a gyűjtemény hozzáad egy elemet, a vezérlő automatikusan frissül egy új elemgel.

1. A Megoldáskezelő panelen nyissa meg a Models\AllNotes.cs fájlt.

2. Cserélje le a kódot a következő kódrészletre:

   using System.Collections.ObjectModel;
   
   namespace Notes.Models;
   
   internal class AllNotes
   {
       public ObservableCollection<Note> Notes { get; set; } = new ObservableCollection<Note>();
   
       public AllNotes() =>
           LoadNotes();
   
       public void LoadNotes()
       {
           Notes.Clear();
   
           // Get the folder where the notes are stored.
           string appDataPath = FileSystem.AppDataDirectory;
   
           // Use Linq extensions to load the *.notes.txt files.
           IEnumerable<Note> notes = Directory
   
                                       // Select the file names from the directory
                                       .EnumerateFiles(appDataPath, "*.notes.txt")
   
                                       // Each file name is used to create a new Note
                                       .Select(filename => new Note()
                                       {
                                           Filename = filename,
                                           Text = File.ReadAllText(filename),
                                           Date = File.GetLastWriteTime(filename)
                                       })
   
                                       // With the final collection of notes, order them by date
                                       .OrderBy(note => note.Date);
   
           // Add each note into the ObservableCollection
           foreach (Note note in notes)
               Notes.Add(note);
       }
   }
   

Az előző kód deklarál egy Notesnevű gyűjteményt, és a LoadNotes metódussal tölti be a jegyzeteket az eszközről. Ez a módszer LINQ-bővítményekkel tölti be, alakítja át és rendezi az adatokat a Notes gyűjteménybe.

Az AllNotes lap tervezése

Ezután a nézetet úgy kell megtervezni, hogy támogassa az AllNotes modellt.

1. A Megoldáskezelő panelen nyissa meg a Views\AllNotesPage.xaml fájlt.

2. Cserélje le a kódot a következő korrektúrára:

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="Notes.Views.AllNotesPage"
                Title="Your Notes">
       <!-- Add an item to the toolbar -->
       <ContentPage.ToolbarItems>
           <ToolbarItem Text="Add" Clicked="Add_Clicked" IconImageSource="{FontImage Glyph='+', Color=Black, Size=22}" />
       </ContentPage.ToolbarItems>
   
       <!-- Display notes in a list -->
       <CollectionView x:Name="notesCollection"
                           ItemsSource="{Binding Notes}"
                           Margin="20"
                           SelectionMode="Single"
                           SelectionChanged="notesCollection_SelectionChanged">
   
           <!-- Designate how the collection of items are laid out -->
           <CollectionView.ItemsLayout>
               <LinearItemsLayout Orientation="Vertical" ItemSpacing="10" />
           </CollectionView.ItemsLayout>
   
           <!-- Define the appearance of each item in the list -->
           <CollectionView.ItemTemplate>
               <DataTemplate>
                   <StackLayout>
                       <Label Text="{Binding Text}" FontSize="22"/>
                       <Label Text="{Binding Date}" FontSize="14" TextColor="Silver"/>
                   </StackLayout>
               </DataTemplate>
           </CollectionView.ItemTemplate>
       </CollectionView>
   </ContentPage>
   

Az előző XAML néhány új fogalmat vezet be:

• A ContentPage.ToolbarItems tulajdonság egy ToolbarItemtartalmaz. Az itt definiált gombok általában az alkalmazás tetején, az oldal címe mentén jelennek meg. A platformtól függően azonban előfordulhat, hogy más helyzetben van. Ha az egyik gombot lenyomja, a Clicked esemény a normál gombhoz hasonlóan jelenik meg.

  A ToolbarItem.IconImageSource tulajdonság úgy állítja be az ikont, hogy megjelenjen a gombon. Az ikon bármilyen, a projekt által definiált képerőforrás lehet, ebben a példában azonban egy FontImage használunk. A FontImage egy betűtípus egyetlen karakterjelét használhatják képként.

• A CollectionView vezérlő elemek gyűjteményét jeleníti meg, és ebben az esetben a modell Notes tulajdonságához van kötve. Az egyes elemek gyűjteménynézet általi megjelenítési módja a CollectionView.ItemsLayout és CollectionView.ItemTemplate tulajdonságokon keresztül van beállítva.

  A gyűjtemény minden eleméhez a CollectionView.ItemTemplate létrehozza a deklarált XAML-t. Az XAML BindingContext maga a gyűjteményelem lesz, ebben az esetben minden egyes megjegyzés. A jegyzet sablonja két címkét használ, amelyek a jegyzet Text és Date tulajdonságaihoz vannak kötve.

• A CollectionView kezeli a SelectionChanged eseményt, amely akkor jön létre, amikor a gyűjteménynézetben kiválaszt egy elemet.

A nézet mögötti kódnak meg kell írnia a jegyzetek betöltéséhez és az események kezeléséhez.

1. A Megoldáskezelő panelen nyissa meg a Nézetek/AllNotesPage.xaml.cs fájlt.

2. Cserélje le a kódot a következő kódrészletre:

   namespace Notes.Views;
   
   public partial class AllNotesPage : ContentPage
   {
       public AllNotesPage()
       {
           InitializeComponent();
   
           BindingContext = new Models.AllNotes();
       }
   
       protected override void OnAppearing()
       {
           ((Models.AllNotes)BindingContext).LoadNotes();
       }
   
       private async void Add_Clicked(object sender, EventArgs e)
       {
           await Shell.Current.GoToAsync(nameof(NotePage));
       }
   
       private async void notesCollection_SelectionChanged(object sender, SelectionChangedEventArgs e)
       {
           if (e.CurrentSelection.Count != 0)
           {
               // Get the note model
               var note = (Models.Note)e.CurrentSelection[0];
   
               // Should navigate to "NotePage?ItemId=path\on\device\XYZ.notes.txt"
               await Shell.Current.GoToAsync($"{nameof(NotePage)}?{nameof(NotePage.ItemId)}={note.Filename}");
   
               // Unselect the UI
               notesCollection.SelectedItem = null;
           }
       }
   }
   

Ez a kód a konstruktor használatával állítja be a lap BindingContext a modellre.

A OnAppearing metódus felül van bírálva az alaposztályból. Ezt a metódust a rendszer automatikusan meghívja, amikor megjelenik a lap, például amikor a lapra navigál. Az itt található kód azt jelzi a modellnek, hogy töltse be a jegyzeteket. Mivel a AllNotes nézetCollectionView az AllNotes-modellNotes tulajdonságához van kötve, amely egy ObservableCollection, a jegyzetek betöltésekor a CollectionView automatikusan frissül.

A Add_Clicked kezelő egy új koncepciót vezet be, a navigációt. Mivel az alkalmazás a .NET MAUI Shellt használja, a Shell.Current.GoToAsync metódus meghívásával navigálhat a lapokra. Figyelje meg, hogy a kezelő a async kulcsszóval van deklarálva, amely lehetővé teszi a await kulcsszó használatát navigáláskor. Ez a kezelő a NotePagelép.

Az előző kódrészlet utolsó kódrészlete a notesCollection_SelectionChanged kezelő. Ez a metódus a jelenleg kijelölt elemet, egy Note modellt használja, és az adataival navigál a NotePage. GoToAsync URI-sztringet használ a navigációhoz. Ebben az esetben létrejön egy sztring, amely egy lekérdezési sztringparamétert használ egy tulajdonság beállításához a céloldalon. Az URI-t jelképező interpolált sztring a következő sztringhez hasonlóan néz ki:

NotePage?ItemId=path\on\device\XYZ.notes.txt

A ItemId= paraméter a jegyzetet tároló eszköz fájlnevére van állítva.

A Visual Studio azt jelezheti, hogy a NotePage.ItemId tulajdonság nem létezik, ami nem. A következő lépés a Note nézet módosítása a modell betöltéséhez a létrehozandó ItemId paraméter alapján.

Lekérdezési sztringparaméterek

A Note nézetnek támogatnia kell a lekérdezési sztring paramétert, ItemId. Hozza létre most:

1. A Megoldáskezelő panelen nyissa meg a Nézetek/NotePage.xaml.cs fájlt.

2. Adja hozzá a QueryProperty attribútumot a class kulcsszóhoz, megadva a lekérdezési sztring tulajdonság nevét, valamint az osztálytulajdonságot, amelynek megfelel, ItemId és ItemId:

   [QueryProperty(nameof(ItemId), nameof(ItemId))]
   public partial class NotePage : ContentPage
   

3. Adjon hozzá egy ItemIdnevű új string tulajdonságot. Ez a tulajdonság meghívja a LoadNote metódust, amely a tulajdonság értékét adja át, ami viszont a megjegyzés fájlneve lesz:

   public string ItemId
   {
       set { LoadNote(value); }
   }
   

4. Cserélje le a SaveButton_Clicked és DeleteButton_Clicked kezelőket a következő kódra:

   private async void SaveButton_Clicked(object sender, EventArgs e)
   {
       if (BindingContext is Models.Note note)
           File.WriteAllText(note.Filename, TextEditor.Text);
   
       await Shell.Current.GoToAsync("..");
   }
   
   private async void DeleteButton_Clicked(object sender, EventArgs e)
   {
       if (BindingContext is Models.Note note)
       {
           // Delete the file.
           if (File.Exists(note.Filename))
               File.Delete(note.Filename);
       }
   
       await Shell.Current.GoToAsync("..");
   }
   

   A gombok mostantól async. Miután lenyomták őket, a lap vissza lép az előző lapra a ..URI-jának használatával.

5. Törölje a _fileName változót a kód tetejéről, mivel azt már nem használja az osztály.

Az alkalmazás vizualizációs fájának módosítása

A AppShell továbbra is betölti az egyetlen jegyzetoldalt, ehelyett be kell töltenie a AllPages nézetet. Nyissa meg az AppShell.xaml fájlt, és módosítsa az első ShellContent bejegyzést úgy, hogy a AllNotesPage mutasson a NotePagehelyett:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Notes.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate views:AllNotesPage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate views:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Ha most futtatja az alkalmazást, az összeomlik, ha lenyomja a hozzáadása gombot, és arra panaszkodik, hogy nem tud navigálni a NotesPage. Minden lapnak, amely egy másik oldalról navigálható, regisztrálnia kell a navigációs rendszerben. A AllNotesPage és AboutPage lapok automatikusan regisztrálva lesznek a navigációs rendszerben a TabBardeklarálásával.

Regisztrálja a NotesPage a navigációs rendszerben:

1. A Megoldáskezelő panelen nyissa meg a AppShell.xaml.cs fájlt.

2. Adjon hozzá egy sort a navigációs útvonalat regisztráló konstruktorhoz:

   namespace Notes;
   
   public partial class AppShell : Shell
   {
       public AppShell()
       {
           InitializeComponent();
   
           Routing.RegisterRoute(nameof(Views.NotePage), typeof(Views.NotePage));
       }
   }
   

A Routing.RegisterRoute metódus két paramétert használ:

• Az első paraméter a regisztrálni kívánt URI sztringneve, ebben az esetben a feloldott név "NotePage".
• A második paraméter a betöltendő lap típusa "NotePage" navigáláskor.

Most már futtathatja az alkalmazást. Próbáljon meg új jegyzeteket hozzáadni, navigáljon oda-vissza a jegyzetek között, és törölje a jegyzeteket.

Az oktatóanyag kódjának megismerése.. Ha le szeretné tölteni a befejezett projekt egy példányát a kód összehasonlításához, töltse le a projekt .

Gratulálunk!

• 100% kész.

Elvégezte a .NET MAUI-alkalmazás létrehozására vonatkozó oktatóanyagot!

Következő lépések

Az oktatóanyag-sorozat következő részében megtudhatja, hogyan implementálhat modellnézet-nézetmodell (MVVM) mintákat a projektben.

• Alkalmazás frissítése MVVM-alapelvekkel

Az alábbi hivatkozások további információt nyújtanak az oktatóanyagban megismert fogalmakról:

• .NET MAUI Shell áttekintése
• .NET MAUI Shell-lapok
• Alapszintű kötések
• Szerkesztő vezérlő