Udostępnij za pomocą

Tworzenie strony notatki

Teraz utworzysz stronę, która umożliwia użytkownikowi edytowanie notatki, a następnie napiszesz kod w celu zapisania lub usunięcia notatki.

Wskazówka

Możesz pobrać lub wyświetlić kod tego samouczka z repozytorium GitHub. Aby zobaczyć kod w tym kroku, zobacz to zatwierdzenie: strona notatek — początkowa.

Najpierw dodaj nową stronę do projektu:

  1. W okienku Eksplorator rozwiązań programu Visual Studio kliknij prawym przyciskiem myszy projekt >Dodaj>nowy element....

  2. W oknie dialogowym Dodawanie nowego elementu wybierz pozycję WinUI na liście szablonów po lewej stronie okna. Następnie wybierz szablon Pusta strona (WinUI 3). Nadaj plikowi NotePage.xamlnazwę , a następnie wybierz pozycję Dodaj.

  3. Plik NotePage.xaml zostanie otwarty na nowej karcie, wyświetlając wszystkie znaczniki XAML reprezentujące interfejs użytkownika strony. Zastąp <Grid> ... </Grid> element w języku XAML następującym znacznikiem:

    <Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

  4. Zapisz plik, naciskając CTRL + S, klikając ikonę Zapisz na pasku narzędzi lub wybierając menu Plik>Zapisz NotePage.xaml.

    Jeśli teraz uruchomisz aplikację, nie zobaczysz właśnie utworzonej strony notatek. Jest to spowodowane tym, że nadal trzeba ustawić ją jako zawartość kontrolki Frame w pliku MainWindow.

  5. Otwórz MainWindow.xaml element NotePage w pliku i ustaw Frame go w następujący sposób:

    <Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>

    Teraz po uruchomieniu aplikacji Frame program załaduje wystąpienie NotePage obiektu i wyświetli je użytkownikowi.

Ważne

Mapowania przestrzeni nazw XAML (xmlns) to odpowiednik XAML instrukcji języka C# using . local: to prefiks mapowany na strony XAML dla projektu aplikacji (xmlns:local="using:WinUINotes"). Jest mapowany tak, aby odwoływał się do tej samej przestrzeni nazw, która została utworzona, aby zawierała x:Class atrybut i kod dla wszystkich plików XAML, w tym App.xaml. Jeśli zdefiniujesz wszystkie klasy niestandardowe, których chcesz użyć w języku XAML w tej samej przestrzeni nazw, możesz użyć prefiksu local: , aby odwoływać się do typów niestandardowych w języku XAML.

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

Nowy interfejs użytkownika strony notatek z siatką wyróżnioną przez program Visual Studio.

  • Definicje Grid.RowDefinitions i Grid.ColumnDefinitions definiują siatkę z 2 wierszami i 3 kolumnami (umieszczonymi poniżej paska tytułu).

    • Dolny wiersz ma automatycznie (Auto) rozmiar, aby dopasować jego zawartość— dwa przyciski. Górny wiersz używa całej pozostałej przestrzeni pionowej (*).
    • Środkowa kolumna ma 400szerokość epx i jest miejscem, w którym edytor notatek idzie. Kolumny po obu stronach są puste i dzielą wszystkie pozostałe przestrzenie poziome między nimi (*).

    Uwaga / Notatka

    Ze względu na sposób działania systemu skalowania podczas projektowania aplikacji XAML projektujesz efektywne piksele, a nie rzeczywiste piksele fizyczne. Efektywne piksele (epx) to wirtualna jednostka miary i służą do wyrażania wymiarów i odstępów, niezależnie od gęstości ekranu.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox>to kontrolka wprowadzania tekstu (TextBox) skonfigurowana do wprowadzania tekstu wielowierszowego i umieszczona w górnej komórce GridGrid.Column="1"(). Indeksy wierszy i kolumn są oparte na 0, a domyślnie kontrolki są umieszczane w wierszu 0 i kolumnie 0 elementu nadrzędnego Grid. Dlatego jest to odpowiednik określania wiersza 0, kolumny 1.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> definiuje kontrolkę układu (StackPanel), która stosuje elementy podrzędne w pionie (wartość domyślna) lub poziomo. Znajduje się w dolnej komórce Grid środka (Grid.Row="1" Grid.Column="1").

    Uwaga / Notatka

    Grid.Row="1" Grid.Column="1" jest przykładem dołączonych właściwości XAML. Dołączone właściwości pozwalają jednemu obiektowi XAML ustawić właściwość, która należy do innego obiektu XAML. Często, podobnie jak w tym przypadku, elementy podrzędne mogą używać dołączonych właściwości, aby poinformować ich element nadrzędny o tym, jak mają być prezentowane w interfejsie użytkownika.

  • Dwie <Button> kontrolki znajdują się wewnątrz <StackPanel> elementu i rozmieszczone w poziomie. Dodasz kod do obsługi zdarzeń kliknięcia przycisków w następnej sekcji.

