Vytvoření aplikace .NET MAUI

Článek
Developer (Začátečník)
48 min do dokončení

Tato série kurzů je navržená tak, aby ukázala, jak vytvořit aplikaci .NET Pro víceplatformní aplikace (.NET MAUI), která používá pouze kód pro různé platformy. To znamená, že kód, který napíšete, nebude specifický pro Windows, Android, iOS nebo macOS. Aplikace, kterou vytvoříte, bude aplikací pro pořizování poznámek, kde může uživatel vytvářet, ukládat a načítat více poznámek.

V tomto kurzu se naučíte:

Vytvořte aplikaci .NET MAUI Shell.
Spusťte aplikaci na zvolené platformě.
Definujte uživatelské rozhraní pomocí jazyka XAML (Application Markup Language) eXtensible a interagujte s elementy XAML prostřednictvím kódu.
Umožňuje vytvářet zobrazení a svázat je s daty.
Navigace slouží k přechodu na a ze stránek.

Pomocí sady Visual Studio 2022 vytvoříte aplikaci, pomocí které můžete zadat poznámku a uložit ji do úložiště zařízení. Poslední aplikace je znázorněná níže:

Přizpůsobení prostředí aplikace

42 min zbývá

Když Visual Studio vytvoří projekt .NET MAUI, vygenerují se čtyři důležité soubory kódu. Můžete je vidět v podokně Průzkumník řešení sady Visual Studio:

Průzkumník řešení zobrazující soubory projektu .NET MAUI v sadě Visual Studio.

Tyto soubory vám pomůžou nakonfigurovat a spustit aplikaci .NET MAUI. Každý soubor slouží k jinému účelu, jak je popsáno níže:

MauiProgram.cs

Toto je soubor kódu, který spouští vaši aplikaci. Kód v tomto souboru slouží jako vstupní bod aplikace pro různé platformy, který aplikaci nakonfiguruje a spustí. Spouštěcí kód šablony odkazuje na App třídu definovanou souborem App.xaml .
App.xaml a App.xaml.cs

Chcete-li zachovat jednoduché věci, oba tyto soubory jsou označovány jako jeden soubor. Obecně existují dva soubory s libovolným souborem XAML, samotným souborem .xaml a odpovídajícím souborem kódu, který je podřízenou položkou v Průzkumník řešení. Soubor .xaml obsahuje kód XAML a soubor kódu obsahuje kód vytvořený uživatelem pro interakci s kódem XAML.

Soubor App.xaml obsahuje prostředky XAML pro celou aplikaci, jako jsou barvy, styly nebo šablony. Soubor App.xaml.cs obecně obsahuje kód, který vytvoří instanci aplikace Shell. V tomto projektu odkazuje na AppShell třídu.
AppShell.xaml a AppShell.xaml.cs

Tento soubor definuje AppShell třídu, která se používá k definování vizuální hierarchie aplikace.
MainPage.xaml a MainPage.xaml.cs

Toto je úvodní stránka zobrazená aplikací. Soubor MainPage.xaml definuje uživatelské rozhraní (uživatelské rozhraní) stránky. MainPage.xaml.cs obsahuje kód pro XAML, například kód události kliknutí na tlačítko.

Přidání stránky "about"

První přizpůsobení, které provedete, je přidání další stránky do projektu. Tato stránka je "o" stránce, která představuje informace o této aplikaci, jako je autor, verze a odkaz na další informace.

V podokně Průzkumník řešení sady Visual Studio klikněte pravým tlačítkem myši na projekt >Poznámky Přidat>novou položku....
V dialogovém okně Přidat novou položku vyberte v seznamu šablon na levé straně okna rozhraní .NET MAUI . Dále vyberte šablonu .NET MAUI ContentPage (XAML). Pojmenujte soubor AboutPage.xaml a pak vyberte Přidat.

Soubor AboutPage.xaml otevře novou kartu dokumentu zobrazující všechny revize XAML, které představují uživatelské rozhraní stránky. Nahraďte kód XAML následujícím kódem:

<?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>

Uložte soubor stisknutím kombinace kláves CTRL+S nebo výběrem nabídky Soubor>Uložit aboutPage.xaml.

Pojďme rozdělit klíčové části ovládacích prvků XAML umístěné na stránce:

<ContentPage> je kořenový objekt třídy AboutPage .
<VerticalStackLayout> je jediný podřízený objekt objektu ContentPage. ContentPage může mít pouze jeden podřízený objekt. Typ VerticalStackLayout může mít více podřízených položek. Tento ovládací prvek rozložení uspořádá podřízené položky svisle, jeden za druhým.
<HorizontalStackLayout> funguje stejně jako , <VerticalStackLayout>s výjimkou jejích podřízených jsou uspořádány vodorovně.
<Image> zobrazí obrázek, v tomto případě používá dotnet_bot.png obrázek, který je součástí každého projektu .NET MAUI.

