Idioma: HTML | XAML

Inicio rápido: ir de una página a otra (XAML)

Este tema explica los conceptos básicos de navegación y muestra cómo crear una aplicación que navega entre dos páginas.

Para ayudarte a elegir el mejor patrón de navegación para tu aplicación, consulta Patrones de navegación.

Consulta los patrones de navegación plana y navegación jerárquica como parte de nuestra serie Características de aplicaciones, de principio a fin.

Guía básica: relación de este tema con los demás. Consulta:

Puedes crear varias páginas para tu aplicación y permitir que el usuario navegue entre páginas dentro de la aplicación de manera similar a como se navega entre las páginas de un sitio web único. Microsoft Visual Studio tiene plantillas de página que ofrecen compatibilidad de navegación básica para aplicaciones de Windows en tiempo de ejecución con C# o Microsoft Visual Basic. En este tema, vamos a usar las plantillas de página para crear una aplicación sencilla que admita la navegación.

Nota  

Cuando hablamos de la navegación para aplicaciones de Windows en tiempo de ejecución, nos referimos a la navegación entre páginas de una misma aplicación, no a la navegación entre aplicaciones.

Requisitos previos

En este tema, se supone que puedes crear una aplicación de Windows en tiempo de ejecución básica con C# o Visual Basic. Si quieres obtener instrucciones para crear tu primera aplicación de Windows en tiempo de ejecución, consulta el tema sobre cómo crear tu primera aplicación de Windows en tiempo de ejecución con C# o Visual Basic.

Creación de una aplicación con navegación

Hh771188.wedge(es-es,WIN.10).gifCrear una aplicación vacía

  1. En el menú de Visual Studio, elige Archivo > Nuevo proyecto.
  2. En el panel izquierdo del cuadro de diálogo Nuevo proyecto, elige el nodo Visual C#, Visual Basic o Visual C++.
  3. En el panel central, elige Aplicación vacía.
  4. En el cuadro Nombre, escribe BlankApp y, a continuación, elige el botón Aceptar.

    Ya se ha creado tu solución y los archivos de proyecto aparecen en el Explorador de soluciones. Para obtener más información sobre los archivos del proyecto, consulta Plantillas de proyecto de C#, VB y C++ para aplicaciones de Windows en tiempo de ejecución.

    Importante  Cuando ejecutas Visual Studio por primera vez, te pide que obtengas una licencia de este tipo. Para obtener más información, consulta el tema sobre cómo obtener una licencia de desarrollador.
  5. Para ejecutar el programa, en el menú de Visual Studio, elige Depurar > Iniciar depuración o presiona F5.

    Aparece una página vacía.

  6. Presiona MAYÚS + F5 para detener la depuración y regresar a Visual Studio.

A continuación, agrega dos páginas al proyecto. Estas serán las páginas por donde navegaremos. Realiza los siguientes pasos dos veces para agregar dos páginas.

Hh771188.wedge(es-es,WIN.10).gifAgregar la página básica

  1. En Explorador de soluciones, abre el menú contextual para el nodo de proyecto BlankApp y, a continuación, elige Agregar > Nuevo elemento.
  2. En el cuadro de diálogo Agregar nuevo elemento, elige Página vacía en el panel del medio.
  3. En el cuadro Nombre, escribe page1 (o page2) y, a continuación, elige el botón Agregar.

Una vez que hayas realizado los pasos previos dos veces, deberían haberse agregado los siguiente archivos al proyecto.

  • BasicPage1.xaml
  • BasicPage1.xaml.cs o BasicPage1.xaml.vb
  • BasicPage2.xaml
  • BasicPage2.xaml.cs o BasicPage2.xaml.vb

Ahora necesitamos usar las páginas que agregamos en la aplicación. Realiza los siguientes cambios en BasicPage1.xaml.

  • Busca el elemento TextBlock denominado pageTitle y cambia la propiedad Text a Page 1. El código XAML debería tener este aspecto ("..." representa otros atributos que no vas a cambiar):

    
    
    <TextBlock x:Name="pageTitle" Text="Page 1" .../>
    
    
  • Agrega el siguiente código XAML como un segundo elemento secundario a la raíz Grid. El elemento StackPanel debe ser hermano de Grid que contiene el botón Atrás y el título de la página.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
    </StackPanel>
    
    

