Tworzenie aplikacji MAUI platformy .NET

Artykuł
Developer (Początkujący)
Czas do ukończenia: 48 min

W tej serii samouczków pokazano, jak utworzyć aplikację interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI), która używa tylko kodu międzyplatformowego. Oznacza to, że pisany kod nie będzie specyficzny dla systemu Windows, Android, iOS lub macOS. Utworzona aplikacja będzie aplikacją do tworzenia notatek, w której użytkownik może tworzyć, zapisywać i ładować wiele notatek.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Utwórz aplikację .NET MAUI Shell.
Uruchom aplikację na wybranej platformie.
Definiowanie interfejsu użytkownika za pomocą języka eXtensible Application Markup Language (XAML) i interakcja z elementami XAML za pomocą kodu.
Tworzenie widoków i wiązanie ich z danymi.
Użyj nawigacji, aby przejść do i ze stron.

Użyjesz programu Visual Studio 2022, aby utworzyć aplikację, za pomocą której można wprowadzić notatkę i zapisać ją w magazynie urządzeń. Ostateczna aplikacja jest pokazana poniżej:

Dostosowywanie powłoki aplikacji

Pozostały czas: 42 min

Gdy program Visual Studio tworzy projekt MAUI platformy .NET, generowane są cztery ważne pliki kodu. Są one widoczne w okienku Eksplorator rozwiązań programu Visual Studio:

Eksplorator rozwiązań pliki projektu MAUI platformy .NET w programie Visual Studio.

Te pliki ułatwiają skonfigurowanie i uruchomienie aplikacji .NET MAUI. Każdy plik ma inny cel, opisany poniżej:

MauiProgram.cs

Jest to plik kodu, który uruchamia aplikację. Kod w tym pliku służy jako międzyplatformowy punkt wejścia aplikacji, który konfiguruje i uruchamia aplikację. Kod uruchamiania szablonu wskazuje klasę App zdefiniowaną przez plik App.xaml .
App.xaml i App.xaml.cs

Aby zachować prostotę, oba te pliki są określane jako pojedynczy plik. Zazwyczaj istnieją dwa pliki z dowolnym plikiem XAML, samym plikiem xaml i odpowiadającym mu plikiem kodu, który jest elementem podrzędnym w Eksplorator rozwiązań. Plik xaml zawiera znaczniki XAML , a plik kodu zawiera kod utworzony przez użytkownika w celu interakcji z adiustacjami XAML.

Plik App.xaml zawiera zasoby XAML dla całej aplikacji, takie jak kolory, style lub szablony. Plik App.xaml.cs zazwyczaj zawiera kod, który tworzy wystąpienie aplikacji shell. W tym projekcie wskazuje klasę AppShell .
AppShell.xaml i AppShell.xaml.cs

Ten plik definiuje klasę AppShell , która służy do definiowania hierarchii wizualnej aplikacji.
MainPage.xaml i MainPage.xaml.cs

Jest to strona uruchamiania wyświetlana przez aplikację. Plik MainPage.xaml definiuje interfejs użytkownika (interfejs użytkownika) strony. MainPage.xaml.cs zawiera kod dla kodu XAML, na przykład kod zdarzenia kliknięcia przycisku.

Dodawanie strony "about"

Pierwsze dostosowanie, które wykonasz, to dodanie kolejnej strony do projektu. Ta strona jest stroną "about", która reprezentuje informacje o tej aplikacji, takie jak autor, wersja i być może link, aby uzyskać więcej informacji.

W okienku Eksplorator rozwiązań programu Visual Studio kliknij prawym przyciskiem myszy projekt> Notatki Dodaj>nowy element....
W oknie dialogowym Dodawanie nowego elementu wybierz pozycję .NET MAUI na liście szablonów po lewej stronie okna. Następnie wybierz szablon .NET MAUI ContentPage (XAML). Nadaj plikowi nazwę AboutPage.xaml, a następnie wybierz pozycję Dodaj.

Plik AboutPage.xaml otworzy nową kartę dokumentu, wyświetlając wszystkie znaczniki XAML reprezentujące interfejs użytkownika strony. Zastąp znacznik XAML następującym znacznikiem:

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

Zapisz plik, naciskając CTRL+S lub wybierając menu Plik>Zapisz plik AboutPage.xaml.

Podzielmy kluczowe części kontrolek XAML umieszczonych na stronie:

<ContentPage> jest obiektem głównym klasy AboutPage .
<VerticalStackLayout> jest jedynym obiektem podrzędnym obiektu ContentPage. ContentPage może mieć tylko jeden obiekt podrzędny. Typ VerticalStackLayout może mieć wiele elementów podrzędnych. Ta kontrolka układu rozmieszcza elementy podrzędne w pionie, jeden po drugim.
<HorizontalStackLayout> działa tak samo jak <VerticalStackLayout>, z wyjątkiem jego elementów podrzędnych są rozmieszczone poziomo.
<Image> wyświetla obraz, w tym przypadku używa dotnet_bot.png obrazu, który jest dostarczany z każdym projektem MAUI platformy .NET.

