Поделиться через

Создание страницы для заметки

Теперь вы создадите страницу, которая позволяет пользователю изменять заметку, а затем вы напишете код для сохранения или удаления заметки.

Подсказка

Вы можете скачать или просмотреть код для этого руководства из репозитория GitHub. Чтобы увидеть код, как на этом шаге, см. эту фиксацию: страница заметок — начальная.

Сначала добавьте новую страницу в проект:

  1. В области обозревателя решений Visual Studio щелкните правой кнопкой мыши проект >Add>New Item....

  2. В диалоговом окне "Добавление нового элемента" выберите WinUI в списке шаблонов в левой части окна. Затем выберите шаблон "Пустая страница" (WinUI 3). Присвойте файлу NotePage.xamlимя и нажмите кнопку "Добавить".

  3. Файл NotePage.xaml откроется на новой вкладке, отображая всю разметку XAML, представляющую пользовательский интерфейс страницы. Замените <Grid> ... </Grid> элемент в XAML следующим разметкой:

    <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. Сохраните файл, нажав клавиши CTRL+S, щелкнув значок "Сохранить" на панели инструментов или выбрав команду>NotePage.xaml меню".

    Если вы запускаете приложение прямо сейчас, вы не увидите только что созданную страницу заметок. Это связано с тем, что вам по-прежнему нужно задать его в качестве содержимого Frame элемента управления MainWindow.

  5. Откройте MainWindow.xaml и задайте NotePage в качестве SourcePageTypeFrameв следующем виде:

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

    Теперь, когда вы запускаете приложение, Frame он загружает экземпляр NotePage и отображает его пользователю.

Это важно

Сопоставления пространства имен XAML (xmlns) являются аналогом XAML инструкции C# using . local: — это префикс, сопоставленный для вас на страницах XAML для проекта приложения (xmlns:local="using:WinUINotes"). Он сопоставляется с тем же пространством имен, которое создано для хранения x:Class атрибута и кода для всех файлов XAML, включая App.xaml. Если вы определяете любые пользовательские классы, которые вы хотите использовать в XAML в этом же пространстве имен, можно использовать local: префикс для ссылки на пользовательские типы в XAML.

Давайте разберем ключевые части элементов управления XAML, размещенные на странице:

Новый пользовательский интерфейс страницы заметок с сеткой, выделенной Visual Studio.

  • Grid.RowDefinitions и Grid.ColumnDefinitions определяют сетку с 2 строками и 3 столбцами (помещенными под строкой заголовка).

    • Нижняя строка автоматически (Auto) имеет размер для его содержимого, две кнопки. Верхняя строка использует все оставшееся вертикальное пространство (*).
    • Средний столбец имеет 400ширину epx и находится в том месте, где идет редактор заметок. Столбцы на обеих сторонах пусты и разделяют все оставшееся горизонтальное пространство между ними (*).

    Замечание

    Из-за того, как работает система масштабирования, при разработке приложения XAML вы работаете с эффективными пикселями, а не физическими пикселями. Эффективные пиксели (epx) — это виртуальная единица измерения, и они используются для выражения измерений макета и интервалов, независимо от плотности экрана.

  • <TextBox x:Name="NoteEditor" ... > ... </TextBox> — это элемент управления записи текста (TextBox), настроенный для записи с несколькими строками, и помещается в верхнюю ячейку Grid центра (Grid.Column="1"). Индексы строк и столбцов основаны на 0, и по умолчанию элементы управления помещаются в строку 0 и столбец 0 родительского элемента Grid. Таким образом, это эквивалент указания строки 0, столбца 1.

  • <StackPanel Orientation="Horizontal" ... > ... </StackPanel> определяет элемент управления макетом (StackPanel), который стекает дочерние элементы по вертикали (по умолчанию) или горизонтально. Он помещается в нижнюю центральную ячейку Grid (Grid.Row="1" Grid.Column="1").

    Замечание

    Grid.Row="1" Grid.Column="1" пример присоединенных свойств XAML. Присоединенные свойства позволяют одному объекту XAML задать свойство, которое принадлежит другому объекту XAML. Часто дочерние элементы могут использовать присоединенные свойства для информирования родительского элемента о том, как они должны быть представлены в пользовательском интерфейсе.

  • Два <Button> элемента управления находятся внутри <StackPanel> и упорядочены по горизонтали. Вы добавите код для обработки событий нажатия кнопки в следующем разделе.

Дополнительные сведения см. в документации:

Загрузка и сохранение заметки

NotePage.xaml.cs Откройте файл программной части. При добавлении нового XAML-файла код программной части содержит одну строку в конструкторе, вызов InitializeComponent метода:

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

Метод InitializeComponent считывает разметку XAML и инициализирует все объекты, определенные разметкой. Объекты подключены в их отношениях с родительским дочерним элементом, а обработчики событий, определенные в коде, присоединяются к событиям, заданным в XAML.