Realiza los siguientes cambios en BasicPage2.xaml.

  • Busca el elemento TextBlock denominado pageTitle y cambia la propiedad Text a Page 2. XAML debería tener el siguiente formato:

    
    
    <TextBlock x:Name="pageTitle" Grid.Column="1" Text="Page 2" 
               Style="{StaticResource PageHeaderTextStyle}"/>
    
    
  • Agrega el siguiente código XAML como un segundo elemento secundario a la raíz Grid. El elemento StackPanel debe ser hermano de Grid que contiene el botón Atrás y el título de la página.

    
    <StackPanel Grid.Row="1"
                Margin="120,0,120,60">
        <TextBlock HorizontalAlignment="Left" Name="tb1" Text="Hello World!"/>
    </StackPanel>
    
    

Agrega el siguiente código a la clase BasicPage1 en BasicPage1.xaml.cs o BasicPage1.xaml.vb.


private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(BasicPage2));
}

Ahora que hemos preparado las páginas nuevas, necesitamos que BasicPage1 sea lo primero que aparezca cuando se inicia la aplicación. Abre app.xaml.cs/vb y cambia el método OnLaunched para llamar a Frame.Navigate con BasicPage1 en lugar de BlankPage. La línea de código relevante se ve de esta manera:



    if(!rootFrame.Navigate(typeof(BasicPage1), e.Arguments))
    { ... }

Nota  Este código usa el valor devuelto de Navigate para generar una excepción de aplicación si la navegación al marco de ventana inicial de la aplicación es errónea. Cuando Navigate devuelve true, se produce la navegación.

Ahora estás listo para probar la aplicación. Inicia la aplicación y haz clic en el vínculo que dice Haga clic para ir a la página 2. Debería aparecer la segunda página y decir "Página 2" en la parte superior. En una aplicación de la Tienda Windows, observa que hay un botón Atrás a la izquierda del título de la página. Haz clic en el botón para volver a la primera página. En una aplicación de la Tienda de Windows Phone, haz clic en el botón Atrás para volver a la primera página.

Clases Frame y Page

Antes de agregar más funciones a la aplicación, veamos de qué manera las páginas que incluimos ofrecen compatibilidad de navegación para la aplicación.

El archivo App.xaml.cs/vb/cpp crea un Frame, si aún no existe uno, y hace que el Frame muestre el contenido de la ventana actual. Si el contenido del marco es nulo, la aplicación navega hacia la página de inicio tal como se especifica en el código subyacente de App.xaml. Por ejemplo, en la Aplicación de cuadrícula, el código es rootFrame.Navigate(typeof(GroupedItemsPage), "AllGroups") ).

La clase Frame es principalmente responsable de la navegación e implementa métodos, como Navigate, GoBack y GoForward. Usas el método Navigate para mostrar contenido en Frame. En el ejemplo anterior, el método App.OnLaunched crea una clase Frame y pasa BasicPage1 al método Navigate. Después el método establece el contenido de la ventana actual de la aplicación en Frame. El resultado es que la ventana de la aplicación tiene una clase Frame que contiene BasicPage1

BasicPage1 es una subclase de la clase Page. La clase Page tiene una propiedad Frame, una propiedad de solo lectura que obtiene el Frame que contiene Page. Cuando el controlador de eventos Click de HyperlinkButton llama a Frame.Navigate(typeof(BasicPage2)), Frame en la ventana de la aplicación muestra el contenido de BasicPage2.

Administrador de suspensión

Importante  

La clase auxiliar SuspensionManager se incluye en las siguientes plantillas de proyecto:

Aplicaciones de WindowsAplicación Hub, Aplicación de cuadrícula, Aplicación dividida
Aplicaciones de Windows PhoneAplicación Hub, Aplicación dinámica
Aplicaciones universalesAplicación Hub

 

