Navegar entre páginas

Esta parte del tutorial agrega la parte final a la aplicación, la navegación entre la página de todas las notas y la página de notas individuales.

Antes de escribir cualquier código para controlar la navegación desde la aplicación, vamos a describir el comportamiento de navegación esperado.

En AllNotesPage, hay la colección de notas existentes y un botón Nueva nota .

• Al hacer clic en una nota existente, debe ir a la página de notas y cargar la nota en la que se hizo clic.
• Al hacer clic en el botón Nueva nota , debe ir a la página de notas y cargar una nota vacía y no guardada.

En la página de la nota, añadirá un botón Atrás y hay botones Guardar y Eliminar.

• Al hacer clic en el botón Atrás, se debe volver a la página de todas las notas y descartar los cambios realizados en la nota.
• Al hacer clic en el botón Eliminar , debe eliminar la nota y, a continuación, volver a navegar.

Nueva nota

En primer lugar, gestionarás la navegación de una nueva nota.

1. En AllNotesPage.xaml, busque el AppBarButton para una nota nueva.

2. Agregue un Click controlador de eventos y cámbielo por NewNoteButton_Click. (Consulte Agregar manejadores de eventos en el paso de la página de notas si necesita un recordatorio de cómo hacer esto).

   <AppBarButton Icon="Add" Label="New note"
                 Click="NewNoteButton_Click"/>
   

3. En el NewNoteButton_Click método (en AllNotesPage.xaml.cs), agregue este código:

   private void NewNoteButton_Click(object sender, RoutedEventArgs e)
   {
       // ↓ Add this. ↓
       Frame.Navigate(typeof(NotePage));
   }
   

Cada página tiene una propiedad Marco que proporciona una referencia a la instancia Marco a la que Page pertenece (si existe). Es el Frame que se llama al método Navigate aquí. El Navigate método toma el tipo de la página a la que desea navegar. Puede obtener eso Type en C# usando el operador typeof.

Si ejecuta la aplicación ahora, puede hacer clic en el botón Nueva nota para ir a la página de notas y puede escribir en el editor de notas. Sin embargo, si intenta guardar la nota, no ocurrirá nada. Esto se debe a que todavía no se ha creado una instancia del Note modelo en la página de notas. Lo harás ahora.

1. Abra NotePage.xaml.cs.

2. Agregue código para invalidar el método OnNavigatedTo de la página.

   public NotePage()
   {
       this.InitializeComponent();
   }
   //  ↓ Add this. ↓
   protected override void OnNavigatedTo(NavigationEventArgs e)
   {
       base.OnNavigatedTo(e);
   
       noteModel = new Note();
   }
   

Ahora, al navegar a NotePage, se crea una nueva instancia del Note modelo.

Notas existentes

Ahora vas a agregar navegación a las notas existentes. Actualmente, cuando haces clic en la nota de ItemsView, la nota se selecciona, pero no sucede nada. El comportamiento predeterminado para la mayoría de los controles de recopilación es una sola selección, lo que significa que se selecciona un elemento a la vez. Actualizarás el ItemsView para que, en lugar de seleccionarlo, puedas hacer clic en un elemento como un botón.

1. Abra AllNotesPage.xaml.

2. Actualice el XAML para ItemsView con SelectionMode = None y IsItemInvokedEnabled = True.

3. Agregue un controlador para el evento ItemInvoked .

   <ItemsView ItemsSource="{x:Bind notesModel.Notes}"
              Grid.Row="1" Margin="24" 
              ItemTemplate="{StaticResource NoteItemTemplate}"
              <!-- ↓ Add this. ↓ -->
              SelectionMode="None"
              IsItemInvokedEnabled="True"
              ItemInvoked="ItemsView_ItemInvoked">
   

4. En AllNotesPage.xaml.cs, busque el ItemsView_ItemInvoked método . (Si Visual Studio no lo creó automáticamente, lo que podría ocurrir si copia y pega el código, agréguelo en el paso siguiente).

5. En el ItemsView_ItemInvoked método , agregue código para ir a NotePage. Esta vez, usará una sobrecarga del método Navigate que le permite pasar un objeto a la otra página. Pase el invocado Note como segundo parámetro de navegación.

   private void ItemsView_ItemInvoked(ItemsView sender, ItemsViewItemInvokedEventArgs args)
   {
       Frame.Navigate(typeof(NotePage), args.InvokedItem);
   }
   