Důležité

Soubor přidaný do projektu je ve skutečnosti dotnet_bot.svg. .NET MAUI převádí soubory SVG (Scalable Vector Graphics) na soubory PNG (Portable Network Graphic) na základě cílového zařízení. Proto při přidávání souboru SVG do projektu aplikace .NET MAUI by se měl odkazovat z XAML nebo C# s příponou .png . Jediný odkaz na soubor SVG by měl být v souboru projektu.
<Label> ovládací prvky zobrazují text.
<Button> ovládací prvky lze stisknout uživatelem, který Clicked vyvolá událost. Kód můžete spustit v reakci na Clicked událost.
Clicked="LearnMore_Clicked"

Clicked Událost tlačítka je přiřazena LearnMore_Clicked obslužné rutině události, která bude definována v souboru kódu za kódem. Tento kód vytvoříte v dalším kroku.

Zpracování události klikaného kliknutí

Dalším krokem je přidání kódu události tlačítka Clicked .

V podokně Průzkumník řešení sady Visual Studio rozbalte soubor AboutPage.xaml a zobrazte, že se jedná o soubor za kódem AboutPage.xaml.cs. Potom poklikejte na soubor AboutPage.xaml.cs a otevřete ho v editoru kódu.
Přidejte následující LearnMore_Clicked kód obslužné rutiny události, který otevře systémový prohlížeč na konkrétní adresu URL:
```
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");
}
```
Všimněte si, že klíčové async slovo bylo přidáno do deklarace metody, což umožňuje použití klíčového await slova při otevření systémového prohlížeče.
Uložte soubor stisknutím kombinace kláves CTRL+S nebo výběrem nabídky> Uložit AboutPage.xaml.cs.

Teď, když je kód XAML a kód AboutPage dokončený, budete ho muset zobrazit v aplikaci.

Přidání prostředků obrázku

Některé ovládací prvky můžou používat obrázky, které vylepšují způsob interakce uživatelů s vaší aplikací. V této části si stáhnete dva obrázky, které budete ve své aplikaci používat, spolu se dvěma alternativními obrázky pro použití s iOSem.

Stáhněte si následující obrázky:

Ikona: O aplikaci
Tento obrázek se používá jako ikona stránky s informacemi, kterou jste vytvořili dříve.
Ikona: Poznámky
Tento obrázek se používá jako ikona stránky poznámek, kterou vytvoříte v další části tohoto kurzu.
Ikona: O aplikaci (iOS)
Ikona: Poznámky (iOS)

Po stažení obrázků je můžete přesunout pomocí Průzkumník souborů do složky Resources\Images projektu. Jakýkoli soubor v této složce se automaticky zahrne do projektu jako prostředek MauiImage . K přidání imagí do projektu můžete použít Visual Studio. Pokud obrázky přesunete ručně, přeskočte následující postup.

Důležité

Nepřeskočte stahování iOS konkrétních iOS obrázků, které jsou potřeba k dokončení tohoto kurzu.

Přesunutí obrázků pomocí sady Visual Studio

V podokně Průzkumník řešení sady Visual Studio rozbalte složku Resources, která odhalí složku Obrázky.

Tip

Pomocí Průzkumník souborů můžete obrázky přetáhnout přímo do podokna Průzkumník řešení v horní části složky Obrázky. Tím se soubory automaticky přesunou do složky a zahrne je do projektu. Pokud se rozhodnete soubory přetáhnout myší, ignorujte zbývající část tohoto postupu.
Klikněte pravým tlačítkem na obrázky a vyberte Přidat>existující položku....
Přejděte do složky, která obsahuje stažené obrázky.
Změňte filtr na filtr typu souboru na Soubory obrázků.
Podržte stisknutou klávesu CTRL a klikněte na všechny obrázky, které jste stáhli, a pak stiskněte Přidat.

Přidejte do projektu .NET MAUI čtyři obrázky ikon.

Úprava prostředí aplikace

Jak je uvedeno na začátku tohoto článku, AppShell třída definuje vizuální hierarchii aplikace, kód XAML použitý při vytváření uživatelského rozhraní aplikace. Aktualizujte XAML a přidejte TabBar ovládací prvek:

Poklikáním na soubor AppShell.xaml v podokně Průzkumník řešení otevřete editor XAML. Nahraďte kód XAML následujícím kódem:

<?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>

Uložte soubor stisknutím kombinace kláves CTRL+S nebo výběrem nabídky File>Save AppShell.xaml.