La clase auxiliar SuspensionManager no se incluye con las plantillas Aplicación vacía:

Durante la instalación, SuspensionManager registra el Frame. SuspensionManager es una clase auxiliar que se incluye en la carpeta Common en la plantilla y proporciona la implementación usada para almacenar y cargar el estado cuando la aplicación finaliza

Todas las aplicaciones se mueven a través de un ciclo de vida de las aplicaciones tal como dicta el sistema operativo. Siempre que el sistema finaliza una aplicación por motivos como restricciones de recursos, apagado, reinicio, etc., como desarrollador debes restaurar los datos al reanudar la aplicación. SuspensionManager se incluye para ayudarte con esta tarea.

SuspensionManager captura el estado de sesión global para simplificar la administración del ciclo de vida de los procesos para una aplicación. El estado de la sesión se borra de forma automática bajo una serie de circunstancias por lo que solo se debería usar para almacenar información que sería conveniente transmitir entre sesiones pero que se debería descartar cuando una aplicación se bloquea o actualiza. Esto básicamente incluye los datos transitorios de la UI.

SuspensionManager tiene dos propiedades: SessionState y KnownTypes.

  • SessionState proporciona acceso al estado de sesión global para la sesión actual. Este estado se serializa mediante el método SaveAsync y se restaura mediante el método RestoreAsync. Todos los datos se guardan y restauran mediante DataContractSerialization y deberían ser lo más compacto que sea posible. Se recomienda el uso de cadenas y otros tipos de datos independientes.
  • KnownTypes almacena una lista de tipos personalizados suministrados al DataContractSerializer que usan los métodos SaveAsync y RestoreAsync al leer y escribir el estado de sesión. Inicialmente vacíos, se pueden agregar tipos adicionales para personalizar el proceso de serialización.

SuspensionManager almacena el estado en un diccionario, SessionState. El diccionario almacena FrameState en una clave que está enlazada de forma exclusiva a un Frame. Cada diccionario FrameState contiene el estado de cada página en el estado de navegación para ese marco en particular. Cada página almacena el parámetro de navegación así como cualquier otro estado que el usuario decida agregar.

Funciona de la siguiente manera: cuando se crea un Frame, si deseas que se almacene el estado para ese marco, debería registrarse inmediatamente. Se registran con la siguiente llamada (SuspensionManager.RegisterFrame(rootFrame, "AppFrame")). Cada marco debería tener una clave única asociada con él. Generalmente, la mayoría de las aplicaciones tendrán solo un marco. Si declaras un segundo marco, también será necesario registrarlo. Cuando se registra un marco, las dos propiedades adjuntas se establecen en el marco. Primero está la clave que has asociado con el marco y segundo está el diccionario del estado de la sesión que estará asociado con el marco. Los marcos que se han registrado anteriormente tendrán inmediatamente su estado y navegación restaurados. También es posible eliminar el registro de los marcos; en tal caso, se descartará todo el historial y el estado de navegación.

Y ahora las llamadas importantes: SaveAsync y RestoreAsync. SaveAsync se usa para guardar todo SessionState. Todos los marcos que se han registrado a través de SuspensionManager.RegisterFrame también conservarán su pila de navegación actual, que a su vez ofrece a su página activa la posibilidad de guardar sus datos. A continuación, SessionState se serializa mediante un DataContractSerializer y se escribe en un archivo almacenado en la carpeta local tal como define ApplicationData.

RestoreAsync se usa para leer en el SessionState guardado anteriormente. Todos los marcos que se han registrado con RegisterFrame también restaurarán su estado de navegación anterior, que ofrecerá a su página activa la posibilidad de restaurar su estado. Al igual que en SaveAsync, se usa un DataContractSerializer para deserializar el estado almacenado en un archivo en la carpeta local de la aplicación.

