Выполнять навигации в приложении Xamarin.Forms многостраничныхPerform Navigation in a Multi-Page Xamarin.Forms Application

Скачать пример Скачать примерDownload Sample Download the sample

В этом кратком руководстве вы узнаете, как:In this quickstart, you will learn how to:

  • Добавление дополнительных страниц в решение Xamarin.Forms.Add additional pages to a Xamarin.Forms solution.
  • Выполните переход между страницами.Perform navigation between pages.
  • Используйте привязку данных для синхронизации данных между элементами пользовательского интерфейса и источник данных.Use data binding to synchronize data between user interface elements and their data source.

Кратком руководстве показано, как включить одностраничное кросс платформенные приложения Xamarin.Forms, который может хранить одно примечание в одностраничное приложение, может хранить несколько заметок.The quickstart walks through how to turn a single page cross-platform Xamarin.Forms application, capable of storing a single note, into a multi-page application, capable of storing multiple notes. Ниже показано итоговое приложение:The final application is shown below:

Предварительные требованияPrerequisites

При успешном выполнении предыдущего краткого руководства перед попыткой в этом кратком руководстве.You should successfully complete the previous quickstart before attempting this quickstart. Кроме того, скачать предыдущих примеров и использовать его в качестве отправной точки для этого краткого руководства.Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Обновление приложения с помощью Visual StudioUpdate the app with Visual Studio

  1. Запустите Visual Studio.Launch Visual Studio. В окне «Пуск» выберите заметки решения в список последних проектов и решений, или щелкните откройте проект или решениеи в открыть проект/решение диалоговое окно Выберите файл решения для проекта примечания:In the start window, click the Notes solution in the recent projects/solutions list, or click Open a project or solution, and in the Open Project/Solution dialog select the solution file for the Notes project:

  2. В обозревателе решений, щелкните правой кнопкой мыши заметки проекта и выберите Добавить > Новая папка:In Solution Explorer, right-click on the Notes project and select Add > New Folder:

  3. В обозревателе решений, имя новой папки моделей:In Solution Explorer, name the new folder Models:

  4. В обозревателе решенийвыберите моделей папку, щелкните правой кнопкой мыши и выберите Добавить > новый элемент... :In Solution Explorer, select the Models folder, right-click, and select Add > New Item...:

  5. В Добавление нового элемента диалоговом окне выберите Visual C# элементы > класс, назовите новый файл Примечаниеи нажмите кнопку добавить кнопки:In the Add New Item dialog, select Visual C# Items > Class, name the new file Note, and click the Add button:

    Это добавит класс с именем Примечание для моделей папке заметки проекта.This will add a class named Note to the Models folder of the Notes project.

  6. В Note.cs, удалите весь код шаблона и замените его следующим кодом:In Note.cs, remove all of the template code and replace it with the following code:

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

    Этот класс определяет Note модели, в которой будут храниться данные о каждом Примечание в приложении.This class defines a Note model that will store data about each note in the application.

    Сохраните изменения в Note.cs , нажав клавишу CTRL + Sи закройте файл.Save the changes to Note.cs by pressing CTRL+S, and close the file.

  7. В обозревателе решений, щелкните правой кнопкой мыши заметки проекта и выберите Добавить > новый элемент... . В Добавление нового элемента диалоговом окне выберите Visual C# элементы > Xamarin.Forms > страница содержимого, назовите новый файл NoteEntryPageи нажмите кнопку Добавление кнопки:In Solution Explorer, right-click on the Notes project and select Add > New Item... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file NoteEntryPage, and click the Add button:

    Это добавит новую страницу с именем NoteEntryPage в корневую папку проекта.This will add a new page named NoteEntryPage to the root folder of the project. Эта страница будет второй страницы в приложении.This page will be the second page in the application.

  8. В NoteEntryPage.xaml, удалите весь код шаблона и замените его следующим кодом:In NoteEntryPage.xaml, remove all of the template code and replace it with the following code:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.NoteEntryPage"
                 Title="Note Entry">
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Этот код декларативно определяет пользовательский интерфейс для страницы, которая состоит из Editor для ввода текста, а также два Button экземпляров, которые направляют сохранения или удаления приложения файл.This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button instances that direct the application to save or delete a file. Два Button экземпляров располагаются по горизонтали в Grid , с помощью Editor и Grid по вертикали изложенные в StackLayout .The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Кроме того Editor использует привязку данных для привязки к Text свойство Note модели.In addition, the Editor uses data binding to bind to the Text property of the Note model. Дополнительные сведения о привязке данных см. в разделе привязки данных в подробный обзор быстрого запуска Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NoteEntryPage.xaml , нажав клавишу CTRL + Sи закройте файл.Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  9. В NoteEntryPage.xaml.cs, удалите весь код шаблона и замените его следующим кодом:In NoteEntryPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }
    

    Этот код сохраняет Note экземпляр, который представляет отдельного комментария в BindingContext страницы.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Когда Сохранить Button нажата OnSaveButtonClicked выполняется обработчик событий, который либо сохраняет содержимое Editor в новый файл с случайное имя файла, или в существующий файл, если Примечание обновляется.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which either saves the content of the Editor to a new file with a randomly generated filename, or to an existing file if a note is being updated. В обоих случаях файл хранится в папке данных локального приложения для приложения.In both cases, the file is stored in the local application data folder for the application. Затем метод выполняет переход к предыдущей странице.Then the method navigates back to the previous page. Когда удалить Button нажата OnDeleteButtonClicked выполняется обработчик событий, который удаляет файл, в условии, что он существует и переходит обратно к предыдущей странице.When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and navigates back to the previous page. Дополнительные сведения о навигации, см. в разделе навигации в подробный обзор быстрого запуска Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NoteEntryPage.xaml.cs , нажав клавишу CTRL + Sи закройте файл.Save the changes to NoteEntryPage.xaml.cs by pressing CTRL+S, and close the file.

    Предупреждение

    Попытка выполнить сборку приложения на этом этапе приведет к ошибкам, будут устранены в последующих шагах.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. В обозревателе решений, щелкните правой кнопкой мыши заметки проекта и выберите Добавить > новый элемент... . В Добавление нового элемента диалоговом окне выберите Visual C# элементы > Xamarin.Forms > страница содержимого, назовите новый файл NotesPageи нажмите кнопку добавить кнопки.In Solution Explorer, right-click on the Notes project and select Add > New Item... In the Add New Item dialog, select Visual C# Items > Xamarin.Forms > Content Page, name the new file NotesPage, and click the Add button.

    Это добавит страницы с именем NotesPage в корневую папку проекта.This will add a page named NotesPage to the root folder of the project. Эта страница будет на корневую страницу приложения.This page will be the root page of the application.

  11. В NotesPage.xaml, удалите весь код шаблона и замените его следующим кодом:In NotesPage.xaml, remove all of the template code and replace it with the following code:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.NotesPage"
                 Title="Notes">
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
        <ListView x:Name="listView"
                  Margin="20"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    Этот код декларативно определяет пользовательский интерфейс для страницы, которая состоит из ListView и ToolbarItem .This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. ListView Использует данные привязки для отображения любые заметки, которые извлекаются приложением, а затем выбрав примечание, произойдет переход к NoteEntryPage где можно изменить заметку.The ListView uses data binding to display any notes that are retrieved by the application, and selecting a note will navigate to the NoteEntryPage where the note can be modified. Кроме того, можно создать новую заметку, нажав клавишу ToolbarItem.Alternatively, a new note can be created by pressing the ToolbarItem. Дополнительные сведения о привязке данных см. в разделе привязки данных в подробный обзор быстрого запуска Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NotesPage.xaml , нажав клавишу CTRL + Sи закройте файл.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  12. В NotesPage.xaml.cs, удалите весь код шаблона и замените его следующим кодом:In NotesPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }
    

    Этот код определяет функциональные возможности для NotesPage.This code defines the functionality for the NotesPage. Когда откроется страница, OnAppearing выполняется метод, который заполняет ListView с любые заметки, которые были извлечены из папки данных локального приложения.When the page appears, the OnAppearing method is executed, which populates the ListView with any notes that have been retrieved from the local application data folder. Когда ToolbarItem нажата OnNoteAddedClicked выполняется обработчик событий.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Этот метод переходит к NoteEntryPage, задание BindingContext из NoteEntryPage в новый Note экземпляра.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. При создании записи в ListView выбран OnListViewItemSelected выполняется обработчик событий.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Этот метод переходит к NoteEntryPage, задание BindingContext из NoteEntryPage к выбранному Note экземпляра.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Дополнительные сведения о навигации, см. в разделе навигации в подробный обзор быстрого запуска Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NotesPage.xaml.cs , нажав клавишу CTRL + Sи закройте файл.Save the changes to NotesPage.xaml.cs by pressing CTRL+S, and close the file.

    Предупреждение

    Попытка выполнить сборку приложения на этом этапе приведет к ошибкам, будут устранены в последующих шагах.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. В обозревателе решений, дважды щелкните App.xaml.cs чтобы открыть его.In Solution Explorer, double-click App.xaml.cs to open it. Затем замените существующий код следующим кодом:Then replace the existing code with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new NavigationPage(new NotesPage());
            }
            // ...
        }
    }
    

    Этот код добавляет объявление пространства имен для System.IO пространства имен и добавляет объявление статического FolderPath свойство типа string.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. FolderPath Свойство используется для сохранения пути на устройстве, где будут храниться данные Примечание.The FolderPath property is used to store the path on the device where note data will be stored. Кроме того, этот код инициализирует FolderPath свойство в App конструктор и инициализирует MainPage свойства NavigationPage , на котором размещена экземпляр NotesPage.In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to be a NavigationPage that hosts an instance of NotesPage. Дополнительные сведения о навигации, см. в разделе навигации в подробный обзор быстрого запуска Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в файле App.xaml.cs, нажав клавиши CTRL+S, и закройте файл.Save the changes to App.xaml.cs by pressing CTRL+S, and close the file.

  14. В обозревателе решенийв заметки щелкните правой кнопкой мыши проект MainPage.xamlи выберите удалить.In Solution Explorer, in the Notes project, right-click MainPage.xaml, and select Delete. В диалоговом окне, появившемся press ОК кнопку, чтобы удалить файл с жесткого диска.In the dialog that appears press the OK button to remove the file from your hard disk.

    При этом удаляются страницу, которая больше не используется.This removes a page that's no longer used.

  15. Постройте и запустите проект на каждой платформе.Build and run the project on each platform. Дополнительные сведения см. в разделе создания быстрого запуска.For more information, see Building the quickstart.

    На NotesPage клавишу + кнопки для перехода к NoteEntryPage и введите заметку.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. После сохранении заметки приложение, произойдет переход обратно к NotesPage.After saving the note the application will navigate back to the NotesPage.

    Введите число заметки различного размера, чтобы наблюдать за поведением приложения.Enter a number of notes, of varying length, to observe the application behavior.

