[Windows 10] Navegacin en Apps WindowsIntroduccinCasi cualquier aplicacin que realices tendr ms de una pgina. Por lo que es vitalsaber como navegar entre ellas.En este artculo, vamos a aprender como se realiza la navegacin entre pginas enApps Windows primero desde un punto de vista terica para terminar realizandoun ejemplo paso a paso cubriendo todos los aspectos relacionados con lanavegacin utilizando el patrn MVVM.

Te apuntas?Navegacin entre pginas

El Frame, se crea en el arranque de la aplicacin y es el encargado de contener y gestionar cada una de laspginas (Page). Contamos con un modelo de navegacin integrado que usa controles Frame y Page y funciona demanera similar a un navegador web. El control Frame hospeda controles Page y tiene un historial de navegacinque se puede utilizar para ir hacia atrs y hacia adelante por las pginas que ya visitaste. Tras obtener el Framecorrespondiente, utilizamos el mtodo Navigate para realizar la navegacin a otra pgina. Tenemos dossobrescrituras del mtodo Navigate:

Navigate(TypeName). Provoca que el Frame cargue el contenido especificado por el tipo pasado comoparmetro.

Navigate(TypeName, Object). En este caso, adems de indicar el tipo del contenido a cargar (primerparmetro), podemos pasar un parmetro a la pgina que se navega(segundo parmetro).

Navegar atrsUtilizamos primero la propiedad CanGoBack que nos devuelve un bool indicando si hay pginas en el historial denavegacin o no. Si existe historial de navegacin utilizamos el mtodo GoBack que navega al elemento msinmediato del historial de navegacin.NOTA: Tambin contamos con la propiedad CanGoForward. Indica si en el historial de navegacin existe unapgina delante de la actual.

Pgina1 de11

Pasar informacin entre pginasHemos visto la teora necesaria para navegar hacia delante y hacia atrs. Sin embargo, en ocasiones, necesitamospasar informacin entre las pginas. Ya hemos visto que el mtodo Navigate cuenta con una sobrescritura que nospermite pasar parmetros.Navigate(TypeName, Object). En este caso, adems de indicar el tipo del contenido a cargar (primer parmetro),podemos pasar un parmetro a la pgina que se navega(segundo parmetro).Al navegar hacia o desde una pgina se ejecutan los mtodos:

OnNavigatedTo. Se ejecuta al entrar en la pgina. OnNavigatedFrom. Se ejecuta al abandonar la pgina.

Para recuperar el objeto pasado como parmetro vamos a utilizar el mtodo OnNavigatedTo que se ejecutar alentrar en la segunda pgina. El argumento de tipo NavigationEventArgs cuenta con una propiedad Parameter.Manos a la obra!Para probar todas las posibilidades de navegacin crearemos un nuevo proyecto UAP:

Nuestro objetivo en el ejemplo sera crear mltiples pginas y navegar entre ellas.Realmente podemos mantener una implementacin MVVM muy similar a como hacamos hasta ahora en AppsUniversales para Windows y Windows Phone 8.1 salvando las diferencias a nivel de proyectos (tres VS uno).Comenzamos por la base. Contamos con dos ficheros clave en nuestro proyecto para implementar el patrnMVVM:

PageBase ViewModelBase

PageBaseComo revelamos con su nombre, ser una clase de la que heredaran todas las pginas de nuestra aplicacin. Y si,comentamos que sern todas las pginas de la aplicacin (ya sean del proyecto Windows o del proyecto WindowsPhone). Las pginas en ambas plataformas es exactamente igual, un objeto de tipo Page. Esta clase cuenta convarios objetivos:

Pgina2 de11

Establecer el Frame activo en todo momento para que el acceso al mismo sea sencillo. Permitir el acceso de los eventos de navegacin desde nuestras viewmodels.

Adems podra interesarnos adems:

Gestionar las transiciones entre pginas. Gestionar estados (Loading, etc.) Gestionar el estado segun la conexin de red.