Pojďme rozdělit klíčové části XAML:

<Shell> je kořenový objekt kódu XAML.
<TabBar> je obsahem Shellsouboru .
Dva <ShellContent> objekty uvnitř objektu <TabBar>. Před nahrazením kódu šablony byl jeden <ShellContent> objekt odkazující na MainPage stránku.

Podřízené TabBar prvky a její podřízené prvky nepředstavují žádné prvky uživatelského rozhraní, ale spíše uspořádání vizuální hierarchie aplikace. Shell vezme tyto objekty a vytvoří uživatelské rozhraní pro obsah s pruhem v horní části představující každou stránku. Vlastnost ShellContent.Icon pro každou stránku používá speciální syntaxi: {OnPlatform ...}. Tato syntaxe se zpracuje při kompilaci stránek XAML pro každou platformu a s ní můžete zadat hodnotu vlastnosti pro každou platformu. V tomto případě každá platforma používá icon_about.png ikonu ve výchozím nastavení, ale iOS a MacCatalyst bude používat icon_about_ios.png.

Každý <ShellContent> objekt ukazuje na stránku, která se má zobrazit. Tato vlastnost je nastavena vlastností ContentTemplate .

Spustit aplikaci

Spusťte aplikaci stisknutím klávesy F5 nebo stisknutím tlačítka přehrát v horní části sady Visual Studio:

Uvidíte, že existují dvě karty: Poznámky a Informace. Stiskněte kartu O aplikaci a přejde na vámi vytvořenou AboutPage aplikaci. Stisknutím tlačítka Další informace... otevřete webový prohlížeč.

Informace o stránce kurzu aplikace .NET MAUI

Zavřete aplikaci a vraťte se do sady Visual Studio. Pokud používáte emulátor Androidu, ukončete aplikaci ve virtuálním zařízení nebo stiskněte tlačítko stop v horní části sady Visual Studio:

Vytvoření stránky pro poznámku

32 min zbývá

Teď, když aplikace obsahuje MainPage a AboutPagemůžete začít vytvářet zbytek aplikace. Nejprve vytvoříte stránku, která uživateli umožní vytvořit a zobrazit poznámku a pak napíšete kód pro načtení a uložení poznámky.

Na stránce poznámek se zobrazí poznámka a umožní vám ji uložit nebo odstranit. Nejprve přidejte novou stránku do projektu:

V podokně Průzkumník řešení sady Visual Studio klikněte pravým tlačítkem myši na projekt >Poznámky Přidat>novou položku....
V dialogovém okně Přidat novou položku vyberte v seznamu šablon na levé straně okna rozhraní .NET MAUI . Dále vyberte šablonu .NET MAUI ContentPage (XAML). Pojmenujte soubor NotePage.xaml a pak vyberte Přidat.

Soubor NotePage.xaml se otevře na nové kartě a zobrazí se všechny kódy XAML, které představují uživatelské rozhraní stránky. Nahraďte kód XAML následující značkou:

<?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>

Uložte soubor stisknutím kombinace kláves CTRL + S nebo výběrem nabídky File>Save NotePage.xaml.

Pojďme rozdělit klíčové části ovládacích prvků XAML umístěné na stránce:

<VerticalStackLayout> uspořádá jeho podřízené ovládací prvky svisle, jeden pod druhým.
<Editor> je víceřádkový textový editor a je první ovládací prvek uvnitř VerticalStackLayout.
<Grid> je ovládací prvek rozložení a je druhým ovládacím prvek uvnitř VerticalStackLayout.

Tento ovládací prvek definuje sloupce a řádky pro vytvoření buněk. Podřízené ovládací prvky jsou umístěny v těchto buňkách.

Ve výchozím nastavení Grid ovládací prvek obsahuje jeden řádek a sloupec a vytvoří jednu buňku. Sloupce jsou definovány s šířkou a * hodnota šířky dává sloupci pokyn, aby co nejvíce zaplnil místo. Předchozí fragment kódu definoval dva sloupce, přičemž oba používají co nejvíce místa, které rovnoměrně distribuuje sloupce v přiděleném prostoru: ColumnDefinitions="*,*". Velikosti sloupců jsou oddělené znakem , .

Sloupce a řádky definované podle Grid indexu se indexují od 0. První sloupec by tedy byl index 0, druhý sloupec je index 1 atd.
Dva <Button> ovládací prvky jsou uvnitř <Grid> sloupce a přiřazeny. Pokud podřízený ovládací prvek nedefinuje přiřazení sloupce, přiřadí se automaticky prvnímu sloupci. V tomto kódu je prvním tlačítkem tlačítko Uložit a automaticky přiřazeno prvnímu sloupci ve sloupci 0. Druhé tlačítko je tlačítko Odstranit a přiřazené druhému sloupci, sloupci 1.

