Compartir a través de

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, agregará 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, controlará la navegación de una nueva nota.

Sugerencia

Puede descargar o ver el código de este tutorial desde el repositorio de GitHub. Para ver el código tal como está en este paso, consulte esta confirmación: navegación: nueva nota.

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

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

    <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 Frame que proporciona una referencia a la instancia de Frame a la Page que 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 obtenerlo Type en C# mediante el typeof operador .

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 agregará navegación para las notas existentes. Actualmente, al hacer clic en la nota de ItemsView, se selecciona la nota, 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á para ItemsView que, en lugar de seleccionarlo, puede hacer clic en un elemento como un botón.

Sugerencia

Puede descargar o ver el código de este tutorial desde el repositorio de GitHub. Para ver el código tal como está en este paso, consulte esta confirmación: navegación: aplicación final.

  1. Abra AllNotesPage.xaml.

  2. Actualice el XAML para ItemsView con SelectionMode = None e 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 objeto 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 invalidación del OnNavigatedTo método para controlar el Note que pasa 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 , Notecree 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 incluye un botón Atrás que cumple todas las directrices de Fluent Design para la colocación y la 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 coloca 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 volver 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. ↑
}

Sugerencia

Es posible que haya observado que en NotePage, llame a Frame.GoBack, mientras que en MainWindow llamó a rootFrame.GoBack. Esto se debe a que la clase Page tiene una propiedad Frame que obtiene el Frame objeto que hospeda Page, si existe. En este caso, obtiene una referencia a rootFrame.

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:

Pasos siguientes

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

Los vínculos siguientes proporcionan más información sobre la creación de aplicaciones con WinUI y windows App SDK:

  • Last updated on