Formas de Navegacion en Windows Phone (es-ES) - TechNet Articles - United States (English)

http://xgeeker.blogspot.com/2012/10/formas-de-navegacion-en-windows-phone.html

Navegación:

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Navigation.

La navegación en Windows Phone se puede definir como: permitir a los usuarios desplazarse por las diferentes páginas de contenido. El modelo de navegación en el Windows Phone le permite crear aplicaciones basadas en vistas que coinciden con la apariencia de Windows Phone. Este artículo te mostrará cómo navegar entre las diferentes páginas de tu aplicación.

Este artículo contiene las siguientes secciones:

Marcos y páginas
Navegación entre páginas
Pasar datos entre páginas
Barra de Aplicación
Botón Atrás

Marcos y páginas

La experiencia de navegación en Windows Phone es similar a la experiencia de navegación en Silverlight, pero se ha ampliado para dar cabida a las características específicas del teléfono. El modelo de navegación de Windows Phone se basa en un control PhoneApplicationFrame. PhoneApplicationFrame contiene uno o más controles PhoneApplicationPage donde los usuarios pueden navegar entre ellos. PhoneApplicationFrame es el control de navegación principal y admite la navegación hacia y desde las páginas. PhoneApplicationPage encapsula el contenido que se puede navegar por PhoneApplicationFrame.

Una página es una colección de estado persistente. Puede ser vista como una página Silverlight que contiene contenido o enlaces a otras páginas. Una aplicación también puede contener pop-ups, cuadros de mensajes, pantallas de conexión, o una pantalla de bienvenida que normalmente no contiene un estado persistente.

Solamente moverte entre dos páginas se puede considerar navegación en Windows Phone. Pasar de una pantalla de inicio de sesión o una pantalla de bienvenida a la página principal, no se considera como una navegación y se puede denominar como transición.

Navegación entre páginas

La forma más fácil de realizar navegación de página es usando un control HyperlinkButton. Puedes utilizar su propiedad de navegación NavigationUri para navegar a una página. El siguiente ejemplo muestra cómo navegar a una página con nombre SecondPage.xaml.

XAML

<HyperlinkButton /> NavigateUri="SecondPage.xaml"

Si no deseas utilizar una HyperlinkButton, puedes realizar la navegación mediante la clase NavigationService. Esta clase contiene varias propiedades, métodos y eventos que te ayudan a la navegación. Puedes utilizar el método NavigationService.Navigate para navegar a una página específica. Para navegar de una página a otra página, realiza los pasos siguientes.

1. Crea una aplicación de Windows Phone en Visual Studio.

2. Añade un elemento de tipo Windows Phone Portrait Page llamada SecondPage.xaml en la que puedas navegar desde MainPage.

3. Utiliza el método NavigationService.Navigate para navegar a SecondPage.xaml.

4. Utiliza el método NavigationService.GoBack para volver a MainPage.xaml.

En el siguiente ejemplo se crean dos páginas llamadas página de inicio y segunda página. Puedes navegar desde la página de inicio a la segunda página haciendo clic en el botón Go to the second pageque se encuentra en la página de inicio. Esto se logra mediante el método NavigationService.Navigate con el URI de la segunda página (que es / SecondPage.xaml) en el manejador del evento Click del botón. Puedes regresar a la segunda página haciendo clic en " Go Back to Main Page " en la segunda página. Esto se consigue llamando al método NavigationService.GoBack, en el manejador del evento Click del botón. El método NavigationService.GoBack se desplaza a la entrada más reciente en el historial de navegación hacia atrás, en este caso la página de bienvenida. Antes de llamar al método NavigationService.GoBack, se debe comprobar el valor de la propiedad NavigationService.CanGoBack para determinar si existe una entrada en el historial de navegación hacia atrás.

Consejo

Aunque el método NavigationService.GoBack fue utilizado en este ejemplo para volver a la página principal, haciendo clic en el botón Atrás del teléfono también te lleva a la página anterior.

XAML para MainPage.xaml

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<!– TitlePanel contiene el nombre de la aplicación y el título de la página

<StackPanel x:Name="TitlePanel" Grid.Row="0"

Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="Navigation"

Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="home page"

Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!–ContentPanel – colocar el contenido adicional aquí –>

<Button x:Name="MyButton" Height="100" Width="350"

Click="MyButton_Click" Content="Go to Second Page"/>

</Grid>

C # para MainPage.xaml.cs

private void MyButton_Click(object sender, RoutedEventArgs e)

{

NavigationService.Navigate(new Uri("/SecondPage.xaml",

UriKind.RelativeOrAbsolute));

}

XAML para SecondPage.xaml

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<!– TitlePanel contiene el nombre y el título de la página –>

<StackPanel x:Name="TitlePanel" Grid.Row="0"

Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="Navigation"

Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="second page"

Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!– ContentPanel – colocar el contenido adicional aquí