Dowiedz się więcej w dokumentacji:

Ładowanie i zapisywanie notatki

NotePage.xaml.cs Otwórz plik za kodem. Po dodaniu nowego pliku XAML kod-behind zawiera jeden wiersz w konstruktorze, wywołanie InitializeComponent metody :

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.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 dodasz kod do NotePage.xaml.cs pliku kodu w celu obsługi ładowania i zapisywania notatek.

  1. Dodaj następujące deklaracje zmiennych do NotePage klasy:

    public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";

    Gdy notatka zostanie zapisana, zostanie zapisana w lokalnym magazynie aplikacji jako plik tekstowy.

    Klasa StorageFolder służy do uzyskiwania dostępu do lokalnego folderu danych aplikacji. Ten folder jest specyficzny dla aplikacji, więc zapisane tutaj notatki nie mogą być dostępne dla innych aplikacji. Użyjesz klasy StorageFile , aby uzyskać dostęp do pliku tekstowego zapisanego w tym folderze. Nazwa pliku jest reprezentowana przez zmienną fileName . Na razie ustaw wartość fileName "note.txt".

  2. Utwórz procedurę obsługi zdarzeń dla zdarzenia załadowanego na stronie notatki.

    public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
        NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}

    W tej metodzie wywołasz metodę TryGetItemAsync , aby pobrać plik tekstowy z folderu. Jeśli plik nie istnieje, zwraca wartość null. Jeśli plik istnieje, wywołaj metodę ReadTextAsync , aby odczytać tekst z pliku do NoteEditor właściwości Text kontrolki. (Pamiętaj, NoteEditor że to kontrolka utworzona TextBox w pliku XAML. Odwołujesz się do niego w pliku za pomocą przypisanego x:Name do niego kodu.

    Ważne

    Należy oznaczyć tę metodę słowem kluczowym, async ponieważ wywołania dostępu do plików są asynchroniczne. Krótko mówiąc, jeśli wywołasz metodę kończącą się ...Async (na przykład TryGetItemAsync), możesz dodać operator await do wywołania. Dzięki temu kolejny kod nie będzie wykonywany do momentu ukończenia oczekiwanego wywołania i reagowania interfejsu użytkownika. W przypadku używania awaitmetody , wywoływanej metody należy oznaczyć za pomocą słowa kluczowego asynchronicznego . Aby uzyskać więcej informacji, zobacz Wywoływanie asynchronicznych interfejsów API w języku C#.

Dowiedz się więcej w dokumentacji:

Dodawanie programów obsługi zdarzeń

Następnie dodaj programy obsługi zdarzeń click dla przycisków Zapisz i Usuń . Dodawanie procedur obsługi zdarzeń jest czymś, co często wykonujesz podczas tworzenia aplikacji, dlatego program Visual Studio udostępnia kilka funkcji ułatwiających.

  1. W pliku umieść kursor po NotePage.xaml atrybucie Content w kontrolce ZapiszButton. Wpisz Click=. W tym momencie program Visual Studio powinien pojawić się automatycznie ukończony interfejs użytkownika, który wygląda następująco:

    Zrzut ekranu przedstawiający interfejs użytkownika automatycznego uzupełniania obsługi zdarzeń programu Visual Studio w edytorze XAML

    • Naciśnij strzałki w dół, aby wybrać pozycję <Nowa procedura obsługi> zdarzeń, a następnie naciśnij Tab. Program Visual Studio ukończy atrybut i Click="Button_Click" doda metodę obsługi zdarzeń o nazwie Button_Click w NotePage.xaml.cs pliku za pomocą kodu.

    Teraz należy zmienić nazwę Button_Click metody na bardziej zrozumiałą. Zrobisz to w poniższych krokach.

  2. W NotePage.xaml.cspliku znajdź metodę, która została dodana dla Ciebie:

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Wskazówka

    Aby zlokalizować kod w aplikacji, kliknij pozycję Wyszukaj na pasku tytułu programu Visual Studio i użyj opcji Wyszukiwanie kodu . Kliknij dwukrotnie wynik wyszukiwania, aby otworzyć kod w edytorze kodu.

    Funkcja wyszukiwania w programie Visual Studio

  3. Umieść kursor przed symbolem "B" w Button i wpisz Save. Poczekaj chwilę, a nazwa metody zostanie wyróżniona na zielono.

  4. Po umieszczeniu wskaźnika myszy nad nazwą metody program Visual Studio wyświetli etykietkę narzędzia ze śrubokrętem lub ikoną żarówki. Kliknij przycisk strzałki w dół obok ikony, a następnie kliknij pozycję Zmień nazwę "Button_Click" na "SaveButton_Click".

    Nazwa interfejsu użytkownika wyskakującego interfejsu użytkownika metody programu Visual Studio.

    Program Visual Studio zmieni nazwę metody wszędzie w aplikacji, w tym w pliku XAML, w którym najpierw dodano ją do pliku Button.

  5. Powtórz te kroki dla przycisku Usuń i zmień nazwę metody na DeleteButton_Click.

Teraz, gdy programy obsługi zdarzeń są podłączane, możesz dodać kod, aby zapisać i usunąć plik notatki.

  1. Dodaj ten kod w metodzie SaveButton_Click , aby zapisać plik. Zwróć uwagę, że należy również zaktualizować sygnaturę metody za pomocą słowa kluczowego async .

    private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}

    W metodzie SaveButton_Click najpierw sprawdzisz, czy noteFile została utworzona. Jeśli jest nullto , musisz utworzyć nowy plik w folderze magazynu lokalnego o nazwie reprezentowanej przez fileName zmienną i przypisać plik do zmiennej noteFile . Następnie napiszesz tekst w kontrolce TextBox do pliku reprezentowanego przez noteFileelement .

  2. Dodaj ten kod w metodzie , DeleteButton_Click aby usunąć plik. Należy również zaktualizować sygnaturę metody za pomocą słowa kluczowego async tutaj.

    private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}

    W metodzie DeleteButton_Click najpierw sprawdzisz, czy noteFile istnieje. Jeśli tak, usuń plik reprezentowany przez noteFile z lokalnego folderu magazynu i ustaw wartość noteFilenull. Następnie zresetuj tekst w kontrolce TextBox na pusty ciąg.

    Ważne

    Po usunięciu pliku tekstowego z systemu plików należy ustawić wartość noteFilenull. Pamiętaj, że noteFile jest to plik StorageFile , który zapewnia dostęp do pliku systemowego w aplikacji. Po usunięciu pliku systemowego nadal wskazuje miejsce noteFile , w którym znajdował się plik systemowy, ale nie wie, że już nie istnieje. Jeśli spróbujesz teraz odczytać, zapisać lub usunąć plik systemowy, zostanie wyświetlony błąd.

  3. Zapisz plik, naciskając CTRL + S, klikając ikonę Zapisz na pasku narzędzi lub wybierając menu Plik>Zapisz NotePage.xaml.cs.

Końcowy kod pliku w tle powinien wyglądać następująco:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Testowanie notatki

Za pomocą tego kodu możesz przetestować aplikację, aby upewnić się, że notatka zapisuje i ładuje się poprawnie.

  1. Skompiluj i uruchom projekt, naciskając F5, klikając przycisk Debuguj "Start" na pasku narzędzi lub wybierając menu Uruchom uruchom>debugowanie.
  2. Wpisz w polu wprowadzania tekstu i naciśnij przycisk Zapisz .
  3. Zamknij aplikację, a następnie uruchom ją ponownie. Wprowadzona notatka powinna zostać załadowana z magazynu urządzenia.
  4. Naciśnij przycisk Usuń .
  5. Zamknij aplikację, uruchom ją ponownie. Powinna zostać wyświetlona nowa pusta notatka.

Ważne

Po potwierdzeniu, że zapisywanie i usuwanie notatki działa poprawnie, utwórz i zapisz nową notatkę ponownie. Zapisz notatkę, aby przetestować aplikację w kolejnych krokach.

Przejdź do kroku 3 . Dodawanie widoku i modelu dla notatki

  • Last updated on