Všimněte si, že tato dvě tlačítka mají Clicked za sebou zpracování události. Kód pro tyto obslužné rutiny přidáte v další části.

Načtení a uložení poznámky

Otevřete soubor NotePage.xaml.cs kódu. Kód pro soubor NotePage.xaml můžete otevřít třemi způsoby:

Pokud je soubor NotePage.xaml otevřený a jedná se o aktivní upravovaný dokument, stiskněte klávesu F7.
Pokud je soubor NotePage.xaml otevřený a jedná se o aktivní dokument, který se upravuje, klikněte pravým tlačítkem v textovém editoru a vyberte Zobrazit kód.
Pomocí Průzkumník řešení rozbalte položku NotePage.xaml a zobrazte soubor NotePage.xaml.cs. Poklikáním otevřete soubor.

Když přidáte nový soubor XAML, kód za sebou obsahuje jeden řádek v konstruktoru, volání InitializeComponent metody:

namespace Notes;

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

Metoda InitializeComponent přečte kód XAML a inicializuje všechny objekty definované značkou. Objekty jsou propojené ve svých relacích nadřazeného a podřízeného objektu a obslužné rutiny událostí definované v kódu jsou připojeny k událostem nastaveným v xaml.

Teď, když rozumíte trochu více o souborech kódu za kódem, přidáte kód do souboru NotePage.xaml.cs za kódem, který bude zpracovávat načítání a ukládání poznámek.

Když se vytvoří poznámka, uloží se do zařízení jako textový soubor. Název souboru je reprezentován proměnnou _fileName . Do třídy přidejte následující string deklaraci NotePage proměnné:
```
public partial class NotePage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
```
Výše uvedený kód vytvoří cestu k souboru a uloží ji do místního datového adresáře aplikace. Název souboru je notes.txt.
V konstruktoru třídy po InitializeComponent zavolání metody načtěte soubor ze zařízení a uložte jeho obsah do TextEditor vlastnosti ovládacího prvku Text :
```
public NotePage()
{
    InitializeComponent();

    if (File.Exists(_fileName))
        TextEditor.Text = File.ReadAllText(_fileName);
}
```
Dále přidejte kód pro zpracování událostí definovaných Clicked v XAML:
```
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;
}
```
Metoda SaveButton_Clicked zapíše text v ovládacím Editor prvku do souboru reprezentované proměnnou _fileName .

Metoda DeleteButton_Clicked nejprve zkontroluje, jestli soubor reprezentovaný proměnnou _fileName a pokud existuje, odstraní ho. Editor Potom se text ovládacího prvku vymaže.
Uložte soubor stisknutím kombinace kláves CTRL+ S nebo výběrem nabídky Uložit>NotePage.xaml.cs.

Konečný kód pro soubor s kódem by měl vypadat takto:

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

Otestování poznámky

Teď, když je stránka poznámek hotová, potřebujete způsob, jak ji uživateli prezentovat. Otevřete soubor AppShell.xaml a změňte první ShellContent položku tak, aby odkazovat na NotePageMainPagemísto:

<?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>

Uložte soubor a spusťte aplikaci. Zkuste do vstupního pole zadat a stiskněte tlačítko Uložit . Zavřete aplikaci a znovu ji otevřete. Zadaná poznámka by se měla načíst z úložiště zařízení.

Stránka pro zadávání poznámek v aplikaci .NET MAUI

Vytvoření vazby dat k uživatelskému rozhraní a procházení stránek

22 min zbývá

Tato část kurzu představuje koncepty zobrazení, modelů a navigace v aplikaci.

V předchozích krocích kurzu jste do projektu přidali dvě stránky: NotePage a AboutPage. Stránky představují zobrazení dat. Jedná se NotePage o "zobrazení", které zobrazuje "data poznámek" a AboutPage jedná se o "zobrazení", které zobrazuje "data informací o aplikaci". Obě tato zobrazení mají model dat pevně zakódovaný nebo vložený a datový model budete muset oddělit od zobrazení.

Jaká je výhoda oddělení modelu ze zobrazení? Umožňuje navrhnout zobrazení tak, aby představovalo libovolnou část modelu a pracovalo s ní, aniž byste se museli starat o skutečný kód, který model implementuje. Toho se dosahuje pomocí datové vazby, což je něco, co se zobrazí později v tomto kurzu. Prozatím ale umožňuje restrukturalizovat projekt.

Oddělení zobrazení a modelu