Con la funcionalidad bsica (facilitarnos el acceso a Frame y eventos de navegacin) quedara:publ i c cl ass PageBase : Page{

pr i vat e Vi ewModel Base _vm;pr ot ect ed over r i de voi d OnNavi gat edTo( Navi gat i onEvent Ar gs e){

base. OnNavi gat edTo( e) ;_vm = ( Vi ewModel Base) t hi s. Dat aCont ext ;_vm. Set AppFr ame( t hi s . Fr ame) ;_vm. OnNavi gat edTo( e) ;

}pr ot ect ed over r i de voi d OnNavi gat edFr om( Navi gat i onEvent Ar gs e){

base. OnNavi gat edFr om( e) ;_vm. OnNavi gat edFr om( e) ;

}}Gestionamos los eventos bsicos de navegacin (al entrar y al salir de la pgina) de modo que, en el mtodoOnNavigateTo obtenemos la viewmodel de la pgina y asignamos el Frame.

ViewModelBaseContinuamos con la segunda de nuestras clases base. En esta ocasin trataremos la clase base de la queheredarn todos los viewmodels. Los objetivos bsicos de la clase son:

Notificar cambios (implementar INotifyPropertyChanged). Acceso al objeto Frame que nos permitir realizar la navegacin. Permitir el acceso a los eventos de navegacin.

publ i c abst r act c l ass Vi ewModel Base : I Not i f yPr oper t yChanged{

pr i vat e Fr ame appFr ame;pr i vat e bool i sBusy;publ i c Vi ewModel Base( ){}publ i c Fr ame AppFr ame{

get { r et ur n appFr ame; }}publ i c bool I sBusy{

get { r et ur n i sBusy; }set{

i sBusy = val ue;Rai sePr oper t yChanged( ) ;

}}

Pgina3 de11

publ i c event Pr oper t yChangedEvent Handl er Pr oper t yChanged;publ i c abst r act Task OnNavi gat edFr om( Navi gat i onEvent Ar gs ar gs) ;publ i c abst r act Task OnNavi gat edTo( Navi gat i onEvent Ar gs ar gs) ;publ i c voi d Rai sePr oper t yChanged( [ Cal l er Member Name] st r i ng pr oper t yName = " " ){

var Handl er = Pr oper t yChanged;i f ( Handl er ! = nul l )

Handl er ( t hi s, new Pr oper t yChangedEvent Ar gs( pr oper t yName) ) ;}i nt er nal voi d Set AppFr ame( Fr ame vi ewFr ame){

appFr ame = vi ewFr ame;}

}El acceso a los eventos de navegacin lo lograremos implementando en la viewmodel los mtodos abstractosOnNavigatedFrom y OnNavigatedTo. Esto no permite guardar y recuperar parmetros o estados.

Utilizando PageBaseEn la carpeta Views aadiremos nuestras pginas. En nuestro ejemplo, tendremos dos pginas:

FirstView SecondView

Cada pgina ser un objeto de tipo PageBase, tanto en XAML:

Como en el code-behind:publ i c seal ed par t i al c l ass Fi r s t Vi ew : PageBase{

publ i c Fi r st Vi ew( ){

t hi s . I ni t i al i zeComponent ( ) ;}

}Aadimos en la primera vista (FirstView) dos botones que permita navegar a la segunda vista sin pasar y pasndoparmetro:

Cont ent =" Pass par amet er "Command=" { Bi ndi ng Par amet er Command} "Mar gi n=" 0, 10" / >

El resultado visual:

Para permitir navegar a la segunda vista, necesitamos definir dos comandos (uno navegar sin pasar parmetro yotro pasndolo) en la viewmodel. Creamos una clase derivada de ViewModelBase:publ i c cl ass Fi r s t Vi ewModel : Vi ewModel Base{}Implementamos los mtodos de navegacin definidos en ViewModelBase:publ i c cl ass Fi r s t Vi ewModel : Vi ewModel Base{

publ i c over r i de Task OnNavi gat edFr om( Navi gat i onEvent Ar gs ar gs){

r et ur n nul l ;}publ i c over r i de Task OnNavi gat edTo( Navi gat i onEvent Ar gs ar gs){

r et ur n nul l ;}

}Y aadimos comandos que permitan navegar de la pgina principal a la segunda pgina:publ i c cl ass Fi r s t Vi ewModel : Vi ewModel Base{

pr i vat e I Command _goToSecondCommand;pr i vat e I Command _par amet er Command;

Pgina5 de11

publ i c over r i de Task OnNavi gat edFr om( Navi gat i onEvent Ar gs ar gs){

r et ur n nul l ;}publ i c over r i de Task OnNavi gat edTo( Navi gat i onEvent Ar gs ar gs){

r et ur n nul l ;}publ i c I Command GoToSecondCommand{

get { r et ur n _goToSecondCommand = _goToSecondCommand ?? new Del egat eCommand( GoToSecondCommandExecut e) ; }

}publ i c I Command Par amet er Command{

get { r et ur n _par amet er Command = _par amet er Command ?? new Del egat eCommand( Par amet er CommandExecut e) ; }

}pr i vat e voi d GoToSecondCommandExecut e( ){

AppFr ame. Navi gat e( t ypeof ( SecondVi ew) ) ;}pr i vat e voi d Par amet er CommandExecut e( ){

var r nd = new Random( ) ;AppFr ame. Navi gat e( t ypeof ( SecondVi ew) , r nd. Next ( 1, 100) ) ;

}}Recordamos que el control Frame hospeda controles Page y tiene un historial de navegacin que se puede utilizarpara ir hacia atrs y hacia adelante por las pginas que ya visitaste. Tras obtener el Frame correspondiente,utilizamos el mtodo Navigate para realizar la navegacin a otra pgina. Tenemos dos sobrescrituras del mtodoNavigate:

Navigate(TypeName). Provoca que el Frame cargue el contenido especificado por el tipo pasado comoparmetro.

Navigate(TypeName, Object). En este caso, adems de indicar el tipo del contenido a cargar (primerparmetro), podemos pasar un parmetro a la pgina que se navega(segundo parmetro).

En nuestro ejemplo hemos utilizado la segunda sobrescritura del mtodo pasando un parmetro.Ahora ,necesitamos conectar nuestra vista con nuestro viewmodel. Podemos hacerlo de mltiples formas, desde elconstructor de la vista, instanciandola en App, usando Ioc. En nuestro caso, utilizaremos Ioc. Usaremos Unity.

Pgina6 de11

Una vez aadida la referencia correspondiente en cada proyecto (Windows y Windows Phone) creamos una nuevaclase en la carpeta Base dentro de la carpeta ViewModels llamada ViewModelLocator:publ i c cl ass Vi ewModel Locat or{

r eadonl y I Uni t yCont ai ner _cont ai ner ;publ i c Vi ewModel Locat or ( ){

_cont ai ner = new Uni t yCont ai ner ( ) ;_cont ai ner . Regi st er Type( ) ;_cont ai ner . Regi st er Type( ) ;

}publ i c Fi r st Vi ewModel Fi r st Vi ewModel{

get { r et ur n _cont ai ner . Resol ve( ) ; }}publ i c SecondVi ewModel SecondVi ewModel{

get { r et ur n _cont ai ner . Resol ve( ) ; }}

}Sencillamente registramos nuestras viewmodels y creamos un par de propiedades pblicas por cada viewmodelpara poder resolverlas y acceder a ellas desde las vistas. A continuacin, registramos nuestro locator en App.xaml:

Asignamos la viewmodel como DataContext de nuestra viewmodel:Dat aCont ext =" { Bi ndi ng Fi r st Vi ewModel , Sour ce={ St at i cResour ce Locat or } } "Y todo preparado!. Nuestra segunda pgina sera similar a la primera (tipo PageBase):

