Navegación en una aplicación Xamarin.Forms de varias páginasPerform Navigation in a Multi-Page Xamarin.Forms Application

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

En este inicio rápido aprenderá a:In this quickstart, you will learn how to:

  • Agregar páginas adicionales a una solución de Xamarin.Forms.Add additional pages to a Xamarin.Forms solution.
  • Realizar la navegación entre las páginas.Perform navigation between pages.
  • Usar el enlace de datos para sincronizar datos entre los elementos de la interfaz de usuario y su origen de datos.Use data binding to synchronize data between user interface elements and their data source.

En este inicio rápido se describe cómo convertir una aplicación Xamarin.Forms multiplataforma de página única, capaz de almacenar una sola nota, en una aplicación de varias páginas, capaz de almacenar varias notas.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. A continuación se muestra la aplicación final:The final application is shown below:

Requisitos previosPrerequisites

Antes de intentar este inicio rápido, debe completar correctamente el inicio rápido anterior.You should successfully complete the previous quickstart before attempting this quickstart. También puede descargar el ejemplo del inicio rápido anterior y usarlo como punto de partida para este.Alternatively, download the previous quickstart sample and use it as the starting point for this quickstart.

Actualizar la aplicación con Visual StudioUpdate the app with Visual Studio

  1. Inicie Visual Studio.Launch Visual Studio. En la ventana de inicio, haga clic en la solución Notes en la lista de proyectos o soluciones recientes, o bien haga clic en Abrir un proyecto o una solución y, en el cuadro de diálogo Abrir proyecto o solución, seleccione el archivo de solución del proyecto Notes: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. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto Notes y seleccione Agregar > Nueva carpeta:In Solution Explorer, right-click on the Notes project and select Add > New Folder:

  3. En el Explorador de soluciones, asigne el nombre Modelos a la nueva carpeta:In Solution Explorer, name the new folder Models:

  4. En el Explorador de soluciones, seleccione la carpeta Modelos, haga clic con el botón derecho y seleccione Agregar > Nuevo elemento... :In Solution Explorer, select the Models folder, right-click, and select Add > New Item...:

  5. En el cuadro de diálogo Agregar nuevo elemento, seleccione Elementos de Visual C# > Clase, asigne el nombre Note al nuevo archivo y haga clic en el botón Agregar:In the Add New Item dialog, select Visual C# Items > Class, name the new file Note, and click the Add button:

    Esto agregará una clase denominada Note a la carpeta Modelos del proyecto Notes.This will add a class named Note to the Models folder of the Notes project.

  6. En Note.cs, quite todo el código de plantilla y sustitúyalo por el siguiente: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; }
        }
    }
    

    Esta clase define un modelo Note que almacenará los datos sobre cada nota en la aplicación.This class defines a Note model that will store data about each note in the application.

    Presione CTRL+S para guardar los cambios en Note.cs y cierre el archivo.Save the changes to Note.cs by pressing CTRL+S, and close the file.

  7. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto Notes y seleccione Agregar > Nuevo elemento... . En el cuadro de diálogo Agregar nuevo elemento, seleccione Elementos de Visual C# > Xamarin.Forms > Página de contenido, asigne el nombre NoteEntryPage al nuevo archivo y haga clic en el botón Agregar: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:

    Esto agregará una página nueva denominada NoteEntryPage a la carpeta raíz del proyecto.This will add a new page named NoteEntryPage to the root folder of the project. Esta página será la segunda de la aplicación.This page will be the second page in the application.

  8. En NoteEntryPage.xaml, quite todo el código de plantilla y reemplácelo por el siguiente: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>
    

    Este código define mediante declaración la interfaz de usuario para la página, que consta de una instancia de Editor para la entrada de texto y dos instancias de Button que dirigen la aplicación para guardar o eliminar un archivo.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. Las dos instancias de Button se disponen horizontalmente en Grid, mientras que Editor y Grid se disponen en vertical en StackLayout.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Además, Editor usa el enlace de datos para enlazar con la propiedad Text del modelo Note.In addition, the Editor uses data binding to bind to the Text property of the Note model. Para más información sobre el enlace de datos, vea Enlace de datos en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Presione CTRL+S para guardar los cambios en NoteEntryPage.xaml y cierre el archivo.Save the changes to NoteEntryPage.xaml by pressing CTRL+S, and close the file.

  9. En NoteEntryPage.xaml.cs, quite todo el código de plantilla y reemplácelo por el siguiente: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();
            }
        }
    }
    

    Este código almacena una instancia de Note, que representa una única nota, en el elemento BindingContext de la página.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Cuando se presiona el objeto Button Guardar se ejecuta el controlador de eventos OnSaveButtonClicked, que guarda el contenido de Editor en un archivo nuevo con un nombre de archivo generado de forma aleatoria, o bien en un archivo existente si se va a actualizar una nota.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. En ambos casos, el archivo se almacena en la carpeta de datos de la aplicación local.In both cases, the file is stored in the local application data folder for the application. Después, el método regresa a la página anterior.Then the method navigates back to the previous page. Al pulsar el objeto Button Eliminar, se ejecuta el controlador de eventos OnDeleteButtonClicked, que elimina el archivo, siempre que exista, y regresa a la página anterior.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. Para más información sobre la navegación, vea Navegación en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Presione CTRL+S para guardar los cambios en NoteEntryPage.xaml.cs y cierre el archivo.Save the changes to NoteEntryPage.xaml.cs by pressing CTRL+S, and close the file.

    Advertencia

    Si en este momento intenta compilar la aplicación, se producirán errores que se corregirán en pasos posteriores.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto Notes y seleccione Agregar > Nuevo elemento... . En el cuadro de diálogo Agregar nuevo elemento, seleccione Elementos de Visual C# > Xamarin.Forms > Página de contenido, asigne el nombre NotesPage al nuevo archivo y haga clic en el botón Agregar.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.

    Esto agregará una página nueva denominada NotesPage a la carpeta raíz del proyecto.This will add a page named NotesPage to the root folder of the project. Esta página será la página raíz de la aplicación.This page will be the root page of the application.

  11. En NotesPage.xaml, quite todo el código de plantilla y sustitúyalo por el siguiente: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>
    

    Este código define mediante declaración la interfaz de usuario de la página, que consiste en los objetos ListView y ToolbarItem.This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. En ListView se usa el enlace de datos para mostrar las notas recuperadas por la aplicación y, al seleccionar una nota, se navegará a NoteEntryPage donde la nota se puede modificar.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. Como alternativa, se puede presionar el objeto ToolbarItem para crear una nota.Alternatively, a new note can be created by pressing the ToolbarItem. Para más información sobre el enlace de datos, vea Enlace de datos en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Presione CTRL+S para guardar los cambios en NotesPage.xaml y cierre el archivo.Save the changes to NotesPage.xaml by pressing CTRL+S, and close the file.

  12. En NotesPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el siguiente: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
                    });
                }
            }
        }
    }
    

    Este código define la funcionalidad de NotesPage.This code defines the functionality for the NotesPage. Cuando aparece la página, se ejecuta el método OnAppearing, que rellena el objeto ListView con las notas que se han recuperado de la carpeta de datos de la aplicación local.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. Cuando se presiona ToolbarItem, se ejecuta el controlador de eventos OnNoteAddedClicked.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Este método navega hasta NoteEntryPage, y establece el elemento BindingContext de NoteEntryPage en una instancia nueva de Note.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. Cuando se selecciona un elemento de ListView, se ejecuta el controlador de eventos OnListViewItemSelected.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Este método navega hasta NoteEntryPage, y establece el elemento BindingContext de NoteEntryPage en la instancia de Note seleccionada.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Para más información sobre la navegación, vea Navegación en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Presione CTRL+S para guardar los cambios en NotesPage.xaml.cs y cierre el archivo.Save the changes to NotesPage.xaml.cs by pressing CTRL+S, and close the file.

    Advertencia

    Si en este momento intenta compilar la aplicación, se producirán errores que se corregirán en pasos posteriores.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. En el Explorador de soluciones, haga doble clic en App.xaml.cs para abrirlo.In Solution Explorer, double-click App.xaml.cs to open it. Después, reemplace el código existente con el siguiente: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());
            }
            // ...
        }
    }
    

    Este código agrega una declaración de espacio de nombres para el espacio de nombres System.IO y una declaración para una propiedad FolderPath estática de tipo string.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. La propiedad FolderPath se usa para almacenar la ruta de acceso en el dispositivo en el que se almacenarán los datos de la nota.The FolderPath property is used to store the path on the device where note data will be stored. Además, el código inicializa la propiedad FolderPath en el constructor App e inicializa la propiedad MainPage para que sea un elemento NavigationPage que hospede una instancia de 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. Para más información sobre la navegación, vea Navegación en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en App.xaml.cs presionando CTRL+S y cierre el archivo.Save the changes to App.xaml.cs by pressing CTRL+S, and close the file.

  14. En el Explorador de soluciones, en el proyecto Notes, haga clic con el botón derecho en MainPage.xaml y seleccione Eliminar.In Solution Explorer, in the Notes project, right-click MainPage.xaml, and select Delete. En el cuadro de diálogo que aparece, presione el botón Aceptar para quitar el archivo del disco duro.In the dialog that appears press the OK button to remove the file from your hard disk.

    Esto quita una página que ya no se usa.This removes a page that's no longer used.

  15. Compile y ejecute el proyecto en cada plataforma.Build and run the project on each platform. Para más información, vea Compilación del inicio rápido.For more information, see Building the quickstart.

    En NotesPage presione el botón + para ir hasta NoteEntryPage y escriba una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Después de guardar la nota, la aplicación volverá a NotesPage.After saving the note the application will navigate back to the NotesPage.

    Escriba un número de notas, de longitud variable, para observar el comportamiento de la aplicación.Enter a number of notes, of varying length, to observe the application behavior.

