Artículo
08/25/2015

Este artículo proviene de un motor de traducción automática.

Asuntos móviles

Exploración de teléfono de Windows, parte 2: Recetas avanzadas

Yochay Kiriaty

[Con esto concluye la primera entrega de MSDN Magazinede la columna mensual más reciente, cuestiones de móvil. Con la creciente importancia de las tecnologías móviles como teléfonos de Windows 7, nos vas regularmente a destacar consejos práctica a los desarrolladores de todos los niveles que deseen aumentar sus conocimientos en este espacio de tecnología fundamental de expertos. Le animamos a que nos ayude a medida que avanzamos de forma nuestra nueva columna. Por favor, envíenos un correo electrónico mmeditor@Microsoft.com para Sugerir temas, compartir ideas o preguntas. Damos la bienvenida a todos los comentarios. — Ed.

Último mes hemos presentado el modelo de navegación de teléfono de Windows y APIs (consulte relacionadas MSDN.Microsoft.com/magazine/gg650662). Ahora compartiremos sugerencias y trucos para lograr más avanzadas de las tareas de exploración. Trataremos los siguientes aspectos de teléfono de Windows:

Con la API de exploración, puede utilizar los métodos Navigate y GoBack. Estos dos métodos bien push o pop en una dirección URL para el historial de exploración (espera de la pila). Puesto que no hay ninguna API para administrar la pila de reserva, tendrá que pantallas transitorias de administrarla personalmente. Pantallas transitorias son cuadros de diálogo o los avisos que no desea que los usuarios a visitar cuando aparecen Back — por ejemplo, un mensaje o un cuadro de diálogo de inicio de sesión.
Teléfono de Windows permite sólo una navegación esté activo al mismo tiempo. Si necesita la característica "quiero principal", que normalmente es un acceso directo para un usuario para desplazarse por varias páginas, tendrá que serializar la secuencia de llamadas de método GoBack uno a la vez; Esto puede afectar a su UX.
Ninguno de los dos participantes de exploración: PhoneApplicationPage y PhoneApplicationFrame, dispone de soporte técnico de fábrica para las transiciones de página.

Analicemos estos aspectos por lo que nos podemos llegar a recetas útiles para solucionarlos.

Contenido transitorio

Pantallas transitorias son pantallas que no deben agregarse a la pila de espera de registro en diario (el histórico de diario), por ejemplo, un cuadro de diálogo de inicio de sesión. Los usuarios desplazarse de una página a un cuadro de diálogo de inicio de sesión, pero cuando se mueven hacia adelante y atrás de visitas, no desea que los usuarios para volver al cuadro de diálogo, que desee volver a la pantalla anterior.

Hay varias maneras de crear y mostrar una pantalla transitoria. Lo obvio es utilizar un menú emergente de Silverlight para mostrar la interfaz de usuario. Hay dos pequeños problemas con el enfoque del menú emergente:

Un elemento emergente no es consciente de orientación. Esto no es un gran problema; se puede escribir un menú emergente conciente de la orientación o simplemente podría insertar el elemento emergente en el árbol visual y, a continuación, haría a diseño de acuerdo con la orientación de página.
Contenido dentro de una pantalla completa emergente no acelerado por hardware. Para la interfaz de usuario de cuadro de diálogo de inicio de sesión (y con muchas páginas transitorias) esto a estar bien pero imagine donde el Popup tiene un control ListBox con suficientes elementos para desplazarse por, o tiene un ProgressBar animado, querrá hardware acelerar el menú emergente para maximizar la capacidad de respuesta del subproceso de la interfaz de usuario.

Debido estos pequeños problemas, le recomendamos en línea de la interfaz de usuario insertando ésta en el árbol visual con un índice z más alto que el contenido de la página en que se encuentra. Ésta es la receta paso a paso:

Empaquetar el contenido que desea en línea en el árbol visual en un control de usuario para que pueda insertar en el árbol y mostrarlo en la página (sin que se mezcla en la interfaz de usuario de la página).
En el PhoneApplicationPage que se mostrará la interfaz de usuario, controlar el evento BackKeyPress para cerrar la interfaz de usuario transitorio (sin tener que navegar atrás) o la devolución de llamada de OnBackKeyPress cuando se presiona el botón Atrás.
1. Controles personalizados que tienen varios Estados (expandirse y contraerse) deben exponer propiedades para que la página host puede consultar en su estado y saber si están en un estado que puede consumir el presionar el botón Atrás (si procede). Por ejemplo, ListPicker en el Kit de herramientas de control tiene una propiedad de ListPickerMode, ContextMenu tiene una propiedad IsOpen y así sucesivamente.
Ocultar el ApplicationBar en la página al mostrar la interfaz de usuario transitorio (si procede). Se dibuja el ApplicationBar por el sistema operativo y cuándo es opaco (opacidad = 1.0) se reserva espacio debajo del área de contenido de la página. Para simular la interfaz de usuario transitorio como una nueva pantalla, es probable que desee ocultar la barra de la aplicación.
Animar la interfaz de usuario temporal cuando se realizan las transiciones y cuando se descarta, de modo que se fusiona con el resto de (UX la aplicación) (si procede).

Tutorial de código: para ver una pantalla transitoria de la interfaz de usuario, comprobar TransientUISample.xaml.cs en la descarga de código que lo acompañan, con instrucciones paso a paso como comentarios.

La mayoría de los requisitos anteriores debe ser intuitiva; el único que necesita explicación es no. 2.a. Para satisfacer los requisitos de certificación, un PhoneApplicationPage que muestra una pantalla transitoria no debería desplazarse cuando se muestra la interfaz de usuario transitorio. En su lugar, debe cerrar la interfaz de usuario transitorio.

En la parte 1 de este artículo, hemos mencionado que debe evitar que las exploraciones de hardware Back controlando el evento BackKeyPress o OnBackKeyPress. Si la página aloja un control que tiene dos Estados y uno de ellos es transitorio, a continuación, un poco de coordinación (o al menos conciencia) entre la página y el control es necesario. Para implementar el protocolo de enlace, se recomienda:

Controles personalizados que tienen varios Estados (por ejemplo, ListPicker) deben suscribirse a BackKeyPress en su página de alojamiento y controlar de forma adecuada. Si están en un estado transitorio, deben cancelar la pulsación de tecla Atrás y descartar su estado transitorio.
1. Deben suscribirse a estos controles sólo cuando sea necesario. Retrasar la suscripción al evento BackKeyPress hasta que sea necesario.
2. Preferimos que los controles ascender por el árbol visual para encontrar su PhoneApplicationPage, pero hemos visto expertos (por ejemplo, el equipo de Kit de herramientas de control) hace, comunicarse con el RootVisual de la aplicación (que sabemos que es un PhoneApplicationFrame) y leerlo en su contenido. Esto es, por supuesto, más eficaz y segura fija porque sabemos que hay sólo un subproceso de interfaz de usuario en una aplicación de Silverlight (por lo que es improbable que está cambiando la RootVisual dentro de un controlador de eventos para el control o la página).
Controles personalizados y las interfaces de usuario transitorios deben exponer propiedades para que la página host puede consultar en su estado y saber si están en un estado que puede consumir el presionar el botón Atrás. Por ejemplo, ListPicker en el Kit de herramientas de control tiene una propiedad de ListPickerMode, ContextMenu tiene una propiedad IsOpen y así sucesivamente.
El host que debe tener en cuenta cualquier controles transitorios o la interfaz de usuario que se puede mostrar y comprobar en todos ellos antes de que lo hace cualquier exploración dentro de OnBackKeyPress PhoneApplicationPage. Recuerde que se llama a OnBackKeyPress antes de llaman a los controladores de eventos de BackKeyPress. Si se basa en los controles alojados para controlar su estado transitorio, asegúrese de que no llame al método Navigate y obtener por delante de los controladores.

Principal (y navegación borrar la pila de la parte posterior)

Un modelo común de UX de otras plataformas móviles es tener un "inicio" botón dicha exploración accesos directos y envía a una página específica. La API de exploración de teléfono de Windows no controlan directamente de hecho, las instrucciones UX desaconsejan tener un botón de inicio. Se recomienda tener una estructura de exploración bien diseñadas y relativamente plana. Si sus navegaciones de dos o tres niveles de profundidad, es probablemente igual de fácil presionar el botón Atrás de hardware de un par de veces que va a hacer un movimiento más calculado encontrar un botón de inicio en la pantalla y haciendo clic en él. Dicho esto, si decide tener un botón de inicio, hay algunas cosas que debe tener en cuenta para implementar la exploración:

Recuerde que el teléfono de Windows permite una exploración a la vez. Esto significa que si cuatro niveles de profundidad en una exploración, tendrá que llamar a GoBack tres veces en una fila para que llegue a casa. Debido a que no se admiten las exploraciones simultáneas, debe esperar hasta que se complete una exploración (cuando se desencadene el evento Navigated) para iniciar la exploración de la siguiente. Esta secuencia de"exploración" puede provocar retrasos breves si la página tarda mucho tiempo de carga, o puede conducir a "parpadea" Si la página está visible, mientras que la pila de reserva de pop.
Las animaciones para los ApplicationBar son implementadas por el sistema operativo. Esto significa que si en un bucle que está explorando en varias páginas, la interfaz de usuario nuevo puede parpadear si se anima el ApplicationBar que se muestran en una página en el bucle.

Aquí está una receta para resolver el desafío de navegación de "Inicio". Puede ver todo este código que se implementan a través de la clase BackNavigationHelper en la descarga:

Ocultar el PhoneApplicationFrame (RootVisual de la aplicación) de la pantalla mientras que la pila de reserva de pop. Esto impedirá el parpadeo de la interfaz de usuario (parpadeará una vez, pero no podrá ver todas las pantallas volver atrás).
1. Si las páginas tardan demasiado tiempo, puede mostrar un menú emergente de pantalla completa con una animación para que el usuario sepa lo que sucede.
2. También se debe establecer un indicador antes de que comience una exploración principal para que sepan sus páginas no se debe para hacer mucho trabajo en su devolución de llamada OnNavigatedTo. Si está explorar de nuevo, se descargará estas páginas que haya finalizado la exploración (de modo que se omiten cualquier trabajo de la interfaz de usuario que lo hace).
Ocultar el ApplicationBar (estableciendo la propiedad IsVisible en false) de cada página que se está desenredando (si procede).
1. Tenga en cuenta que esto sólo es necesaria para las páginas donde el ApplicationBar es opaco al 100 por ciento (su opacidad = 1.0).
Desenredar la pila.
1. Llame al método GoBack.
2. Escuchar Navigated (en el RootVisual) y llamar a GoBack una vez más, si no está ya en la página "Principal".

Restablecer todo normal cuando haya desenredando la pila.

Tutorial de código: puede ver ejemplos de exploración "quiero principal" en las páginas de la carpeta HomeNavigationSamplePages en la descarga de código que lo acompaña. Es el código interesante, por supuesto, en la clase BackNavigationHelper, pero nuestro ejemplo tiene una página de BackNavConfig, donde puede seleccionar las opciones que desee habilitar en BackNavigationHelper (como, por ejemplo, ocultar el marco, ocultando la barra de la aplicación, validar el diario y así sucesivamente).

Transiciones de página

El concepto de navegación final y más avanzado, es posible que importa se refiere a las transiciones de página. En el contexto de navegación, creemos que de una transición como la percepción de un entregue entre una página que está explorando desde y en la página que va a desplazarse a. Todavía se está produciendo la exploración y utiliza la estructura de exploración subyacente que hemos analizado anteriormente, pero como sucede en la navegación, el contenido de la PhoneApplicationPages que forman parte de la exploración se anima para simular un entregue.

La receta para las transiciones es un poco más complicada. De hecho, al igual que lasagna de la abuela, hay una receta única: requerirá algunos "ajustes" a su gusto (y las necesidades de la aplicación). Dicho esto, contamos con unos principios debe seguir, junto con un tutorial de ejemplo y el código, por supuesto.

Los principios:

Siga todos los principios de pulsación de tecla Atrás que se ha descrito anteriormente. De nuevo, la transición es simplemente una extensión de exploración, no una excusa para que se producirá un error de certificación.
Comprender el contexto y el propósito de una animación de transición. Teléfono de Windows tiene un conjunto bien definido de transiciones y la mayoría de ellos tiene un contexto específico o el uso. Debe comprender el uso previsto por lo que puede implementar las transiciones de la derecha en su aplicación. Jeff Arnold (el Diseñador de movimiento de cliente potencial de teléfono de Windows) hizo una grabación breve de todas las animaciones y transiciones; es una observación debe comprender el propósito de cada animación. Puede encontrar el vídeo en bit.LY/eBTkjD.
Mantenga sus transiciones rápidas y short.
1. Recuerde que una transición es tanto un "out" de una página y un "in" en una página diferente. Estas dos fases se suman. Mantenerlos en breve. Nos diría total de 300 ms es un buena límite superior.
2. Retrasar tanto trabajo de la interfaz de usuario que pueda durante una transición. Si la página puede evitar el enlace de datos o las operaciones de esquema costoso, considere la posibilidad de hacerlo. Puede la transición de la pantalla y, a continuación, mover rápidamente para rellenarla posteriormente.

Figura 1 muestra un resumen de las animaciones, su uso, instrucciones y notas pertinentes.

Figura 1 un resumen de las animaciones

Animación	Usage	Direcciones	Notas de la transición
Torniquete	Lleva el usuario de un espacio a otro. Valor predeterminado es a través del dispositivo. Resulta pesado por diseño para dar énfasis a que se han producido una transición.	ForwardIn, ForwardOut, BackwardIn y BackwardOut	Esto será una animación comunes que se desea utilizar. Es bastante sencillo.
Continuum	Transiciones de usuario de un espacio a otro, pero da la sensación de continuidad. Lleva el contexto de un espacio a otro. Es casi como no deja.	In, Out	Continuum es común, pero es más difícil de implementar. Requiere que el contexto de continuum (la percepción de que se lleve a un UIElement en dos páginas).
Giratoria	Utilizado para la interfaz de usuario transitorio; Por ejemplo, para cuadros de diálogo. Es diferente de otras animaciones que it no transición, pero mantiene el usuario en el mismo space o al menos pretende dar ese percepción.	ForwardIn, ForwardOut, FullScreenIn, FullScreenOut, BackwardIn, BackwardOut	No se utiliza mucho para transiciones; se usa principalmente para cuadros de diálogo.
Diapositiva	Se utiliza para la interfaz de usuario transitorio. Proporciona contenido sobre el contenido existente.	SlideUpFadeIn, SlideUpFadeOut, SlideDownFadeIn, SlideDownFadeOut, SlideLeftFadeIn, SlideLeftFadeOut, SlideRightFadeIn, SlideRightFadeOut	Suele utilizarse para la transición en las interfaces de usuario transitorios.
Rotación	Gira la pantalla en un ángulo de and de dirección específica.	In90Clockwise, In90CounterClockwise, In180Clockwise, In180CounterClockwise, Out90Clockwise, Out90CounterClockwise, Out180Clockwise, Out180CounterClockwise	No se utiliza mucho para transiciones; se usa principalmente para la orientación.

Con los tres principios enumerados anteriormente en mente, ahora se pueden mover a la codificación de transiciones de página. El Kit de herramientas de controles de teléfono de Windows tiene soporte para las transiciones, y guiones gráficos para las transiciones más comunes.

Nota: Para seguir junto con el resto del artículo, tendrás el (Toolkit de teléfono de Silverlight para WindowsSilverlight.codeplex.com). El código en este artículo está escrito con respecto a la versión de febrero (versiones posteriores deben funcionar, demasiado).

Transiciones del Kit de herramientas para utilizan un TransitionFrame que se hereda de PhoneApplicationFrame, pero tiene una plantilla personalizada con dos de los moderadores de contenido (donde PhoneApplicationFrame tiene sólo una ranura de contenido). TransitionFrame detecta los cambios en su propiedad de contenido y las transiciones en el nuevo contenido (página) y pasa el contenido antiguo.

Cada PhoneApplicationPage determina qué transiciones que desea utilizar una propiedad adjunta en la clase de TransitionService del Kit de herramientas. Puede especificar hasta cuatro transiciones para cada página, como se muestra en figura 2.

Figura 2 las cuatro transiciones de página que se pueden especificar

Transición (nombre de propiedad)	Descripción
NavigationInTransition.Forward	Llama a medida que navega a esta página, con un desplazamiento adelante.
NavigationInTransition.Backward	Se llama cuando el usuario activa una exploración hacia atrás en el que está desplazando a esta página.
NavigationOutTransition.Forward	Llama a medida que se vaya salir de esta página en un desplazamiento adelante.
NavigationOutTransition.Backward	Denomina que sale de esta página en una exploración hacia atrás.

Estas transiciones son instancias de una clase extensible de NavigationTransition. El Kit de herramientas incluye cinco NavigationTransitions integrados: TurnstileTranstion, SlideTransition, SwivelTransition, RotateTransition y RollTransition. De nuevo, el sistema es extensible para que pueda agregar su propio.

Instrucciones paso a paso para implementar las transiciones mediante el Kit de herramientas son:

1. Descargar y agregar una referencia para el Kit de herramientas de control de Silverlight.

2. Reemplazar el marco de RootVisual de la aplicación, edite el App.xaml.cs y reemplazarlo por un TransitionFrame (consulte figura 3).

3. Aplicar propiedades de la transición a las páginas (consulte figura 4).

Figura 3 reemplazar el marco de RootVisual de la aplicación editando el App.xaml.cs

private void InitializePhoneApplication()
  {
    if (phoneApplicationInitialized)
        return;

    // Crear el marco pero no lo establece como RootVisual todavía; Esto permite que la pantalla de inicio
    // pantalla permanezca activa hasta que la aplicación está preparada procesar.
    RootFrame = new Microsoft.Phone.Controls.TransitionFrame();
    RootFrame.Navigated += CompleteInitializePhoneApplication;

    // Identificador exploración errores
    RootFrame.NavigationFailed += RootFrame_NavigationFailed;

    // Asegurarse de que se vuelva a no inicializar
    phoneApplicationInitialized = true;
  }

Figura 4 aplicando las propiedades de la transición a las páginas

<phone:PhoneApplicationPage 
    x:Class="LWP.TransitionSamples.Turnstile"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"  xmlns:toolkit=
    "clr-namespace:Microsoft.Phone.Controls;assembly=
    Microsoft.Phone.Controls.Toolkit"
  >

  <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
        <toolkit:TurnstileTransition Mode="BackwardIn"/>
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
        <toolkit:TurnstileTransition Mode="ForwardIn"/>
      </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
  </toolkit:TransitionService.NavigationInTransition>
  <toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
        <toolkit:TurnstileTransition Mode="BackwardOut"/>
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
        <toolkit:TurnstileTransition Mode="ForwardOut"/>
      </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
  </toolkit:TransitionService.NavigationOutTransition>

Recetas útiles

En resumen, las aplicaciones tienen un modelo de navegación de tipo Web en el que puede realizar la transición desde una página y hacer que un diario (o histórico) Silverlight de teléfono de Windows por lo que puede volver a páginas anteriores. De-fábrica, el modelo de navegación es relativamente completa y fácil de usar. Hay algunas tareas avanzadas de exploración: como IUs transitorias, transiciones o funcionalidad de "salto a la página principal", que no se hayan implementado de forma inmediata, pero en este artículo de dos partes, ha explicado las consideraciones de diseño se debe tener en cuenta para implementar estas avanzadas más tareas y le ha proporcionado concisa, recetas útiles para implementarlos.

Yochay Kiriaty es un evangelista técnico senior de Microsoft, que se enfoca en tecnologías de cliente tales como Windows y Windows Phone. Él es coautor de los libros “Introducing Windows 7 for Developers” (Microsoft Press, 2009) y “Learning Windows Phone Programming” (O’Reilly Media, 2011).

Jaime Rodriguez es un evangelista principal en Microsoft, promoviendo la adopción de tecnologías emergentes de cliente como Silverlight y teléfono de Windows. Le siga en Twitter en Twitter.com/jaimerodriguez u on blogs.msdn.com/b/jaimer.

Gracias al siguiente experto técnico para la revisión de este artículo: Peter Torr