Pgina7 de11

Contar con su propia viewmodel:publ i c cl ass SecondVi ewModel : Vi ewModel Base{

/ / Var i abl espr i vat e i nt _par amet er ;/ / Commandspr i vat e I Command _backCommand;publ i c over r i de Task OnNavi gat edFr om( Navi gat i onEvent Ar gs ar gs){

r et ur n nul l ;}publ i c over r i de Task OnNavi gat edTo( Navi gat i onEvent Ar gs ar gs){

i f ( ar gs. Par amet er ! = nul l ){

Par amet er = Conver t . ToI nt 32( ar gs. Par amet er ) ;}

Pgina8 de11

r et ur n nul l ;}publ i c i nt Par amet er{

get { r et ur n _par amet er ; }set{

_par amet er = val ue;Rai sePr oper t yChanged( ) ;

}}publ i c I Command BackCommand{

get { r et ur n _backCommand = _backCommand ?? new Del egat eCommand( BackCommandExecut e) ; }

}pr i vat e voi d BackCommandExecut e( ){

i f ( AppFr ame. CanGoBack)AppFr ame. GoBack( ) ;

}}Utilizamos el mtodo GoBack del Frame que navega al elemento ms inmediato del historial de navegacin, lapgina anterior. Por otro lado, en caso de recibir parmetro, lo asignamos a una propiedad bindeada en la vista. Ennuestro ejemplo pasamos un valor aleatorio entero entre 1 y 100.En caso de utilizar el segundo botn, pasaremos el parmetro, se capturar en el mtodo OnNavigatedTo y sebindear en la vista:

Gestin de la tecla fsica volver

Pgina9 de11

En nuestra aplicacin, ejecutndola en Windows Phone y estando en la segunda pgina, podemos utilizar tambinla tecla fsica como hacamos en Windows Phone 8 para volver atrs. Si la pulsamos Ops!, que ha ocurrido?No hemos vuelto a la pgina anterior. En aplicaciones Windows XAML, al pulsar la tecla fsica atrs provocauna navegacin a la App anterior no a la pgina anterior.NOTA: En aplicaciones Windows Phone Silverlight 8.1 la navegacin atrs es dentro de la propia aplicacin.Podemos incluir cdigo personalizado para anular este comportamiento y causar una navegacin atrs dentro de lapropia aplicacin.Tras aadir la extensin Mobile:

En App.xaml.cs:i f ( Api I nf or mat i on. I sTypePr esent ( " Wi ndows. Phone. UI . I nput . Har dwar eBut t ons" ) )

Har dwar eBut t ons. BackPr essed += Har dwar eBut t ons_BackPr essed;Utilizamos el mtodo IsTypePresent de la clase esttica ApiInformation incluida dentro del namespaceWindows.Foundation.Metadata.voi d Har dwar eBut t ons_BackPr essed( obj ect sender , BackPr essedEvent Ar gs e){

Fr ame f r ame = Wi ndow. Cur r ent . Cont ent as Fr ame;i f ( f r ame == nul l )

r et ur n;i f ( f r ame. CanGoBack){

f r ame. GoBack( ) ;e. Handl ed = t r ue;

}}Analizamos que hemos hecho. Cada vez que se pulse la tecla fsica volver, entramos en nuestro cdigopersonalizado. Accedemos al Frame de la aplicacin, y si no es nulo, navegamos atrs y anulamos el

Pgina10 de11

comportamiento por defecto.Podis descargar el ejemplo realizado a continuacin:

Tambin podis acceder al cdigo fuente directamente en GitHub:

Recordar que cualquier tipo de duda o sugerencia la podis dejar en los comentarios de la entrada.Ms informacin

Windows Dev Center: Quickstart: Navigating between pages (XAML)

Published 13/4/2015 7:28 por jsuarezruizArchivado en: Navegacin,Windows 10,MVVM,UAPComparte este post:

Pgina11 de11