Actualizar la aplicación con Visual Studio para MacUpdate the app with Visual Studio for Mac

  1. Inicie Visual Studio para Mac.Launch Visual Studio for Mac. En la ventana de inicio, haga clic en Abrir y, en el cuadro de diálogo, seleccione el archivo de solución para el proyecto Notes:In the start window click Open, and in the dialog select the solution file for the Notes project:

  2. En el Panel de solución, seleccione el proyecto Notes, haga clic con el botón derecho y seleccione Agregar > Nueva carpeta:In the Solution Pad, select the Notes project, right-click, and select Add > New Folder:

  3. En el Panel de solución, asigne el nombre Modelos a la nueva carpeta:In the Solution Pad, name the new folder Models:

  4. En el Panel de solución, seleccione la carpeta Modelos, haga clic con el botón derecho y seleccione Agregar > Nuevo archivo... :In the Solution Pad, select the Models folder, right-click, and select Add > New File...:

  5. En el cuadro de diálogo Nuevo archivo, seleccione General > Clase vacía, asigne el nombre Note al nuevo archivo y haga clic en el botón Nuevo:In the New File dialog, select General > Empty Class, name the new file Note, and click the New button:

    Esto agregará una clase denominada Note a la carpeta Modelos del proyecto Notes.This will add a class named Note to the Models folder of the Notes project.

  6. En Note.cs, quite todo el código de plantilla y sustitúyalo por el siguiente: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; }
        }
    }
    

    Esta clase define un modelo Note que almacenará los datos sobre cada nota en la aplicación.This class defines a Note model that will store data about each note in the application.

    Para guardar los cambios en Note.cs, seleccione Archivo > Guardar (o bien presione ⌘ + S) y cierre el archivo.Save the changes to Note.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  7. En el Panel de solución, seleccione el proyecto Notes, haga clic con el botón derecho y seleccione Agregar > Nuevo archivo. En el cuadro de diálogo Nuevo archivo, seleccione Formularios > XAML ContentPage de Forms, asigne el nombre NoteEntryPage al nuevo archivo, y haga clic en el botón Nuevo: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:

    Esto agregará una página nueva denominada NoteEntryPage a la carpeta raíz del proyecto.This will add a new page named NoteEntryPage to the root folder of the project. Esta página será la segunda de la aplicación.This page will be the second page in the application.

  8. En NoteEntryPage.xaml, quite todo el código de plantilla y reemplácelo por el siguiente: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>
    

    Este código define mediante declaración la interfaz de usuario para la página, que consta de una instancia de Editor para la entrada de texto y dos instancias de Button que dirigen la aplicación para guardar o eliminar un archivo.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. Las dos instancias de Button se disponen horizontalmente en Grid, mientras que Editor y Grid se disponen en vertical en StackLayout.The two Button instances are horizontally laid out in a Grid, with the Editor and Grid being vertically laid out in a StackLayout. Además, Editor usa el enlace de datos para enlazar con la propiedad Text del modelo Note.In addition, the Editor uses data binding to bind to the Text property of the Note model. Para más información sobre el enlace de datos, vea Enlace de datos en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Para guardar los cambios en NoteEntryPage.xaml, seleccione Archivo > Guardar (o bien presione ⌘ + S) y cierre el archivo.Save the changes to NoteEntryPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  9. En NoteEntryPage.xaml.cs, quite todo el código de plantilla y reemplácelo por el siguiente: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();
            }
        }
    }
    

    Este código almacena una instancia de Note, que representa una única nota, en el elemento BindingContext de la página.This code stores a Note instance, which represents a single note, in the BindingContext of the page. Cuando se presiona el objeto Button Guardar se ejecuta el controlador de eventos OnSaveButtonClicked, que guarda el contenido de Editor en un archivo nuevo con un nombre de archivo generado de forma aleatoria, o bien en un archivo existente si se va a actualizar una nota.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. En ambos casos, el archivo se almacena en la carpeta de datos de la aplicación local.In both cases, the file is stored in the local application data folder for the application. Después, el método regresa a la página anterior.Then the method navigates back to the previous page. Al pulsar el objeto Button Eliminar, se ejecuta el controlador de eventos OnDeleteButtonClicked, que elimina el archivo, siempre que exista, y regresa a la página anterior.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. Para más información sobre la navegación, vea Navegación en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Para guardar los cambios en NoteEntryPage.xaml.cs, seleccione Archivo > Guardar (o bien presione ⌘ + S) y cierre el archivo.Save the changes to NoteEntryPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Advertencia

    Si en este momento intenta compilar la aplicación, se producirán errores que se corregirán en pasos posteriores.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  10. En el Panel de solución, seleccione el proyecto Notes, haga clic con el botón derecho y seleccione Agregar > Nuevo archivo. En el cuadro de diálogo Nuevo archivo, seleccione Formularios > XAML ContentPage de Forms, asigne el nombre NotesPage al nuevo archivo y haga clic en el botón Nuevo.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.

    Esto agregará una página nueva denominada NotesPage a la carpeta raíz del proyecto.This will add a page named NotesPage to the root folder of the project. Esta página será la página raíz de la aplicación.This page will be the root page of the application.

  11. En NotesPage.xaml, quite todo el código de plantilla y sustitúyalo por el siguiente: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>
    

    Este código define mediante declaración la interfaz de usuario de la página, que consiste en los objetos ListView y ToolbarItem.This code declaratively defines the user interface for the page, which consists of a ListView and a ToolbarItem. En ListView se usa el enlace de datos para mostrar las notas recuperadas por la aplicación y, al seleccionar una nota, se navegará a NoteEntryPage donde la nota se puede modificar.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. Como alternativa, se puede presionar el objeto ToolbarItem para crear una nota.Alternatively, a new note can be created by pressing the ToolbarItem. Para más información sobre el enlace de datos, vea Enlace de datos en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about data binding, see Data binding in the Xamarin.Forms Quickstart Deep Dive.

    Para guardar los cambios en NotesPage.xaml, seleccione Archivo > Guardar (o bien presione ⌘ + S) y cierre el archivo.Save the changes to NotesPage.xaml by choosing File > Save (or by pressing ⌘ + S), and close the file.

  12. En NotesPage.xaml.cs, quite todo el código de plantilla y sustitúyalo por el siguiente: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
                    });
                }
            }
        }
    }
    

    Este código define la funcionalidad de NotesPage.This code defines the functionality for the NotesPage. Cuando aparece la página, se ejecuta el método OnAppearing, que rellena el objeto ListView con las notas que se han recuperado de la carpeta de datos de la aplicación local.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. Cuando se presiona ToolbarItem, se ejecuta el controlador de eventos OnNoteAddedClicked.When the ToolbarItem is pressed the OnNoteAddedClicked event handler is executed. Este método navega hasta NoteEntryPage, y establece el elemento BindingContext de NoteEntryPage en una instancia nueva de Note.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to a new Note instance. Cuando se selecciona un elemento de ListView, se ejecuta el controlador de eventos OnListViewItemSelected.When an item in the ListView is selected the OnListViewItemSelected event handler is executed. Este método navega hasta NoteEntryPage, y establece el elemento BindingContext de NoteEntryPage en la instancia de Note seleccionada.This method navigates to the NoteEntryPage, setting the BindingContext of the NoteEntryPage to the selected Note instance. Para más información sobre la navegación, vea Navegación en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Para guardar los cambios en NotesPage.xaml.cs, seleccione Archivo > Guardar (o bien presione ⌘ + S) y cierre el archivo.Save the changes to NotesPage.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

    Advertencia

    Si en este momento intenta compilar la aplicación, se producirán errores que se corregirán en pasos posteriores.Attempting to build the application at this point will result in errors that will be fixed in subsequent steps.

  13. En el Panel de solución, haga doble clic en App.xaml.cs para abrirlo.In the Solution Pad, double-click App.xaml.cs to open it. Después, reemplace el código existente con el siguiente: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());
            }
            // ...
        }
    }
    

    Este código agrega una declaración de espacio de nombres para el espacio de nombres System.IO y una declaración para una propiedad FolderPath estática de tipo string.This code adds a namespace declaration for the System.IO namespace, and adds a declaration for a static FolderPath property of type string. La propiedad FolderPath se usa para almacenar la ruta de acceso en el dispositivo en el que se almacenarán los datos de la nota.The FolderPath property is used to store the path on the device where note data will be stored. Además, el código inicializa la propiedad FolderPath en el constructor App e inicializa la propiedad MainPage para que sea un elemento NavigationPage que hospede una instancia de 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. Para más información sobre la navegación, vea Navegación en Análisis detallado de inicio rápido de Xamarin.Forms.For more information about navigation, see Navigation in the Xamarin.Forms Quickstart Deep Dive.

    Guarde los cambios en App.xaml.cs eligiendo Archivo > Guardar (o presionando ⌘ + S) y cierre el archivo.Save the changes to App.xaml.cs by choosing File > Save (or by pressing ⌘ + S), and close the file.

  14. En el Panel de solución, en el proyecto Notes, haga clic con el botón derecho en MainPage.xaml y seleccione Quitar.In the Solution Pad, in the Notes project, right-click MainPage.xaml, and select Remove. En el cuadro de diálogo que aparece, presione el botón Eliminar para quitar el archivo del disco duro.In the dialog that appears press the Delete button to remove the file from your hard disk.

    Esto quita una página que ya no se usa.This removes a page that's no longer used.

  15. Compile y ejecute el proyecto en cada plataforma.Build and run the project on each platform. Para más información, vea Compilación del inicio rápido.For more information, see Building the quickstart.

    En NotesPage presione el botón + para ir hasta NoteEntryPage y escriba una nota.On the NotesPage press the + button to navigate to the NoteEntryPage and enter a note. Después de guardar la nota, la aplicación volverá a NotesPage.After saving the note the application will navigate back to the NotesPage.

    Escriba un número de notas, de longitud variable, para observar el comportamiento de la aplicación.Enter a number of notes, of varying length, to observe the application behavior.

Pasos siguientesNext steps

En este inicio rápido ha aprendido a:In this quickstart, you learned how to:

  • Agregar páginas adicionales a una solución de Xamarin.Forms.Add additional pages to a Xamarin.Forms solution.
  • Realizar la navegación entre las páginas.Perform navigation between pages.
  • Usar el enlace de datos para sincronizar datos entre los elementos de la interfaz de usuario y su origen de datos.Use data binding to synchronize data between user interface elements and their data source.

Para modificar la aplicación de modo que almacene sus datos en una base de datos de SQLite.NET local, continúe con el inicio rápido siguiente.To modify the application so that it stores its data in a local SQLite.NET database, continue to the next quickstart.