Hay dos errores comunes que mucha gente comete al intentar almacenar el estado de su aplicación.

  • Los tipos almacenados por páginas individuales deben poder serializarse mediante el DataContractSerializer en C# y VB. Para hacer esto, todos los tipos personalizados deben estar registrados antes de que se pueda almacenar o restaurara. SuspensionManager proporciona la colección KnownTypes que pasa los tipos en la colección al DataContractSerializer. Como se llama al SuspensionManager para restaurar el estado en la anulación de OnLaunched del código subyacente para App.xaml, un buen lugar para registrar tipos en el constructor de aplicaciones.
    
            public App()
            {
                this.InitializeComponent();
                this.Suspending += OnSuspending;
                SuspensionManager.KnownTypes.Add(typeof(MyCustomType));
            }
    
    
    
  • Los parámetros pasados mediante navegación deben poder serializarse mediante la plataforma. Cuando guardamos y restauramos la pila de navegación, llamamos a Frame.GetNavigationState() y a Frame.SetNavigationState(). Estas dos llamadas hacen uso de un formato de serialización interna y todos los tipos pasados como el parámetro en Frame.Navigate() deben poder serializarse mediante la plataforma.
El uso de SuspensionManager está ajustado en la implementación de NavigationHelper.

NavigationHelper es una implementación de una página que proporciona las siguientes e importantes comodidades:

  • Controladores de eventos para Navigate, GoBack y GoForward.
  • Accesos directos de mouse y teclado para la navegación.
  • Administración del estado para la administración del ciclo de vida de los procesos y de la navegación.

Además de proporcionar las implementaciones descritas, NavigationHelper también debe llamarse desde los controladores de eventos OnNavigatedTo() y OnNavigatedFrom() que están implementados en cada página. Cuando se producen estos eventos, NavigationHelper llama a una implementación específica de la página de LoadState() y SaveState(). Puedes personalizar la implementación de estas funciones en cada página. Se deberían usar en lugar de OnNavigatedTo() y OnNavigatedFrom() respectivamente.

Nota  En las aplicaciones de la Tienda de Windows Phone, se llama a OnNavigatedFrom() cuando la aplicación se suspende. No se llama a OnNavigatedTo() cuando la aplicación se reanuda.

Se llama a OnNavigatedFrom() cuando la página está a punto de mostrarse en un Frame. Cuando estamos navegando a una nueva página, cargamos el estado asociado con la página. Si la página se está restaurando, se restaura el estado que se guardó anteriormente para la página. A continuación, se llama a LoadState para que cada página pueda reaccionar. LoadState tiene dos parámetros; el parámetro de navegación original que se pasó a OnNavigateTo y el estado anterior de la página, si existe.

Se llama a OnNavigatedFrom() cuando ya no se va a volver a mostrar la página en un Frame. Cuando abandonamos una página, permitimos que la página guarde su estado actual. Un diccionario vacío se pasa a SaveState(). Cada página puede invalidar SaveState y almacenar objetos en el diccionario con clave (cadena a objeto). A continuación, este diccionario se asocia con la página y se agrega a SessionState del que SuspensionManager hace un seguimiento para el marco dado.

Nota  
  • Todos los datos almacenados en la página individual deben estar disponibles para su serialización por parte del DataContractSerializer.
  • También es importante almacenar aquí solamente la información de UI transitoria, porque este estado se perderá si la aplicación se cierra por algún medio distinto de Terminated.

Compatibilidad de navegación en plantillas de página

Cuando creamos las páginas de navegación, usamos la plantilla Página básica. Esta plantilla, y otras plantillas compatibles con la navegación, crea una página que tiene un botón Atrás en el extremo superior izquierdo. El botón tiene un estilo que lo hace visible solo cuando está habilitado. Es por eso que no puedes ver el botón Atrás en la primera página, pero sí en la segunda.

Las siguientes plantillas de página ofrecen la misma compatibilidad de navegación.

  • Página básica
  • Página de detalles de grupo
  • Página de elementos agrupados
  • Página de detalles de elemento
  • Página de elementos
  • Página dividida
  • Página de concentrador
  • Página de resultados de búsqueda

Paso de información entre páginas