Refaktoring existujícího kódu pro oddělení modelu od zobrazení Následující několik kroků uspořádá kód tak, aby se zobrazení a modely definovaly odděleně od sebe.

Odstraňte MainPage.xaml a MainPage.xaml.cs z projektu, už je nepotřebujete. V podokně Průzkumník řešení vyhledejte položku MainPage.xaml, klikněte na ni pravým tlačítkem myši a vyberte Odstranit.

Tip

Odstranění položky MainPage.xaml by také mělo odstranit MainPage.xaml.cs položku. Pokud MainPage.xaml.cs nebyl odstraněn, klikněte na něj pravým tlačítkem myši a vyberte Odstranit.
Klikněte pravým tlačítkem myši na Notes projekt a vyberte Přidat>novou složku. Pojmenujte složku Models.
Klikněte pravým tlačítkem myši na Notes projekt a vyberte Přidat>novou složku. Pojmenujte složku Views.
Najděte položku NotePage.xaml a přetáhněte ji do Views složky. NotePage.xaml.cs by se s ním měl pohybovat.

Důležité

Když přesunete soubor, Sada Visual Studio vás obvykle vyzve k upozornění na to, jak může operace přesunutí trvat dlouhou dobu. Nemělo by se jednat o problém, pokud se zobrazí toto upozornění, stiskněte OK .

Visual Studio vás také může požádat, pokud chcete upravit obor názvů přesunutého souboru. Jako další kroky vyberte Ne , změní se obor názvů.
Najděte položku AboutPage.xaml a přetáhněte ji do Views složky. AboutPage.xaml.cs by se s ním měl pohybovat.

Aktualizace oboru názvů zobrazení

Teď, když se zobrazení přesunula do Views složky, budete muset aktualizovat obory názvů tak, aby odpovídaly. Obor názvů pro soubory XAML a kódu na stránkách je nastaven na Notes. Je potřeba ho aktualizovat na Notes.Views.

V podokně Průzkumník řešení rozbalte soubor NotePage.xaml i AboutPage.xaml, abyste zobrazili soubory s kódem:
Poklikáním na položku NotePage.xaml.cs otevřete editor kódu. Změňte obor názvů na Notes.Views:
```
namespace Notes.Views;
```
Opakujte předchozí kroky pro položku AboutPage.xaml.cs .
Poklikáním na položku NotePage.xaml otevřete editor XAML. Starý obor názvů se odkazuje prostřednictvím atributu x:Class , který definuje, který typ třídy je kódem pro XAML. Tato položka není jenom obor názvů, ale obor názvů s typem. x:Class Změňte hodnotu naNotes.Views.NotePage:
```
x:Class="Notes.Views.NotePage"
```
Opakujte předchozí krok pro položku AboutPage.xaml , ale nastavte x:Class hodnotu na Notes.Views.AboutPage.

Oprava odkazu na obor názvů v prostředí Shell

AppShell.xaml definuje dvě karty, jednu pro druhou NotesPage pro AboutPage. Teď, když byly tyto dvě stránky přesunuty do nového oboru názvů, mapování typů v XAML je teď neplatné. V podokně Průzkumník řešení poklikejte na položku AppShell.xaml a otevřete ji v editoru XAML. Měl by vypadat jako následující fragment kódu:

<?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>

Obor názvů .NET se naimportuje do XAML prostřednictvím deklarace oboru názvů XML. V předchozím kódu XAML je xmlns:local="clr-namespace:Notes" to atribut v kořenovém elementu: <Shell>. Formát deklarace oboru názvů XML pro import oboru názvů .NET ve stejném sestavení je:

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

Předchozí deklarace tedy mapuje obor názvů XML na obor názvů local .NET oboru Notesnázvů . Běžně se namapuje název local na kořenový obor názvů projektu.

local Odeberte obor názvů XML a přidejte nový. Tento nový obor názvů XML se mapuje na obor názvů Notes.Views.NET , takže ho pojmenujte views. Deklarace by měla vypadat jako následující atribut: xmlns:views="clr-namespace:Notes.Views".

Obor local názvů XML používaly ShellContent.ContentTemplate vlastnosti, změňte je na views. Váš XAML by teď měl vypadat jako následující fragment kódu:

<?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>

Teď byste měli být schopni aplikaci spustit bez chyb kompilátoru a všechno by mělo fungovat stejně jako předtím.

Definování modelu

Model je aktuálně data vložená do poznámky a zobrazení. Vytvoříme nové třídy, které budou představovat tato data. Nejprve model představující data stránky poznámek:

V podokně Průzkumník řešení klikněte pravým tlačítkem na Models složku a vyberte Přidat>třídu....
Pojmenujte třídu Note.cs a stiskněte Přidat.