Ważne

Plik dodany do projektu jest rzeczywiście dotnet_bot.svg. Program .NET MAUI konwertuje pliki skalowalnej grafiki wektorowej (SVG) na pliki przenośnej grafiki sieciowej (PNG) na podstawie urządzenia docelowego. W związku z tym podczas dodawania pliku SVG do projektu aplikacji .NET MAUI należy odwoływać się do niego z pliku XAML lub C# z .png rozszerzeniem. Jedynym odwołaniem do pliku SVG powinien być plik projektu.
<Label> kontrolki wyświetlają tekst.
<Button> Kontrolki mogą być naciskane przez użytkownika, który zgłasza Clicked zdarzenie. Kod można uruchomić w odpowiedzi na Clicked zdarzenie.
Clicked="LearnMore_Clicked"

Zdarzenie Clicked przycisku jest przypisywane do LearnMore_Clicked programu obsługi zdarzeń, który zostanie zdefiniowany w pliku za pomocą kodu. Ten kod zostanie utworzony w następnym kroku.

Obsługa klikniętego zdarzenia

Następnym krokiem jest dodanie kodu zdarzenia przycisku Clicked .

W okienku Eksplorator rozwiązań programu Visual Studio rozwiń plik AboutPage.xaml, aby wyświetlić AboutPage.xaml.cs pliku za kodem. Następnie kliknij dwukrotnie plik AboutPage.xaml.cs , aby otworzyć go w edytorze kodu.
Dodaj następujący LearnMore_Clicked kod procedury obsługi zdarzeń, który otwiera przeglądarkę systemową do określonego 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");
}
```
Zwróć uwagę, że async słowo kluczowe zostało dodane do deklaracji metody, co umożliwia użycie słowa kluczowego await podczas otwierania przeglądarki systemowej.
Zapisz plik, naciskając CTRL+S lub wybierając menu Plik>Zapisz AboutPage.xaml.cs.

Teraz, gdy kod XAML i kod za nim AboutPage zostaną ukończone, musisz go wyświetlić w aplikacji.

Dodawanie zasobów obrazu

Niektóre kontrolki mogą używać obrazów, co zwiększa sposób interakcji użytkowników z aplikacją. W tej sekcji pobierzesz dwa obrazy, których będziesz używać w aplikacji, wraz z dwoma alternatywnymi obrazami do użycia z systemem iOS.

Pobierz następujące obrazy:

Ikona: Informacje
Ten obraz jest używany jako ikona utworzonej wcześniej strony dotyczącej.
Ikona: Uwagi
Ten obraz jest używany jako ikona strony notatek, którą utworzysz w następnej części tego samouczka.
Ikona: Informacje (iOS)
Ikona: Notatki (iOS)

Po pobraniu obrazów możesz przenieść je z Eksplorator plików do folderu Resources\Images projektu. Każdy plik w tym folderze jest automatycznie dołączany do projektu jako zasób MauiImage . Możesz również użyć programu Visual Studio, aby dodać obrazy do projektu. Jeśli przeniesiesz obrazy ręcznie, pomiń poniższą procedurę.

Ważne

Nie pomijaj pobierania obrazów specyficznych dla systemu iOS. Są one wymagane do ukończenia tego samouczka.

Przenoszenie obrazów za pomocą programu Visual Studio

W okienku Eksplorator rozwiązań programu Visual Studio rozwiń folder Zasoby, który wyświetla folder Obrazy.

Napiwek

Za pomocą Eksplorator plików można przeciągać i upuszczać obrazy bezpośrednio w okienku Eksplorator rozwiązań w górnej części folderu Obrazy. Spowoduje to automatyczne przeniesienie plików do folderu i uwzględnia je w projekcie. Jeśli zdecydujesz się przeciągać i upuszczać pliki, zignoruj pozostałą część tej procedury.
Kliknij prawym przyciskiem myszy pozycję Obrazy i wybierz polecenie Dodaj>istniejący element....
Przejdź do folderu zawierającego pobrane obrazy.
Zmień filtr na filtr typu pliku na Pliki obrazów.
Przytrzymaj wciśnięty CTRL i kliknij wszystkie pobrane obrazy, a następnie naciśnij przycisk Dodaj

Dodaj cztery obrazy ikon do projektu .NET MAUI.

Modyfikowanie powłoki aplikacji

Jak wspomniano na początku tego artykułu, AppShell klasa definiuje hierarchię wizualną aplikacji, znacznik XAML używany podczas tworzenia interfejsu użytkownika aplikacji. Zaktualizuj kod XAML, aby dodać kontrolkę TabBar :

Kliknij dwukrotnie plik AppShell.xaml w okienku Eksplorator rozwiązań, aby otworzyć edytor XAML. Zastąp znacznik XAML następującym kodem:

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

Zapisz plik, naciskając CTRL+S lub wybierając menu Plik>Zapisz plikShell.xaml.

Podzielmy kluczowe części kodu XAML:

<Shell> jest obiektem głównym znaczników XAML.
<TabBar> to zawartość elementu Shell.
Dwa <ShellContent> obiekty wewnątrz obiektu <TabBar>. Przed zastąpieniem kodu szablonu był pojedynczy <ShellContent> obiekt wskazujący MainPage stronę.

Element TabBar i jego elementy podrzędne nie reprezentują żadnych elementów interfejsu użytkownika, ale raczej organizacji hierarchii wizualnej aplikacji. Powłoka pobiera te obiekty i tworzy interfejs użytkownika dla zawartości z paskiem u góry reprezentującym każdą stronę. Właściwość ShellContent.Icon dla każdej strony używa specjalnej składni: {OnPlatform ...}. Ta składnia jest przetwarzana, gdy strony XAML są kompilowane dla każdej platformy i za jej pomocą można określić wartość właściwości dla każdej platformy. W takim przypadku każda platforma domyślnie używa icon_about.png ikony, ale systemy iOS i MacCatalyst będą używać polecenia icon_about_ios.png.

Każdy <ShellContent> obiekt wskazuje stronę do wyświetlenia. Jest to ustawiane ContentTemplate przez właściwość .

Uruchom aplikację

Uruchom aplikację, naciskając F5 lub naciskając przycisk odtwarzania w górnej części programu Visual Studio:

Zobaczysz, że istnieją dwie karty: Uwagi i Informacje. Naciśnij kartę Informacje , a aplikacja przechodzi do utworzonego AboutPage elementu. Naciśnij przycisk Dowiedz się więcej... , aby otworzyć przeglądarkę internetową.

Strona z samouczkiem dotyczącym aplikacji .NET MAUI — informacje.

Zamknij aplikację i wróć do programu Visual Studio. Jeśli używasz emulatora systemu Android, zakończ aplikację na urządzeniu wirtualnym lub naciśnij przycisk Zatrzymaj w górnej części programu Visual Studio:

Tworzenie strony notatki

Pozostały czas: 32 min

Teraz, gdy aplikacja zawiera MainPage elementy i AboutPage, możesz rozpocząć tworzenie pozostałej części aplikacji. Najpierw utworzysz stronę, która umożliwia użytkownikowi tworzenie i wyświetlanie notatki, a następnie napiszesz kod w celu załadowania i zapisania notatki.

Na stronie notatki zostanie wyświetlona notatka i będzie można ją zapisać lub usunąć. Najpierw dodaj nową stronę do projektu:

W okienku Eksplorator rozwiązań programu Visual Studio kliknij prawym przyciskiem myszy projekt> Notatki Dodaj>nowy element....
W oknie dialogowym Dodawanie nowego elementu wybierz pozycję .NET MAUI na liście szablonów po lewej stronie okna. Następnie wybierz szablon .NET MAUI ContentPage (XAML). Nadaj plikowi nazwę NotePage.xaml, a następnie wybierz pozycję Dodaj.

Plik NotePage.xaml zostanie otwarty na nowej karcie, wyświetlając wszystkie znaczniki XAML reprezentujące interfejs użytkownika strony. Zastąp znaczniki kodu XAML następującymi znacznikami:

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

Zapisz plik, naciskając CTRL + S lub wybierając menu Zapisz plik>NotePage.xaml.

Podzielmy kluczowe części kontrolek XAML umieszczonych na stronie:

<VerticalStackLayout> układa kontrolki podrzędne w pionie, jeden poniżej drugiego.
<Editor> to wielowierszowa kontrolka edytora tekstów i jest pierwszą kontrolką wewnątrz VerticalStackLayoutelementu .
<Grid> jest kontrolką układu i jest drugą kontrolką wewnątrz VerticalStackLayoutelementu .

Ta kontrolka definiuje kolumny i wiersze do tworzenia komórek. Kontrolki podrzędne są umieszczane w tych komórkach.

Domyślnie kontrolka Grid zawiera pojedynczy wiersz i kolumnę, tworząc pojedynczą komórkę. Kolumny są definiowane z szerokością, a * wartość szerokości informuje kolumnę o zapełnieniu jak największej ilości miejsca. Poprzedni fragment kodu zdefiniował dwie kolumny, zarówno używając jak największej ilości miejsca, co równomiernie rozdziela kolumny w przydzielonym miejscu: ColumnDefinitions="*,*". Rozmiary kolumn są oddzielone znakiem , .

Kolumny i wiersze zdefiniowane przez element Grid są indeksowane od 0. Dlatego pierwsza kolumna będzie indeksem 0, druga kolumna to indeks 1 itd.
Dwie <Button> kontrolki znajdują się wewnątrz <Grid> kolumny i są przypisane do niej. Jeśli kontrolka podrzędna nie definiuje przypisania kolumny, zostanie automatycznie przypisana do pierwszej kolumny. W tym znaczniku pierwszy przycisk jest przyciskiem "Zapisz" i automatycznie przypisanym do pierwszej kolumny, kolumny 0. Drugi przycisk to przycisk "Usuń" i przypisany do drugiej kolumny, kolumna 1.

Zwróć uwagę, że dwa przyciski mają Clicked obsłużone zdarzenie. W następnej sekcji dodasz kod dla tych procedur obsługi.

Ładowanie i zapisywanie notatki

Otwórz plik NotePage.xaml.cs za pomocą kodu. Kod pliku NotePage.xaml można otworzyć na trzy sposoby:

Jeśli plik NotePage.xaml jest otwarty i jest aktywnym dokumentem edytowanym, naciśnij F7.
Jeśli plik NotePage.xaml jest otwarty i jest aktywnym dokumentem edytowanym, kliknij prawym przyciskiem myszy w edytorze tekstów i wybierz polecenie Wyświetl kod.
Użyj Eksplorator rozwiązań, aby rozwinąć wpis NotePage.xaml, ujawniając plik NotePage.xaml.cs. Kliknij dwukrotnie plik, aby go otworzyć.

Po dodaniu nowego pliku XAML kod-behind zawiera jeden wiersz w konstruktorze, wywołanie InitializeComponent metody :

namespace Notes;

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

Metoda InitializeComponent odczytuje znaczniki XAML i inicjuje wszystkie obiekty zdefiniowane przez znaczniki. Obiekty są połączone w relacjach nadrzędny-podrzędny, a programy obsługi zdarzeń zdefiniowane w kodzie są dołączane do zdarzeń ustawionych w języku XAML.

Teraz, gdy rozumiesz nieco więcej o plikach za pomocą kodu, dodasz kod do pliku NotePage.xaml.cs kodu w celu obsługi ładowania i zapisywania notatek.

Po utworzeniu notatki zostanie ona zapisana na urządzeniu jako plik tekstowy. Nazwa pliku jest reprezentowana przez zmienną _fileName . Dodaj następującą string deklarację zmiennej NotePage do klasy:
```
public partial class NotePage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");
```
Powyższy kod tworzy ścieżkę do pliku, przechowując ją w lokalnym katalogu danych aplikacji. Nazwa pliku to notes.txt.
W konstruktorze klasy po InitializeComponent wywołaniu metody odczytaj plik z urządzenia i zapisz jego zawartość we TextEditor właściwości kontrolki Text :
```
public NotePage()
{
    InitializeComponent();

    if (File.Exists(_fileName))
        TextEditor.Text = File.ReadAllText(_fileName);
}
```
Następnie dodaj kod do obsługi zdarzeń zdefiniowanych Clicked w języku 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 zapisuje tekst w kontrolce Editor do pliku reprezentowanego przez zmienną _fileName .

Metoda DeleteButton_Clicked najpierw sprawdza, czy plik reprezentowany przez zmienną _fileName , a jeśli istnieje, usuwa go. Editor Następnie tekst kontrolki zostanie wyczyszczone.
Zapisz plik, naciskając CTRL + S lub wybierając menu Plik>Zapisz NotePage.xaml.cs.

Końcowy kod pliku za pomocą kodu powinien wyglądać następująco:

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

Testowanie notatki

Teraz, gdy strona notatek została zakończona, musisz przedstawić ją użytkownikowi. Otwórz plik AppShell.xaml i zmień pierwszy ShellContent wpis, aby wskazywał wartość NotePage zamiast MainPage:

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

Zapisz plik i uruchom aplikację. Spróbuj wpisać w polu wprowadzania i naciśnij przycisk Zapisz . Zamknij aplikację i otwórz ją ponownie. Wprowadzona notatka powinna zostać załadowana z magazynu urządzenia.

Zwróć uwagę na stronę wpisu w aplikacji .NET MAUI.

Wiązanie danych z interfejsem użytkownika i nawigowanie po stronach

Pozostały czas: 22 min

W tej części samouczka przedstawiono pojęcia dotyczące widoków, modeli i nawigacji w aplikacji.

W poprzednich krokach samouczka dodano dwie strony do projektu: NotePage i AboutPage. Strony reprezentują widok danych. Jest NotePage to "widok", który wyświetla "dane notatek" i AboutPage jest "widokiem", który wyświetla "dane informacji o aplikacji". Oba te widoki mają model danych zakodowany na stałe lub osadzony w nich, a model danych należy oddzielić od widoku.

Jaka jest korzyść z oddzielenia modelu od widoku? Umożliwia zaprojektowanie widoku do reprezentowania i interakcji z dowolną częścią modelu bez martwienia się o rzeczywisty kod implementujący model. Jest to realizowane przy użyciu powiązania danych, co zostanie przedstawione w dalszej części tego samouczka. Na razie jednak pozwala na restrukturyzację projektu.

Oddzielanie widoku i modelu

Refaktoryzuj istniejący kod, aby oddzielić model od widoku. W następnych kilku krokach zostanie zorganizowany kod, tak aby widoki i modele zostały zdefiniowane oddzielnie od siebie.

Usuń plik MainPage.xaml i MainPage.xaml.cs z projektu, ale nie są już potrzebne. W okienku Eksplorator rozwiązań znajdź wpis MainPage.xaml, kliknij go prawym przyciskiem myszy i wybierz polecenie Usuń.

Napiwek

Usunięcie elementu MainPage.xaml również powinno usunąć element MainPage.xaml.cs . Jeśli MainPage.xaml.cs nie została usunięta, kliknij ją prawym przyciskiem myszy i wybierz polecenie Usuń.
Kliknij prawym przyciskiem myszy Notes projekt i wybierz polecenie Dodaj>nowy folder. Nadaj folderowi Modelsnazwę .
Kliknij prawym przyciskiem myszy Notes projekt i wybierz polecenie Dodaj>nowy folder. Nadaj folderowi Viewsnazwę .
Znajdź element NotePage.xaml i przeciągnij go do Views folderu. NotePage.xaml.cs powinien zostać przeniesiony z nim.

Ważne

Podczas przenoszenia pliku program Visual Studio zwykle wyświetla ostrzeżenie o tym, jak operacja przenoszenia może zająć dużo czasu. Nie powinno to być problemem w tym miejscu, naciśnij przycisk OK , jeśli widzisz to ostrzeżenie.

Program Visual Studio może również zapytać, czy chcesz dostosować przestrzeń nazw przeniesionego pliku. Wybierz pozycję Nie , ponieważ następne kroki spowodują zmianę przestrzeni nazw.
Znajdź element AboutPage.xaml i przeciągnij go do Views folderu. AboutPage.xaml.cs powinien zostać przeniesiony z nim.

Aktualizowanie przestrzeni nazw widoku

Teraz, gdy widoki zostały przeniesione do Views folderu, należy zaktualizować przestrzenie nazw, aby były zgodne. Przestrzeń nazw dla plików XAML i code-behind stron jest ustawiona na Noteswartość . Należy to zaktualizować do Notes.Views.

W okienku Eksplorator rozwiązań rozwiń zarówno pliki NotePage.xaml, jak i AboutPage.xaml, aby wyświetlić pliki związane z kodem:
Kliknij dwukrotnie element NotePage.xaml.cs, aby otworzyć edytor kodu. Zmień przestrzeń nazw na Notes.Views:
```
namespace Notes.Views;
```
Powtórz poprzednie kroki dla elementu AboutPage.xaml.cs .
Kliknij dwukrotnie element NotePage.xaml, aby otworzyć edytor XAML. Stara przestrzeń nazw jest przywoływana za pomocą atrybutu x:Class , który definiuje typ klasy jest kodem za pomocą języka XAML. Ten wpis nie jest tylko przestrzenią nazw, ale przestrzenią nazw o typie. Zmień wartość na x:Class Notes.Views.NotePage:
```
x:Class="Notes.Views.NotePage"
```
Powtórz poprzedni krok dla elementu AboutPage.xaml , ale ustaw x:Class wartość na Notes.Views.AboutPage.

Naprawianie odwołania do przestrzeni nazw w powłoce

Plik AppShell.xaml definiuje dwie karty: jedną dla elementu i drugą NotesPage dla elementu AboutPage. Teraz, gdy te dwie strony zostały przeniesione do nowej przestrzeni nazw, mapowanie typów w języku XAML jest teraz nieprawidłowe. W okienku Eksplorator rozwiązań kliknij dwukrotnie wpis AppShell.xaml, aby otworzyć go w edytorze XAML. Powinien on wyglądać podobnie do następującego fragmentu kodu:

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

Przestrzeń nazw platformy .NET jest importowana do języka XAML za pomocą deklaracji przestrzeni nazw XML. W poprzednim adiustacji XAML jest xmlns:local="clr-namespace:Notes" to atrybut w elemecie głównym: <Shell>. Format deklarowania przestrzeni nazw XML w celu zaimportowania przestrzeni nazw platformy .NET w tym samym zestawie jest następujący:

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

Dlatego poprzednia deklaracja mapuje przestrzeń nazw XML elementu local na przestrzeń nazw platformy .NET .Notes Typowym rozwiązaniem jest mapowania nazwy local na przestrzeń nazw głównego projektu.

local Usuń przestrzeń nazw XML i dodaj nową. Ta nowa przestrzeń nazw XML będzie mapować na przestrzeń nazw platformy .NET , Notes.Viewswięc nadaj jej viewsnazwę . Deklaracja powinna wyglądać podobnie do następującego atrybutu: xmlns:views="clr-namespace:Notes.Views".

local Przestrzeń nazw XML została użyta ShellContent.ContentTemplate przez właściwości i zmień je na views. Kod XAML powinien teraz wyglądać podobnie do następującego fragmentu kodu:

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

Teraz powinno być możliwe uruchomienie aplikacji bez żadnych błędów kompilatora, a wszystko powinno nadal działać tak jak wcześniej.

Definiowanie modelu

Obecnie model jest danymi osadzonymi w notatce i widokach. Utworzymy nowe klasy reprezentujące te dane. Najpierw model reprezentujący dane strony notatek:

W okienku Eksplorator rozwiązań kliknij prawym przyciskiem myszy Models folder i wybierz polecenie Dodaj>klasę....
Nadaj klasie nazwę Note.cs i naciśnij przycisk Dodaj.

Otwórz Note.cs i zastąp kod następującym fragmentem kodu:

namespace Notes.Models;

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

Zapisz plik.

Następnie utwórz model strony z informacjami:

W okienku Eksplorator rozwiązań kliknij prawym przyciskiem myszy Models folder i wybierz polecenie Dodaj>klasę....
Nadaj klasie nazwę About.cs i naciśnij przycisk Dodaj.

Otwórz About.cs i zastąp kod następującym fragmentem kodu:

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

Zapisz plik.

Aktualizowanie strony Informacje

Strona informacje będzie najszybszą stroną do zaktualizowania i będzie można uruchomić aplikację i zobaczyć, jak ładuje dane z modelu.

W okienku Eksplorator rozwiązań otwórz plik Views\AboutPage.xaml.

Zastąp zawartość następującym fragmentem kodu:

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

Przyjrzyjmy się zmienionym wierszom wyróżnionym w poprzednim fragmencie kodu:

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

Ten wiersz mapuje Notes.Models przestrzeń nazw .NET na models przestrzeń nazw XML.
Właściwość BindingContext ContentPage obiektu jest ustawiona na wystąpienie Note.Models.About klasy przy użyciu przestrzeni nazw XML i obiektu models:Aboutklasy . Zostało to ustawione przy użyciu składni elementu właściwości zamiast atrybutu XML.
Ważne

Do tej pory właściwości zostały ustawione przy użyciu atrybutu XML. Doskonale sprawdza się w przypadku prostych wartości, takich jak Label.FontSize właściwość. Jeśli jednak wartość właściwości jest bardziej złożona, należy użyć składni elementu właściwości do utworzenia obiektu. Rozważmy następujący przykład tworzenia etykiety z jej FontSize zestawem właściwości:
```
<Label FontSize="22" />
```
Tę samą FontSize właściwość można ustawić przy użyciu składni elementu właściwości:
```
<Label>
    <Label.FontSize>
        22
    </Label.FontSize>