Nuestra aplicación navega entre dos páginas, pero aún no hace nada interesante. A menudo, cuando una aplicación tiene varias páginas, las páginas necesitan compartir información. Pasemos parte de la información de la primera página a la segunda.

En BasicPage1.xaml, reemplaza el elemento StackPanel que agregaste antes por el siguiente código XAML.


<StackPanel Grid.Row="1"
    Margin="120,0,120,60">
    <TextBlock Text="Enter your name"/>
    <TextBox Width="200" HorizontalAlignment="Left" Name="tb1"/>
    <HyperlinkButton Content="Click to go to page 2" Click="HyperlinkButton_Click"/>
</StackPanel>


En BasicPage1.xaml.cs o BasicPage1.xaml.vb, reemplaza el controlador de eventos HyperlinkButton_Click por el siguiente código.


private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    this.Frame.Navigate(typeof(BasicPage2), tb1.Text);
}


En BasicPage2.xaml.cs o BasicPage2.xaml.vb, rellena el método navigationHelper_LoadState vacío con esto:


private void navigationHelper_LoadState(object sender, LoadStateEventArgs e)
{
    string name = e.NavigationParameter as string;

    if (!string.IsNullOrWhiteSpace(name))
    {
        tb1.Text = "Hello, " + name;
    }
    else
    {
        tb1.Text = "Name is required.  Go back and enter a name.";
    }
}

Ejecuta la aplicación, escribe tu nombre en el cuadro de texto y, a continuación, haz clic en el vínculo que dice Haz clic para ir a la página 2. Cuando llamaste a this.Frame.Navigate(typeof(BasicPage2), tb1.Text); en el evento Click de HyperlinkButton, la propiedad tb1.Text se pasa cuando BasicPage2 se carga. A continuación, el método navigationHelper_LoadState de BlankPage2 obtiene el valor de los datos de eventos y lo usa para mostrar el mensaje.

Almacenamiento en caché de una página

Cuando ejecutaste el último ejemplo, seguramente habrás notado que, al hacer clic en el botón Atrás en BasicPage2, el TextBox en BasicPage1 está vacío cuando aparece. Supongamos que el usuario de la aplicación quiere retroceder y hacer un cambio en la página anterior. Si BasicPage1 tenía varios campos para rellenar, al usuario no le agradará encontrar los campos vacíos cuando la aplicación retroceda a esa página. Puedes especificar que una página se almacene en caché mediante la propiedad NavigationCacheMode. En el constructor de BasicPage1, establece NavigationCacheMode en Enabled.


public BasicPage1()
{
    this.InitializeComponent();
    ...
    this.NavigationCacheMode = 
        Windows.UI.Xaml.Navigation.NavigationCacheMode.Enabled;
}


Ahora, cuando ejecutas la aplicación y navegas hacia atrás desde BasicPage2 hasta BasicPage1, el TextBox en BasicPage1 retiene su valor.

Resumen

En este tema aprendiste a crear una aplicación simple que navega entre páginas. Aprendiste cómo pasar información de una página a otra y también cómo especificar que el estado de una página se almacene en caché.

Pasos siguientes

Para ver una muestra completa que usa varias de las características de Page y Frame en forma conjunta, consulta Muestra de navegación XAML. Esta muestra incluye características que no se describen en este tema, entre ellas:

Temas relacionados

Navegar entre páginas
Para diseñadores
Patrones de navegación
Diseños de comandos
Diseño
Botón Atrás
Directrices para el control del concentrador
Directrices para las barras de la aplicación (aplicaciones de Windows en tiempo de ejecución)
Hacer que la barra de la aplicación sea accesible
Para desarrolladores (XAML)
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Tu primera aplicación: Parte 3: Navegación, diseño y vistas
Tu primera aplicación: Agregar navegación y vistas a una aplicación de la Tienda Windows con C++ (tutorial 3 de 4)
Muestra del control de concentrador XAML
Muestra de control AppBar XAML
Muestra de navegación XAML
Agregar barras de la aplicación (XAML)

 

 

Mostrar:
© 2015 Microsoft