6. Abra NotePage.xaml.cs.

7. Actualice la sobrescritura del método OnNavigatedTo para manejar el Note que se pasa por la llamada a Navigate.

   protected override void OnNavigatedTo(NavigationEventArgs e)
   {
       base.OnNavigatedTo(e);
   
       //  ↓ Update this. ↓
       if (e.Parameter is Note note)
       {
           noteModel = note;
       }
       else
       {
           noteModel = new Note();
       }
      // ↑ Update this. ↑
   }
   

   En este código, primero comprobará si el parámetro pasado es un Note objeto . Si es así, se le asigna como modelo Note para la página. Si es null o no es un Note, cree un nuevo Note como antes.

Navegación hacia atrás

Por último, debe actualizar la aplicación para que pueda volver desde una nota individual a la página de todas las notas.

El control TitleBar de WinUI 3 incluye un botón Atrás que cumple todas las directrices de Fluent Design para la ubicación y apariencia. Usará este botón integrado para la navegación hacia atrás.

1. Abra MainWindow.xaml.

2. Actualice el XAML para TitleBar con IsBackButtonVisible = True, e IsBackButtonEnabled enlazado a la propiedad Frame.CanGoBack.

3. Agregue un controlador para el evento BackRequested . El XAML debe tener este aspecto:

   <TitleBar x:Name="AppTitleBar"
             Title="WinUI Notes"
             IsBackButtonVisible="True"
             IsBackButtonEnabled="{x:Bind rootFrame.CanGoBack, Mode=OneWay}"
             BackRequested="AppTitleBar_BackRequested">
   

   Aquí, la propiedad IsBackButtonVisible se establece en true. Esto hace que el botón Atrás aparezca en la esquina superior izquierda de la ventana de la aplicación.

   A continuación, la propiedad IsBackButtonEnabled está enlazada a la propiedad Frame.CanGoBack , por lo que el botón Atrás solo se habilita si el marco puede navegar hacia atrás.

   Por último, se agrega el controlador de eventos BackRequested . Aquí es donde pones el código para volver.

4. En MainWindow.xaml.cs, agregue este código al AppTitleBar_BackRequested método :

   private void AppTitleBar_BackRequested(TitleBar sender, object args)
   {
       // ↓ Add this. ↓
       if (rootFrame.CanGoBack == true)
       {
           rootFrame.GoBack();
       }
       // ↑ Add this. ↑
   }
   

   La Frame clase realiza un seguimiento de la navegación en su BackStack, por lo que puede volver a las páginas anteriores simplemente llamando al método GoBack . Es un procedimiento recomendado comprobar siempre la propiedad CanGoBack antes de llamar a GoBack.

A continuación, debe actualizar el código en NotePage para navegar de regreso después de eliminar la nota.

1. Abra NotePage.xaml.cs.

2. Actualice el DeleteButton_Click método del controlador de eventos con una llamada al Frame.CanGoBack método después de eliminar la nota:

   private async void DeleteButton_Click(object sender, RoutedEventArgs e)
   {
       if (noteModel is not null)
       {
           await noteModel.DeleteAsync();
       }
       // ↓ Add this. ↓
       if (Frame.CanGoBack == true)
       {
           Frame.GoBack();
       }
       // ↑ Add this. ↑
   }
   

Ahora, puedes ejecutar la aplicación. Intenta agregar nuevas notas, navegar hacia atrás y hacia delante entre notas, y eliminar notas.

Obtenga más información en los documentos:

• Implementación de la navegación entre dos páginas
• Historial de navegación y navegación hacia atrás
• Frame Class, Page Class

Pasos siguientes

¡Felicidades! Ha completado el tutorial Creación de una aplicación WinUI .

Los vínculos siguientes proporcionan más información sobre cómo crear aplicaciones con WinUI y el Windows App SDK:

• Ejemplos y recursos
• Diseño para aplicaciones de Windows
• Desarrollar aplicaciones de escritorio para Windows
• Controles para aplicaciones de Windows