<Button x:Name="BtnBack" Content="Go Back to Home Page"

Click="BtnBack_Click" Height="100" Width="350"/>

</Grid>

</ Grid>

C # para SecondPage.xaml.cs

private void BtnBack_Click (object sender, RoutedEventArgs e)

{

if (NavigationService.CanGoBack)

NavigationService.GoBack ();

}

La siguiente imagen muestra la página principal y la segunda página del ejemplo anterior. La navegación es obtenida por los métodos NavigationService.Navigate y NavigationService.GoBack.

Pasar datos entre páginas

A menudo, querrás pasar datos de una página a otra durante la navegación entre páginas. Por ejemplo, es posible que desees pasar un texto escrito por el usuario en la página de inicio y luego mostrarla en la segunda página. Puedes llamar al método NavigationService.Navigate para navegar a la segunda página y pasar los datos de cadena de la página de inicio a la segunda en el URI, como una cadena de consulta. A continuación, puedes reemplazar el método Page.OnNavigatedTo en el SecondPage.xaml.cs, para examinar la solicitud de navegación de la página de inicio y extraer los datos de cadena. El siguiente ejemplo muestra cómo puedes pasar datos de una página a otra mediante el uso de los métodos NavigationService.Navigate y Page.OnNavigatedTo.

XAML para MainPage.xaml

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<!– TitlePanel contiene el nombre de la aplicación y el título de la página–>

<StackPanel x:Name="TitlePanel" Grid.Row="0"

Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="Navigation"

Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="home page"

Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!– ContentPanel – colocar el contenido adicional aquí–>

<StackPanel x:Name="ContentPanel" Grid.Row="1"

Margin="12,0,12,0">

<TextBox x:Name="MyTB" Height="80"

Width="350" />

<Button x:Name="MyButton" Content="Go to Second Page"

Height="80" Width="350" Click="MyButton_Click"/>

</StackPanel>

</Grid>

C # para MainPage.xaml.cs

private void MyButton_Click(object sender, RoutedEventArgs e)

{

NavigationService.Navigate(new Uri("/SecondPage.xaml?msg=" +

MyTB.Text, UriKind.RelativeOrAbsolute));

}

XAML para SecondPage.xaml

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<!– TitlePanel contiene el nombre de la aplicación y el título de la página –>

<StackPanel x:Name="TitlePanel" Grid.Row="0"

Margin="12,17,0,28">

<TextBlock x:Name="ApplicationTitle" Text="Navigation"

Style="{StaticResource PhoneTextNormalStyle}"/>

<TextBlock x:Name="PageTitle" Text="second page"

Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

</StackPanel>

<!– ContentPanel – colocar el contenido adicional aquí –>

</Grid>

C # para SecondPage.xaml.cs

protected override void OnNavigatedTo

(System.Windows.Navigation.NavigationEventArgs e)

{

base.OnNavigatedTo(e);

string msg = "";

if (NavigationContext.QueryString.TryGetValue("msg", out msg))

MyTBl.Text = msg;

}

La siguiente ilustración muestra la página principal y la segunda página del ejemplo anterior. La cadena de texto se pasa a la segunda página y se muestra en un bloque de texto.

Consejo

Para las páginas que muestran varias secciones de contenido, puedes mostrar distintos contenidos sin necesidad de utilizar la navegación, con sólo volver a enlazar los controles de la página a un nuevo DataContext.

Barra de Aplicación

La Barra de Aplicación es un conjunto de uno a cuatro botones que se pueden mostrar en la parte inferior de la pantalla del teléfono en la orientación vertical y al lado en orientación horizontal. Este es el sistema de menú que se utiliza en Windows Phone 7, y los botones de la Barra de Aplicación son usados para proporcionar a los usuarios acceso rápido a las tareas más comunes de una aplicación.

En la siguiente ilustración se muestra una Barra de Aplicación en Windows Phone 7, en su estado expandido.

Los botones con iconos en la Barra de Aplicación se llaman, botones de icono. Puede tener un máximo de cuatro botones de icono. Si intentas agregar más de cuatro, se producirá una excepción al iniciar la aplicación. Los puntos suspensivos en la esquina superior derecha de la barra de la aplicación se utilizan para expandir y contraer la Barra de Aplicación. El texto de los botones del icono aparece sólo si la Barra de aplicación se encuentra en su estado expandido. Puede utilizar el evento Click para entrar en acción cuando el usuario hace clic en los botones del icono.