Обновление приложения с помощью Visual Studio для MacUpdate the app with Visual Studio for Mac

  1. Запуск Visual Studio для MacLaunch Visual Studio for Mac. В окне «Пуск» щелкните откройтеи в диалоговом окне выберите файл решения для проекта примечания:In the start window click Open, and in the dialog select the solution file for the Notes project:

  2. В панели решениявыберите заметки проекта, щелкните правой кнопкой мыши и выберите Добавить > Новая папка:In the Solution Pad, select the Notes project, right-click, and select Add > New Folder:

  3. В панели решения, имя новой папки моделей:In the Solution Pad, name the new folder Models:

  4. В панели решениявыберите моделей папку, щелкните правой кнопкой мыши и выберите Добавить > новый файл... :In the Solution Pad, select the Models folder, right-click, and select Add > New File...:

  5. В новый файл диалоговом окне выберите Общие > пустой класс, назовите новый файл Примечаниеи нажмите кнопку New кнопки:In the New File dialog, select General > Empty Class, name the new file Note, and click the New button:

    Это добавит класс с именем Примечание для моделей папке заметки проекта.This will add a class named Note to the Models folder of the Notes project.

  6. В Note.cs, удалите весь код шаблона и замените его следующим кодом:In Note.cs, remove all of the template code and replace it with the following code:

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

    Этот класс определяет Note модели, в которой будут храниться данные о каждом Примечание в приложении.This class defines a Note model that will store data about each note in the application.

    Сохраните изменения в Note.cs , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.Save the changes to Note.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  7. В панели решениявыберите заметки проекта, щелкните правой кнопкой мыши и выберите Добавить > новый файл... . В новый файл диалоговом окне выберите Forms > XAML ContentPage Forms, назовите новый файл NoteEntryPageи нажмите кнопку New кнопки:In the Solution Pad, select the Notes project, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file NoteEntryPage, and click the New button:

    Это добавит новую страницу с именем NoteEntryPage в корневую папку проекта.This will add a new page named NoteEntryPage to the root folder of the project. Эта страница будет второй страницы в приложении.This page will be the second page in the application.

  8. В NoteEntryPage.xaml, удалите весь код шаблона и замените его следующим кодом:In NoteEntryPage.xaml, remove all of the template code and replace it with the following code:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.NoteEntryPage"
                 Title="Note Entry">
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Этот код декларативно определяет пользовательский интерфейс для страницы, которая состоит из Editor для ввода текста, а также два Button экземпляров, которые направляют сохранения или удаления приложения файл.This code declaratively defines the user interface for the page, which consists of an Editor for text input, and two Button instances that direct the application to save or delete a file. Два Button экземпляров располагаются по горизонтали в Grid , с помощью Editor и Grid по вертикали изложенные в StackLayout .The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Кроме того Editor использует привязку данных для привязки к Text свойство Note модели.In addition, the Editor uses data binding to bind to the Text property of the Note model. Дополнительные сведения о привязке данных см. в разделе привязки данных в подробный обзор быстрого запуска Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NoteEntryPage.xaml , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  9. В NoteEntryPage.xaml.cs, удалите весь код шаблона и замените его следующим кодом:In NoteEntryPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NoteEntryPage : ContentPage
        {
            public NoteEntryPage()
            {
                InitializeComponent();
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                await Navigation.PopAsync();
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                await Navigation.PopAsync();
            }
        }
    }
    

    Этот код сохраняет Note экземпляр, который представляет отдельного комментария в BindingContext страницы.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Когда Сохранить Button нажата OnSaveButtonClicked выполняется обработчик событий, который либо сохраняет содержимое Editor в новый файл с случайное имя файла, или в существующий файл, если Примечание обновляется.When the Save Button is pressed the OnSaveButtonClicked event handler is executed, which either saves the content of the Editor to a new file with a randomly generated filename, or to an existing file if a note is being updated. В обоих случаях файл хранится в папке данных локального приложения для приложения.In both cases, the file is stored in the local application data folder for the application. Затем метод выполняет переход к предыдущей странице.Then the method navigates back to the previous page. Когда удалить Button нажата OnDeleteButtonClicked выполняется обработчик событий, который удаляет файл, в условии, что он существует и переходит обратно к предыдущей странице.When the Delete Button is pressed the OnDeleteButtonClicked event handler is executed, which deletes the file, provided that it exists, and navigates back to the previous page. Дополнительные сведения о навигации, см. в разделе навигации в подробный обзор быстрого запуска Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NoteEntryPage.xaml.cs , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.Save the changes to NoteEntryPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Предупреждение

    Попытка выполнить сборку приложения на этом этапе приведет к ошибкам, будут устранены в последующих шагах.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. В панели решениявыберите заметки проекта, щелкните правой кнопкой мыши и выберите Добавить > новый файл... . В новый файл диалоговом окне выберите Forms > XAML ContentPage Forms, назовите новый файл NotesPageи нажмите кнопку New кнопки.In the Solution Pad, select the Notes project, right-click, and select Add > New File.... In the New File dialog, select Forms > Forms ContentPage XAML, name the new file NotesPage, and click the New button.

    Это добавит страницы с именем NotesPage в корневую папку проекта.This will add a page named NotesPage to the root folder of the project. Эта страница будет на корневую страницу приложения.This page will be the root page of the application.

  11. В NotesPage.xaml, удалите весь код шаблона и замените его следующим кодом:In NotesPage.xaml, remove all of the template code and replace it with the following code:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.NotesPage"
                 Title="Notes">
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="+"
                         Clicked="OnNoteAddedClicked" />
        </ContentPage.ToolbarItems>
        <ListView x:Name="listView"
                  Margin="20"
                  ItemSelected="OnListViewItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Text}"
                              Detail="{Binding Date}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage>
    

    Этот код декларативно определяет пользовательский интерфейс для страницы, которая состоит из ListView и ToolbarItem .This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. ListView Использует данные привязки для отображения любые заметки, которые извлекаются приложением, а затем выбрав примечание, произойдет переход к NoteEntryPage где можно изменить заметку.The ListView uses data binding to display any notes that are retrieved by the application, and selecting a note will navigate to the NoteEntryPage where the note can be modified. Кроме того, можно создать новую заметку, нажав клавишу ToolbarItem.Alternatively, a new note can be created by pressing the ToolbarItem. Дополнительные сведения о привязке данных см. в разделе привязки данных в подробный обзор быстрого запуска Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NotesPage.xaml , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  12. В NotesPage.xaml.cs, удалите весь код шаблона и замените его следующим кодом:In NotesPage.xaml.cs, remove all of the template code and replace it with the following code:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Xamarin.Forms;
    using Notes.Models;
    
    namespace Notes
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                listView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnNoteAddedClicked(object sender, EventArgs e)
            {
                await Navigation.PushAsync(new NoteEntryPage
                {
                    BindingContext = new Note()
                });
            }
    
            async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
            {
                if (e.SelectedItem != null)
                {
                    await Navigation.PushAsync(new NoteEntryPage
                    {
                        BindingContext = e.SelectedItem as Note
                    });
                }
            }
        }
    }
    

    Этот код определяет функциональные возможности для NotesPage.This code defines the functionality for the NotesPage. Когда откроется страница, OnAppearing выполняется метод, который заполняет ListView с любые заметки, которые были извлечены из папки данных локального приложения.When the page appears, the OnAppearing method is executed, which populates the ListView with any notes that have been retrieved from the local application data folder. Когда ToolbarItem нажата OnNoteAddedClicked выполняется обработчик событий.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Этот метод переходит к NoteEntryPage, задание BindingContext из NoteEntryPage в новый Note экземпляра.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. При создании записи в ListView выбран OnListViewItemSelected выполняется обработчик событий.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Этот метод переходит к NoteEntryPage, задание BindingContext из NoteEntryPage к выбранному Note экземпляра.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Дополнительные сведения о навигации, см. в разделе навигации в подробный обзор быстрого запуска Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в NotesPage.xaml.cs , выбрав файл > Сохранить (или нажав ⌘ + S) и закройте файл.Save the changes to NotesPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Предупреждение

    Попытка выполнить сборку приложения на этом этапе приведет к ошибкам, будут устранены в последующих шагах.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. В панели решения, дважды щелкните App.xaml.cs чтобы открыть его.In the Solution Pad, double-click App.xaml.cs to open it. Затем замените существующий код следующим кодом:Then replace the existing code with the following code:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new NavigationPage(new NotesPage());
            }
            // ...
        }
    }
    

    Этот код добавляет объявление пространства имен для System.IO пространства имен и добавляет объявление статического FolderPath свойство типа string.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. FolderPath Свойство используется для сохранения пути на устройстве, где будут храниться данные Примечание.The FolderPath property is used to store the path on the device where note data will be stored. Кроме того, этот код инициализирует FolderPath свойство в App конструктор и инициализирует MainPage свойства NavigationPage , на котором размещена экземпляр NotesPage.In addition, the code initializes the FolderPath property in the App constructor, and initializes the MainPage property to be a NavigationPage that hosts an instance of NotesPage. Дополнительные сведения о навигации, см. в разделе навигации в подробный обзор быстрого запуска Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Сохраните изменения в файле App.xaml.cs, выбрав Файл > Сохранить или нажав клавиши ⌘+S, и закройте файл.Save the changes to App.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  14. В панели решенияв заметки щелкните правой кнопкой мыши проект MainPage.xamlи выберите удалить.In the Solution Pad, in the Notes project, right-click MainPage.xaml, and select Remove. В диалоговом окне, появившемся press удалить кнопку, чтобы удалить файл с жесткого диска.In the dialog that appears press the Delete button to remove the file from your hard disk.

    При этом удаляются страницу, которая больше не используется.This removes a page that's no longer used.

  15. Постройте и запустите проект на каждой платформе.Build and run the project on each platform. Дополнительные сведения см. в разделе создания быстрого запуска.For more information, see Building the quickstart.

    На NotesPage клавишу + кнопки для перехода к NoteEntryPage и введите заметку.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. После сохранении заметки приложение, произойдет переход обратно к NotesPage.After saving the note the application will navigate back to the NotesPage.

    Введите число заметки различного размера, чтобы наблюдать за поведением приложения.Enter a number of notes, of varying length, to observe the application behavior.

Следующие шагиNext steps

В этом кратком руководстве вы узнали, как:In this quickstart, you learned how to:

  • Добавление дополнительных страниц в решение Xamarin.Forms.Add additional pages to a Xamarin.Forms solution.
  • Выполните переход между страницами.Perform navigation between pages.
  • Используйте привязку данных для синхронизации данных между элементами пользовательского интерфейса и источник данных.Use data binding to synchronize data between user interface elements and their data source.

Чтобы изменить приложение таким образом, чтобы он хранит данные в локальную базу данных для SQLite.NET, перейдите к следующему руководству.To modify the application so that it stores its data in a local SQLite.NET database, continue to the next quickstart.