Otevřete Note.cs a nahraďte kód následujícím fragmentem kódu:

namespace Notes.Models;

internal class Note
{
    public string Filename { get; set; }
    public string Text { get; set; }
    public DateTime Date { get; set; }
}

Uložte soubor.

Dále vytvořte model o stránce:

V podokně Průzkumník řešení klikněte pravým tlačítkem na Models složku a vyberte Přidat>třídu....
Pojmenujte třídu About.cs a stiskněte Přidat.

Otevřete About.cs a nahraďte kód následujícím fragmentem kódu:

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.";
}

Uložte soubor.

Stránka Aktualizovat o produktu

Stránka About bude nejrychlejší stránkou, která se má aktualizovat, a vy budete moct aplikaci spustit a zjistit, jak načítá data z modelu.

V podokně Průzkumník řešení otevřete soubor Views\AboutPage.xaml.

Nahraďte obsah následujícím fragmentem kódu:

<?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>

Podívejme se na změněné řádky, které jsou zvýrazněné v předchozím fragmentu kódu:

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

Tento řádek mapuje Notes.Models obor názvů .NET na models obor názvů XML.
Vlastnost BindingContextContentPage je nastavena na instanci Note.Models.About třídy pomocí oboru názvů XML a objektu models:About. Toto nastavení bylo nastaveno pomocí syntaxe elementu vlastnosti namísto atributu XML.
Důležité

Dosud byly vlastnosti nastaveny pomocí atributu XML. To funguje skvěle pro jednoduché hodnoty, jako Label.FontSize je například vlastnost. Pokud je ale hodnota vlastnosti složitější, musíte k vytvoření objektu použít syntaxi elementu vlastnosti. Podívejte se na následující příklad vytvoření popisku s jeho FontSize sadou vlastností:
```
<Label FontSize="22" />
```
Stejnou FontSize vlastnost lze nastavit pomocí syntaxe elementu vlastnosti:
```
<Label>
    <Label.FontSize>
        22
    </Label.FontSize>
</Label>
```
Tři <Label> ovládací prvky měly hodnotu Text vlastnosti změněnou z pevně zakódovaného řetězce na syntaxi vazby: {Binding PATH}.

{Binding} Syntaxe se zpracovává za běhu, což umožňuje dynamickou hodnotu vrácenou z vazby. Část PATH{Binding PATH} je cesta k vlastnosti, ke které se má vytvořit vazba. Vlastnost pochází z aktuálního BindingContextovládacího prvku . <Label> U ovládacího prvku BindingContext je nenasaděný. Kontext je zděděný z nadřazeného objektu, pokud není nastaven ovládacím prvku, což v tomto případě je kontext nastavení nadřazeného objektu kořenovým objektem: ContentPage.

Objekt v objektu BindingContext je instancí About modelu. Cesta vazby jednoho z popisků vytvoří vazbu Label.Text vlastnosti na About.Title vlastnost.

Poslední změna stránky s informacemi aktualizuje tlačítko, které otevře webovou stránku. Adresa URL byla pevně zakódovaná v kódu, ale adresa URL by měla pocházet z modelu, který je ve BindingContext vlastnosti.

V podokně Průzkumník řešení otevřete soubor Views\AboutPage.xaml.cs.

Nahraďte metodu LearnMore_Clicked následujícím kódem:

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

Pokud se podíváte na zvýrazněný řádek, kód zkontroluje, jestli BindingContext je Models.About typ, a pokud ano, přiřadí ho proměnné about . Další řádek uvnitř if příkazu otevře prohlížeč na adresu URL poskytnutou about.MoreInfoUrl vlastností.

Spusťte aplikaci a měli byste vidět, že běží úplně stejně jako předtím. Zkuste změnit hodnoty modelu a podívat se, jak se změní uživatelské rozhraní a adresa URL otevřené prohlížečem.

Aktualizovat stránku poznámky

Předchozí oddíl vázal about zobrazení stránky na about model a teď provedete stejnou vazbu note zobrazení s modelem note . V tomto případě se ale model v XAML nevytvořil, ale v kódu se zapíše v několika dalších krocích.

V podokně Průzkumník řešení otevřete soubor Views\NotePage.xaml.

<Editor> Změňte ovládací prvek přidáním Text vlastnosti. Vytvořte vazbu vlastnosti na Text vlastnost: <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>

Změny kódu na pozadí jsou složitější než XAML. Aktuální kód načítá obsah souboru v konstruktoru a pak ho nastaví přímo na TextEditor.Text vlastnost. Aktuální kód vypadá takto:

public NotePage()
{
    InitializeComponent();

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

Místo načtení poznámky v konstruktoru vytvořte novou LoadNote metodu. Tato metoda provede následující:

Přijměte parametr názvu souboru.
Vytvořte nový model poznámek a nastavte název souboru.
Pokud soubor existuje, načtěte jeho obsah do modelu.
Pokud soubor existuje, aktualizujte model s datem vytvoření souboru.
BindingContext Nastavte stránku na model.

V podokně Průzkumník řešení otevřete soubor Views\NotePage.xaml.cs.

Do třídy přidejte následující metodu:

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

Aktualizujte konstruktor třídy tak, aby volal LoadNote. Název souboru poznámky by měl být náhodně vygenerovaný název, který se má vytvořit v místním adresáři dat aplikace.

public NotePage()
{
    InitializeComponent();

    string appDataPath = FileSystem.AppDataDirectory;
    string randomFileName = $"{Path.GetRandomFileName()}.notes.txt";

    LoadNote(Path.Combine(appDataPath, randomFileName));
}

Přidání zobrazení a modelu se seznamem všech poznámek

7 min zbývá

Tato část kurzu přidá konečnou část aplikace, zobrazení, které zobrazuje všechny dříve vytvořené poznámky.

Zobrazení poznámek v současné době zobrazuje jednu poznámku. Pokud chcete zobrazit více poznámek, vytvořte nové zobrazení a model: AllNotes.

V podokně Průzkumník řešení klikněte pravým tlačítkem na Views složku a vyberte Přidat>novou položku...
V dialogovém okně Přidat novou položku vyberte v seznamu šablon na levé straně okna rozhraní .NET MAUI . Dále vyberte šablonu .NET MAUI ContentPage (XAML). Pojmenujte soubor AllNotesPage.xaml a pak vyberte Přidat.
V podokně Průzkumník řešení klikněte pravým tlačítkem na Models složku a vyberte Přidat> třídu...
Pojmenujte třídu AllNotes.cs a stiskněte Přidat.

Kódování modelu AllNotes

Nový model bude představovat data potřebná k zobrazení více poznámek. Tato data budou vlastností, která představuje kolekci poznámek. Kolekce bude specializovanou ObservableCollection kolekcí. Když je ovládací prvek, který vypíše více položek, jako ListViewje například , je vázán na , ObservableCollectionoba spolupracují, aby se automaticky zachoval seznam položek synchronizovaných s kolekcí. Pokud seznam přidá položku, kolekce se aktualizuje. Pokud kolekce přidá položku, ovládací prvek se automaticky aktualizuje o novou položku.

V podokně Průzkumník řešení otevřete soubor Models\AllNotes.cs.

Nahraďte kód následujícím fragmentem kódu:

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

Předchozí kód deklaruje kolekci s názvem Notesa používá metodu LoadNotes k načtení poznámek ze zařízení. Tato metoda používá rozšíření LINQ k načtení, transformaci a řazení dat do Notes kolekce.

Návrh stránky AllNotes

Dále musí být zobrazení navržené tak, aby podporovalo model AllNotes .

V podokně Průzkumník řešení otevřete soubor Views\AllNotesPage.xaml.

Nahraďte kód následujícím kódem:

<?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>

Předchozí XAML představuje několik nových konceptů:

Vlastnost ContentPage.ToolbarItems obsahuje .ToolbarItem Zde definovaná tlačítka se obvykle zobrazují v horní části aplikace podél názvu stránky. V závislosti na platformě ale může být na jiné pozici. Když je některá z těchto tlačítek stisknutá, Clicked událost se vyvolá stejně jako normální tlačítko.

Vlastnost ToolbarItem.IconImageSource nastaví ikonu, která se zobrazí na tlačítku. Ikona může být libovolný zdroj obrázku definovaný projektem, ale v tomto příkladu FontImage se používá. Jako FontImage obrázek můžete použít jeden glyf z písma.
Ovládací CollectionView prvek zobrazí kolekci položek a v tomto případě je vázán na vlastnost modelu Notes . Způsob, jakým je každá položka prezentována zobrazením kolekce, je nastavena prostřednictvím CollectionView.ItemsLayout vlastností a CollectionView.ItemTemplate vlastností.

Pro každou položku v kolekci vygeneruje CollectionView.ItemTemplate deklarovaný XAML. Kód BindingContext XAML se stane samotnou položkou kolekce, v tomto případě každou jednotlivou poznámku. Šablona poznámky používá dva popisky, které jsou vázané na poznámku Text a Date vlastnosti.
Zpracovává CollectionViewSelectionChanged událost, která se vyvolá při výběru položky v zobrazení kolekce.

Kód pro zobrazení je potřeba zapsat, aby se načetly poznámky a zpracovávaly události.

V podokně Průzkumník řešení otevřete soubor Zobrazení/AllNotesPage.xaml.cs.

Nahraďte kód následujícím fragmentem kódu:

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

Tento kód používá konstruktor k nastavení BindingContext stránky na model.

Metoda OnAppearing je přepsána ze základní třídy. Tato metoda se automaticky volá při každém zobrazení stránky, například při přechodu na stránku. Tento kód říká modelu, aby načetl poznámky. Vzhledem k tomu, že CollectionViewzobrazení AllNotes je vázáno na vlastnost modeluNotes AllNotes, což je ObservableCollection, kdykoli jsou poznámky načteny, CollectionView automaticky se aktualizuje.

Obslužná Add_Clicked rutina představuje další nový koncept, navigaci. Vzhledem k tomu, že aplikace používá .NET MAUI Shell, můžete přejít na stránky voláním Shell.Current.GoToAsync metody. Všimněte si, že obslužná rutina je deklarována klíčovým slovem async , což umožňuje použití klíčového await slova při navigaci. Tato obslužná rutina přejde na NotePage.

Poslední částí kódu v předchozím fragmentu kódu je obslužná rutina notesCollection_SelectionChanged . Tato metoda přebírá aktuálně vybranou Note položku, model a používá jeho informace k přechodu na NotePage. GoToAsync používá řetězec identifikátoru URI pro navigaci. V tomto případě se vytvoří řetězec, který pomocí parametru řetězce dotazu nastaví vlastnost na cílové stránce. Interpolovaný řetězec představující identifikátor URI se nakonec podobá následujícímu řetězci:

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

Parametr ItemId= je nastavený na název souboru v zařízení, kde je poznámka uložena.

Visual Studio může indikovat, že NotePage.ItemId tato vlastnost neexistuje, což není. Dalším krokem je úprava zobrazení takNote, aby se model načetl na základě parametruItemId, který vytvoříte.

Parametry řetězce dotazu

Zobrazení Note musí podporovat parametr řetězce dotazu, ItemId. Vytvořte ho:

V podokně Průzkumník řešení otevřete soubor Zobrazení/NotePage.xaml.cs.
QueryProperty Přidejte atribut do klíčového class slova, zadejte název vlastnosti řetězce dotazu a vlastnost třídy, na které se mapuje, ItemId a ItemId v uvedeném pořadí:
```
[QueryProperty(nameof(ItemId), nameof(ItemId))]
public partial class NotePage : ContentPage
```
Přidejte novou string vlastnost s názvem ItemId. Tato vlastnost volá metodu LoadNote a předává hodnotu vlastnosti, která by pak měla být název souboru poznámky:
```
public string ItemId
{
    set { LoadNote(value); }
}
```

Nahraďte obslužné SaveButton_ClickedDeleteButton_Clicked rutiny následujícím kódem:

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("..");
}