Además de la fila de botones, la Barra de Aplicación también puede constar de uno o más elementos de menú de texto. Estos elementos se muestran en una lista que se desliza debajo de los botones del icono, cuando el usuario hace clic en los puntos suspensivos a la derecha, o en el espacio vacío a la izquierda de los botones de icono. En la siguiente imagen about y settings son los elementos del menú. Esta lista de elementos de menú no es jerárquica, por lo que no es un submenú de los botones de iconos. En su lugar, los elementos de menú se utilizan para las acciones de aplicación, que son usados con menos frecuencia y para las acciones que son difíciles de transmitir, por lo tanto requieren de una representación textual.

En la siguiente ilustración se muestran Barras de Aplicación en sus estados contraído y expandido, con y sin elementos en el menú.

Puedes agregar una Barra de Aplicación en tu Windows Phone utilizando la clase ApplicationBar. Puedes agregar una Barra de Aplicación, ya sea en XAML o en C#. Si optas por crear la Barra de Aplicación totalmente en XAML, la plantilla de proyecto de Windows Phone que se incluye con las Herramientas de Desarrollo para Windows Phone incluye una implementación de una Barra de Aplicación en el archivo MainPage.xaml. Todo lo que necesitas hacer es descomentar la definición de Barra de Aplicación y modificar el código para utilizar las imágenes de iconos y el texto del menú.

En el siguiente ejemplo el valor predeterminado de las plantillas de aplicación de barras han sido modificados para crear tres botones de icono new (nuevos), folders (carpetas), y sync (sincronización) y dos elementos de menú settings (configuración) y add email account (agregar cuenta de correo electrónico).

XAML

<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton x:Name="newButton"

IconUri="/Images/appbar.new.rest.png" Text="new"

Click="newButton_Click"/>

<shell:ApplicationBarIconButton x:Name="folderButton"

IconUri="/Images/appbar.folder.rest.png" Text="folders"

Click="folderButton_Click"/>

<shell:ApplicationBarIconButton x:Name="syncButton"

IconUri="/Images/appbar.refresh.rest.png" Text="sync"

Click="syncButton_Click"/>

<shell:ApplicationBar.MenuItems>

<shell:ApplicationBarMenuItem Text="settings"/>

<shell:ApplicationBarMenuItem Text="add email account"/>

</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

En la siguiente ilustración se muestra el resultado del ejemplo anterior.

Ten en cuenta que el ejemplo anterior utiliza imágenes para los botones del icono. Para las pautas de diseño sobre la creación de iconos para las Barra de Aplicación y la ubicación de los iconos pre-construidos que se pueden utilizar en la aplicación, visualiza Mejores Prácticas para la Barra de Aplicación en Windows Phone.

La Barra de Aplicación no es un control de Silverlight y no soporta el enlace de datos. Esto significa que la cadena de valores que se utilizan para las etiquetas del botón debe ser codificada en código XAML y no pueden ser localizadas. Si vas a localizar tu aplicación, o si te sientes más cómodo con C# puedes crear la Barra de Aplicación en código para modificar mediante programación los valores de etiquetas en tiempo de ejecución.

El siguiente ejemplo muestra cómo se puede crear la Barra de Aplicación en código. En primer lugar, crea la Barra de Aplicación utilizando la clase ApplicationBar. A continuación, puedes crear botones mediante la clase ApplicationBarIconButton y agregar los botones de icono a la Barra de Aplicación utilizando el método ApplicationBar.Buttons.Add. Puedes crear elementos de menú utilizando ApplicationBarMenuItem y añadir los elementos de menú a la Barra de Aplicación utilizando el método ApplicationBar.MenuItems.Add.

public MainPage()

{

InitializeComponent();

//Cree el ApplicationBar

ApplicationBar = new ApplicationBar();

ApplicationBar.IsVisible = true;

ApplicationBar.IsMenuEnabled = true;

// Cree los botones de icono y establecer sus propiedades

ApplicationBarIconButton newButton = new ApplicationBarIconButton(new Uri

("/Images/appbar.add.rest.png", UriKind.Relative));

newButton.Text = "new";

newButton.Click += new EventHandler(newButton_Click);

ApplicationBarIconButton folderButton = new ApplicationBarIconButton(new Uri

("/Images/appbar.folder.rest.png", UriKind.Relative));

folderButton.Text = "folders";

folderButton.Click += new EventHandler(folderButton_Click);

ApplicationBarIconButton syncButton = new ApplicationBarIconButton(new Uri

("/Images/appbar.sync.rest.png", UriKind.Relative));

syncButton.Text = "sync";

syncButton.Click += new EventHandler(syncButton_Click);

// Añade los botones de icono a la Barra de Aplicación

ApplicationBar.Buttons.Add(newButton);

ApplicationBar.Buttons.Add(folderButton);

ApplicationBar.Buttons.Add(syncButton);

// Crear elementos de menú

ApplicationBarMenuItem settingsMenuItem = new ApplicationBarMenuItem

("settings");

settingsMenuItem.Click += new EventHandler(settingsMenuItem_Click);

ApplicationBarMenuItem addaccountMenuItem = new ApplicationBarMenuItem

("add email account");

addaccountMenuItem.Click += new EventHandler(addaccountMenuItem_Click);

// Añade los elementos del menú a la Barra de Aplicación

ApplicationBar.MenuItems.Add(settingsMenuItem);

ApplicationBar.MenuItems.Add(addaccountMenuItem);

}