Теперь вы добавите код в NotePage.xaml.cs файл программной части для обработки загрузки и сохранения заметок.

  1. Добавьте в класс следующие объявления переменных NotePage :

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

    При сохранении заметки она сохраняется в локальном хранилище приложения в виде текстового файла.

    Класс StorageFolder используется для доступа к локальной папке данных приложения. Эта папка связана с приложением, поэтому заметки, сохраненные здесь, не могут быть доступны другим приложениям. Класс StorageFile используется для доступа к текстовому файлу, сохраненном в этой папке. Имя файла представлено переменной fileName . Теперь задайте для параметра fileName "note.txt".

  2. Создайте обработчик событий для события loaded страницы заметок.

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

    В этом методе вызывается TryGetItemAsync , чтобы получить текстовый файл из папки. Если файл не существует, он возвращается null. Если файл существует, вызовите ReadTextAsync , чтобы считывать текст из файла в NoteEditor свойство Text элемента управления. (Помните, что элемент NoteEditor управления, TextBox созданный в XAML-файле. Вы ссылаетесь на него в файле кода программной части, используя назначенный x:Name ему файл.)

    Это важно

    Этот метод необходимо пометить ключевым async словом, так как вызовы доступа к файлам являются асинхронными. Короче говоря, при вызове метода, заканчивающегося ...Async (например TryGetItemAsync), можно добавить оператор await в вызов. При этом последующий код не выполняется, пока ожидающий вызов не завершится и не будет реагировать на пользовательский интерфейс. При использовании awaitметод, который вы вызываете, необходимо пометить с помощью асинхронного ключевого слова. Дополнительные сведения см. в статье "Вызов асинхронных API" в C#.

Дополнительные сведения см. в документации:

Добавление обработчиков событий

Затем добавьте обработчики событий click для кнопок "Сохранить и удалить ". Добавление обработчиков событий — это то, что вы будете делать часто при создании приложений, поэтому Visual Studio предоставляет несколько функций, чтобы упростить работу.

  1. NotePage.xaml В файле поместите курсор после атрибута Content в элемент управления SaveButton. Введите Click=. На этом этапе Visual Studio должен появиться автоматически завершенный пользовательский интерфейс, который выглядит следующим образом:

    Снимок экрана: новый обработчик событий Visual Studio автоматически завершает пользовательский интерфейс в редакторе XAML

    • Нажмите клавишу СТРЕЛКА ВНИЗ, чтобы выбрать <новый обработчик> событий, а затем нажмите клавишу TAB. Visual Studio завершит атрибут и Click="Button_Click" добавит метод обработчика событий, названный Button_Click в файле кода программной NotePage.xaml.cs части.

    Теперь следует переименовать метод в Button_Click что-то более понятное. Это будет выполняться в следующих шагах.

  2. В NotePage.xaml.csполе поиска метода, который был добавлен для вас:

    private void Button_Click(object sender, RoutedEventArgs e)
{

}

    Подсказка

    Чтобы найти код в приложении, щелкните "Поиск " в строке заголовка Visual Studio и используйте параметр "Поиск кода ". Дважды щелкните результат поиска, чтобы открыть код в редакторе кода.

    Функция поиска в Visual Studio

  3. Поместите курсор перед "B" и введите ButtonSaveего. Подождите момент, и имя метода будет выделено зеленым цветом.

  4. При наведении указателя мыши на имя метода Visual Studio отобразит подсказку со значком отвертки или лампочки. Нажмите кнопку стрелки вниз рядом с значком, а затем щелкните Переименовать "Button_Click" в "SaveButton_Click".

    Пользовательский интерфейс переименовывать всплывающее окно метода Visual Studio.

    Visual Studio переименовывает метод везде в приложении, в том числе в XAML-файле, где вы сначала добавили его в Buttonприложение.

  5. Повторите эти действия для кнопки Delete и переименуйте метод DeleteButton_Clickв .

Теперь, когда обработчики событий подключены, можно добавить код для сохранения и удаления файла заметок.

  1. Добавьте этот код в SaveButton_Click метод для сохранения файла. Обратите внимание, что также необходимо обновить сигнатуру метода с помощью ключевого 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);
}

    SaveButton_Click Сначала проверьте, был ли noteFile создан метод. Если это nullтак, необходимо создать файл в локальной папке хранилища с именем, представленным fileName переменной, и назначить файл переменной noteFile . Затем вы записываете текст в элемент управления в TextBox файл, noteFileпредставленный .

  2. Добавьте этот код в DeleteButton_Click метод для удаления файла. Здесь также необходимо обновить сигнатуру метода с async ключевым словом.

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

    В методе DeleteButton_Click сначала проверяется noteFile наличие. При этом удалите файл, представленный noteFile из локальной папки хранилища, и задайте для него значениеnoteFilenull. Затем сбросить текст в TextBox элементе управления в пустую строку.

    Это важно

    После удаления текстового файла из файловой системы важно задать значение noteFilenull. Помните, что noteFile это StorageFile , предоставляющий доступ к системным файлам в приложении. После удаления noteFile системного файла по-прежнему указывает на то, где находится системный файл, но не знает, что он больше не существует. Если вы пытаетесь прочитать, написать или удалить системный файл сейчас, вы получите ошибку.

  3. Сохраните файл, нажав клавиши CTRL+S, щелкнув значок "Сохранить" на панели инструментов или выбрав команду>NotePage.xaml.cs меню".

Окончательный код файла программной части должен выглядеть следующим образом:

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

Проверка заметки

С помощью этого кода вы можете протестировать приложение, чтобы убедиться, что заметки сохраняются и загружаются правильно.

  1. Создайте и запустите проект, нажав клавишу F5, нажав кнопку отладки "Пуск" на панели инструментов или выбрав меню Запустить>отладку.
  2. Введите текст в текстовое поле и нажмите кнопку "Сохранить ".
  3. Закройте приложение, а затем перезапустите его. Введенное примечание должно быть загружено из хранилища устройства.
  4. Нажмите кнопку "Удалить ".
  5. Закройте приложение, перезапустите его. Необходимо представить новую пустую заметку.

Это важно

После подтверждения правильности сохранения и удаления заметки создайте и сохраните новую заметку снова. Вы хотите сохранить заметку, чтобы протестировать приложение на последующих шагах.

Перейдите к шагу 3. Добавление представления и модели для заметки

  • Last updated on