Tlačítka jsou teď async. Po stisknutí se stránka vrátí na předchozí stránku pomocí identifikátoru ..URI .

Odstraňte proměnnou _fileName z horní části kódu, protože ji už třída nepoužívá.

Úprava vizuálního stromu aplikace

Stále AppShell se načítá jedna stránka poznámky, místo toho musí načíst zobrazení AllPages. Otevřete soubor AppShell.xaml a změňte první ShellContent položku tak, aby odkazovat na AllNotesPageNotePagemísto:

<?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>

Pokud teď aplikaci spustíte, všimnete si, že dojde k chybovému ukončení, když stisknete tlačítko Přidat a stěžujete si, že na ni nejde přejít NotesPage. Každá stránka, na kterou lze přejít z jiné stránky, musí být zaregistrovaná v navigačním systému. Stránky AllNotesPage a AboutPage stránky jsou automaticky registrovány v navigačním systému deklarací v TabBar.

Zaregistrujte si NotesPage navigační systém:

V podokně Průzkumník řešení otevřete soubor AppShell.xaml.cs.

Přidejte řádek do konstruktoru, který zaregistruje navigační trasu:

namespace Notes;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(Views.NotePage), typeof(Views.NotePage));
    }
}

Metoda Routing.RegisterRoute má dva parametry:

Prvním parametrem je název řetězce identifikátoru URI, který chcete zaregistrovat, v tomto případě je přeložený název "NotePage".
Druhým parametrem je typ stránky, na který se má načíst při "NotePage" přechodu.

Teď můžete aplikaci spustit. Zkuste přidat nové poznámky, procházet mezi poznámkami a odstraňovat poznámky.

Prozkoumejte kód. Prozkoumejte kód pro tento kurz.. Pokud chcete stáhnout kopii dokončeného projektu pro porovnání kódu, stáhněte si tento projekt.

Share via