La Barra de aplicación se puede definir a nivel local o global. A nivel local la Barra de Aplicación puede ser usada solamente por la página que lo define. Este enfoque es útil si las diferentes páginas de la aplicación tienen diferentes tareas. Por ejemplo, si estás creando una aplicación de correo electrónico, la página de bandeja de entrada puede tener tareas como crear nuevo correo electrónico y sincronización, y la página de redacción puede tener tareas tales como enviar oborrar. Por lo tanto, puede tener sentido separar la Barra de Aplicación para las páginas de bandeja de entrada y de redacción, y crear una Barra de Aplicación en la página bandeja de entrada y una en la página de redacción.

Una Barra de Aplicación global puede ser compartida en todas las páginas de la aplicación. Una Barra de Aplicación global se crea como un recurso de aplicación en el archivo App.xaml. Para crear una Barra de Aplicación global, debes realizar los siguientes pasos:

· Añade la definición XAML de la Barra de Aplicación para la sección de <Application.Resources> en el archivo App.xaml.

· Agrega el siguiente atributo en el nodo <phone:PhoneApplicationPage> de todas las páginas donde se necesite la Barra de Aplicación:

ApplicationBar="{StaticResource GlobalAppMenuBar}"

Para obtener más información acerca de la Barra de Aplicación, vea Barra de Aplicación para Windows Phone.

Botón Atrás

Todos los dispositivos Windows Phone incluyen un botón Back (atrás) en su hardware. Este botón te permite navegar de vuelta a las páginas anteriores en una aplicación y a través de diferentes aplicaciones. Por ejemplo, puedes hacer clic en un enlace desde tu aplicación de correo electrónico para abrir el navegador web, y sólo tienes que pulsar el botón Back para volver a tu correo electrónico. Esto produce una experiencia de usuario mucho más consistente a través de diferentes aplicaciones, ya sean aplicaciones de terceros o sean parte de las aplicaciones integradas en Windows Phone. Windows Phone conserva un historial de las acciones de tu navegación para soportar la funcionalidad del botón Atrás. Esto también se conoce como back-stack.

En la siguiente ilustración se muestra el botón Atrás, el botón Inicio y el botón Buscar.

Puedes reemplazar el botón Back para personalizarlo. Sin embargo, al hacer esto, debes estar seguro de lo que los usuarios consideren “Atrás”. Por ejemplo, si muestras un pop-up en su aplicación, puede que cree el comportamiento para irse hacia Atrás y salir de la aplicación, pero quizás los usuarios lo interpreten como cerrar el pop-up.

Se puede reemplazar el comportamiento predeterminado del botón Back reemplazando el método PhoneApplicationPage.OnBackKeyPress.

El siguiente ejemplo contiene un cuadro de texto. Si escribes un texto y pulsas el botón Atrás de tu computador, un cuadro mensaje aparecerá indicando el siguiente mensaje: "Usted está a punto de descartar los cambios. Desea Continuar?". Este comportamiento se lleva a cabo reemplazando el método PhoneApplicationPage.OnBackKeyPress.

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)

{

base.OnBackKeyPress(e);

if(MyTB.Text != string.Empty)

{

var result = MessageBox.Show("Usted está a punto de descartar los cambios.Desea Continuar?",

"Warning", MessageBoxButton.OKCancel);

if (result != MessageBoxResult.OK)

{

e.Cancel = true;

}

La siguiente ilustración muestra el resultado del ejemplo anterior. Si el usuario presiona el botón Atrás y tiene texto en el cuadro de texto, un mensaje es desplegado.

Ten en cuenta las siguientes mejores prácticas al reemplazar el comportamiento del botón Atrás:

Considera lo que "Atrás" significa para el usuario en ese momento en la aplicación.
Si el usuario pulsa en el botón Atrás una segunda vez, debes dejar pasar el comportamiento predeterminado.
Trata de evitar el uso excesivo del botón Atrás para navegación local.
Para implementar una interfaz de usuario transitoria, como una pantalla de acceso, utiliza el control Popup de Silverlight para desplegar el contenido que parcialmente cubra la pantalla en lugar de implementar una página independiente que requiera de navegación completa. Puedes agregar el método PhoneApplicationPage.OnBackKeyPress en tu código y establecere.Cancel a true (como se muestra en el ejemplo anterior) mientras que el pop-up es visible para permitir a los usuarios que puedan utilizar el botón Atrás para cerrar el pop-up.