</Label>
```
Trzy <Label> kontrolki miały zmienioną Text wartość właściwości z zakodowanego na stałe ciągu na składnię powiązania: {Binding PATH}.

{Binding} składnia jest przetwarzana w czasie wykonywania, dzięki czemu wartość zwracana z powiązania jest dynamiczna. Część PATH {Binding PATH} elementu to ścieżka właściwości, z którą ma być powiązana. Właściwość pochodzi z bieżącej kontrolki BindingContext. Kontrolka <Label> BindingContext nie jest zdenerwowana. Kontekst jest dziedziczony z elementu nadrzędnego, gdy nie jest on ustawiany przez kontrolkę, co w tym przypadku kontekst ustawienia obiektu nadrzędnego jest obiektem głównym: ContentPage.

Obiekt w obiekcie BindingContext jest wystąpieniem About modelu. Ścieżka powiązania jednej z etykiet wiąże Label.Text właściwość z właściwością About.Title .

Ostatnia zmiana strony informacji polega na zaktualizowaniu przycisku, który otwiera stronę internetową. Adres URL został zakodowany w kodzie za pomocą kodu, ale adres URL powinien pochodzić z modelu, który znajduje się we BindingContext właściwości .

W okienku Eksplorator rozwiązań otwórz plik Views\AboutPage.xaml.cs.

Zastąp metodę LearnMore_Clicked poniższym kodem:

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

Jeśli spojrzysz na wyróżniony wiersz, kod sprawdza, czy BindingContext element jest typem Models.About , a jeśli tak, przypisuje go do zmiennej about . Następny wiersz wewnątrz instrukcji if otwiera przeglądarkę pod adresem URL podanym about.MoreInfoUrl przez właściwość .

Uruchom aplikację i powinna być widoczna, że działa dokładnie tak samo jak poprzednio. Spróbuj zmienić wartości modelu i zobaczyć, jak zmienia się również interfejs użytkownika i adres URL otwierany przez przeglądarkę.

Aktualizuj stronę notatek

Poprzednia sekcja powiązała about widok strony z modelem about , a teraz wykonasz to samo powiązanie note widoku z modelem note . Jednak w tym przypadku model nie zostanie utworzony w języku XAML, ale zostanie podany w kodzie w kilku następnych krokach.

W okienku Eksplorator rozwiązań otwórz plik Views\NotePage.xaml.

Zmień kontrolkę <Editor> dodającą Text właściwość . Powiąż właściwość z właściwościąText: : <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>

Modyfikacje kodu są bardziej skomplikowane niż XAML. Bieżący kod ładuje zawartość pliku w konstruktorze, a następnie ustawia ją bezpośrednio na TextEditor.Text właściwość . Oto jak wygląda bieżący kod:

public NotePage()
{
    InitializeComponent();

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

Zamiast ładować notatkę w konstruktorze, utwórz nową LoadNote metodę. Ta metoda wykona następujące czynności:

Zaakceptuj parametr nazwy pliku.
Utwórz nowy model notatek i ustaw nazwę pliku.
Jeśli plik istnieje, załaduj jego zawartość do modelu.
Jeśli plik istnieje, zaktualizuj model przy użyciu daty utworzenia pliku.
BindingContext Ustaw stronę na model.

W okienku Eksplorator rozwiązań otwórz plik Views\NotePage.xaml.cs.

Dodaj następującą metodę do klasy :

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

Zaktualizuj konstruktor klasy, aby wywołać metodę LoadNote. Nazwa pliku notatki powinna być losowo wygenerowaną nazwą, która ma zostać utworzona w lokalnym katalogu danych aplikacji.

public NotePage()
{
    InitializeComponent();

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

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

Dodawanie widoku i modelu zawierającego listę wszystkich notatek

Pozostały czas: 7 min

Ta część samouczka dodaje ostatni element aplikacji— widok, który wyświetla wszystkie utworzone wcześniej notatki.

Obecnie w widoku notatek jest wyświetlana pojedyncza notatka. Aby wyświetlić wiele notatek, utwórz nowy widok i model: AllNotes.

W okienku Eksplorator rozwiązań kliknij prawym przyciskiem myszy Views folder i wybierz polecenie Dodaj>nowy element...
W oknie dialogowym Dodawanie nowego elementu wybierz pozycję .NET MAUI na liście szablonów po lewej stronie okna. Następnie wybierz szablon .NET MAUI ContentPage (XAML). Nadaj plikowi nazwę AllNotesPage.xaml, a następnie wybierz pozycję Dodaj.
W okienku Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder i wybierz polecenie Dodaj>klasęModels...
Nadaj klasie nazwę AllNotes.cs i naciśnij przycisk Dodaj.

Kod modelu AllNotes

Nowy model będzie reprezentować dane wymagane do wyświetlenia wielu notatek. Te dane będą właściwością reprezentującą kolekcję notatek. Kolekcja będzie kolekcją ObservableCollection , która jest wyspecjalizowaną kolekcją. Gdy kontrolka zawierająca listę wielu elementów, takich jak , jest powiązana z elementem ListViewObservableCollection, obie współpracują ze sobą, aby automatycznie synchronizować listę elementów z kolekcją. Jeśli lista dodaje element, kolekcja zostanie zaktualizowana. Jeśli kolekcja doda element, kontrolka zostanie automatycznie zaktualizowana przy użyciu nowego elementu.

W okienku Eksplorator rozwiązań otwórz plik Models\AllNotes.cs.

Zastąp kod następującym fragmentem kodu:

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

Poprzedni kod deklaruje kolekcję o nazwie Notesi używa LoadNotes metody do ładowania notatek z urządzenia. Ta metoda używa rozszerzeń LINQ do ładowania, przekształcania i sortowania danych w kolekcji Notes .

Projektowanie strony Wszystkienotes

Następnie widok musi zostać zaprojektowany tak, aby obsługiwał model AllNotes .

W okienku Eksplorator rozwiązań otwórz plik Views\AllNotesPage.xaml.

Zastąp kod następującym znacznikiem:

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

Poprzedni kod XAML wprowadza kilka nowych pojęć:

Właściwość ContentPage.ToolbarItems zawiera wartość ToolbarItem. Przyciski zdefiniowane tutaj są zwykle wyświetlane w górnej części aplikacji wraz z tytułem strony. Jednak w zależności od platformy może ona znajdować się w innej pozycji. Po naciśnięciu Clicked jednego z tych przycisków zdarzenie jest wywoływane, podobnie jak zwykły przycisk.

Właściwość ToolbarItem.IconImageSource ustawia ikonę wyświetlaną na przycisku. Ikona może być dowolnym zasobem obrazu zdefiniowanym przez projekt, jednak w tym przykładzie FontImage jest używany element . Obiekt FontImage może używać pojedynczego glifu z czcionki jako obrazu.
Kontrolka CollectionView wyświetla kolekcję elementów, a w tym przypadku jest powiązana z właściwością modelu Notes . Sposób prezentowania każdego elementu przez widok kolekcji jest ustawiany za pomocą CollectionView.ItemsLayout właściwości i CollectionView.ItemTemplate .

Dla każdego elementu w kolekcji CollectionView.ItemTemplate element generuje zadeklarowany kod XAML. Ten BindingContext kod XAML staje się samym elementem kolekcji, w tym przypadku każda notatka indywidualna. Szablon notatki używa dwóch etykiet, które są powiązane z właściwościami i Date notatekText.
Obiekt CollectionView obsługuje zdarzenie, które jest zgłaszane po wybraniu SelectionChanged elementu w widoku kolekcji.

Aby załadować notatki i obsługiwać zdarzenia, należy napisać kod do widoku.

W okienku Eksplorator rozwiązań otwórz plik Widoki/AllNotesPage.xaml.cs.

Zastąp kod następującym fragmentem kodu:

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

Ten kod używa konstruktora do ustawienia BindingContext strony na model.

Metoda OnAppearing jest zastępowana z klasy bazowej. Ta metoda jest wywoływana automatycznie za każdym razem, gdy strona jest wyświetlana, na przykład po przejściu do strony. Kod w tym miejscu informuje model o załadowaniu notatek. Ponieważ element w widoku AllNotes jest powiązany z właściwością modelu Notes AllNotes, czyli właściwością ObservableCollection, za każdym razem, gdy notatki są ładowane, CollectionView element jest automatycznie aktualizowany. CollectionView

Procedura Add_Clicked obsługi wprowadza inną nową koncepcję, nawigację. Ponieważ aplikacja używa powłoki MAUI platformy .NET, możesz przejść do stron, wywołując metodę Shell.Current.GoToAsync . Zwróć uwagę, że program obsługi jest zadeklarowany za async pomocą słowa kluczowego , co umożliwia użycie słowa kluczowego await podczas nawigowania. Ten program obsługi przechodzi do elementu NotePage.

Ostatnim fragmentem kodu w poprzednim fragmencie kodu jest notesCollection_SelectionChanged procedura obsługi. Ta metoda pobiera aktualnie wybrany element, Note model i używa jego informacji, aby przejść do elementu NotePage. GoToAsync używa ciągu identyfikatora URI do nawigacji. W tym przypadku jest tworzony ciąg, który używa parametru ciągu zapytania do ustawiania właściwości na stronie docelowej. Ciąg interpolowany reprezentujący identyfikator URI wygląda podobnie do następującego ciągu:

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

Parametr ItemId= jest ustawiony na nazwę pliku na urządzeniu, na którym jest przechowywana notatka.

Program Visual Studio może wskazywać, że NotePage.ItemId właściwość nie istnieje, co nie istnieje. Następnym krokiem jest zmodyfikowanie Note widoku w celu załadowania modelu na podstawie utworzonego parametru ItemId .

Parametry ciągu zapytania

Widok Note musi obsługiwać parametr ciągu zapytania, ItemId. Utwórz go teraz:

W okienku Eksplorator rozwiązań otwórz plik Widoki/NotePage.xaml.cs.
QueryProperty Dodaj atrybut do słowa kluczowegoclass, podając nazwę właściwości ciągu zapytania i właściwość klasy, do których jest mapowanie, ItemId i ItemId odpowiednio:
```
[QueryProperty(nameof(ItemId), nameof(ItemId))]
public partial class NotePage : ContentPage
```
Dodaj nową string właściwość o nazwie ItemId. Ta właściwość wywołuje metodę LoadNote , przekazując wartość właściwości, która z kolei powinna być nazwą pliku notatki:
```
public string ItemId
{
    set { LoadNote(value); }
}
```

Zastąp programy SaveButton_Clicked obsługi i DeleteButton_Clicked następującym kodem:

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

Przyciski są teraz async. Po naciśnięciu strony przechodzi z powrotem do poprzedniej strony przy użyciu identyfikatora URI ...

Usuń zmienną _fileName z góry kodu, ponieważ nie jest już używana przez klasę.

Modyfikowanie drzewa wizualnego aplikacji

AppShell Zamiast tego trwa ładowanie strony z pojedynczą notatką, ale musi załadować widok AllPages. Otwórz plik AppShell.xaml i zmień pierwszy ShellContent wpis, aby wskazywał wartość AllNotesPage zamiast NotePage:

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

Jeśli teraz uruchomisz aplikację, zauważysz, że ulegnie awarii, jeśli naciśniesz przycisk Dodaj, narzekając, że nie może przejść do .NotesPage Każda strona, do którą można przejść z innej strony, musi zostać zarejestrowana w systemie nawigacji. Strony AllNotesPage i AboutPage są automatycznie rejestrowane w systemie nawigacji przez zadeklarowanie w pliku TabBar.

Zarejestruj element w NotesPage systemie nawigacji:

W okienku Eksplorator rozwiązań otwórz plik AppShell.xaml.cs.

Dodaj wiersz do konstruktora, który rejestruje trasę nawigacji:

namespace Notes;

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

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

Metoda Routing.RegisterRoute przyjmuje dwa parametry:

Pierwszy parametr to nazwa ciągu identyfikatora URI, który chcesz zarejestrować. W tym przypadku rozpoznana nazwa to "NotePage".
Drugi parametr to typ strony do załadowania po "NotePage" przejściu do.

Teraz możesz uruchomić aplikację. Spróbuj dodać nowe notatki, przechodzić między notatkami i usuwać notatki.

Zapoznaj się z kodem. Zapoznaj się z kodem tego samouczka. Jeśli chcesz pobrać kopię ukończonego projektu, aby porównać kod z, pobierz ten projekt.

Udostępnij za pośrednictwem