Home > MVA, Tutoriales, WP7 > Controles Panorama y Pivot

Controles Panorama y Pivot

Controles Panorama y Pivot

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

 

Windows Phone 7 incluye los controles Panorama y Pivot para mostrar contenidos relacionados para que los usuarios puedan navegar horizontalmente. Este tutorial ofrece una visión general de los controles Panorama y Pivot,  describe cómo utilizar estos controles, y proporciona algunas de las mejores prácticas.
 
Este artículo contiene las siguientes secciones:

·         Control Panorama

·         Control Pivot

·         Eligiendo entre los controles Panorama y Pivot

·         Agregando un control Panorama o Pivot en tu proyecto

·         Ejemplo de Control Panorama

·         Ejemplo de Control Pivot

·         Mejores Prácticas

Control Panorama

El control de Panorama se utiliza para mostrar contenido relacionado a lo largo de un Canvas horizontal que se extiende más allá de los límites de la pantalla.  Las secciones en el control de Panorama, llamados los elementos del Panorama, sirven como punto de partida para experiencias más detalladas.  Puedes explorar estos elementos deslizando entre ellos.

Cuando estás en un elemento, podrás ver un poco del elemento siguiente, lo cual te dará un indicio de que hay más por explorar.  Al llegar al final de Panorama, puedes seguir el paneo para regresar al principio. El control Panorama viene con soporte integrado para tacto y navegación.  No tienes que implementar cualquier alguna funcionalidad para gestos en especial en el control Panorama ya que está habilitado de forma predeterminada.

 

Los hubs de contactos y el de música y video son ejemplos de experiencias nativas en Windows Phone que utilizan el control Panorama. La siguiente ilustración muestra el control Panorama para el hub de contactos.

clip_image002

Control Pivot

El control Pivot es usado para el filtrado de grandes conjuntos de datos, visualización de múltiples conjuntos de datos, o cambiar entre diferentes vistas de los mismos datos. El control Pivot es similar a un control Tab pero está diseñado específicamente para el teléfono y la interacción táctil. Coloca las vistas individuales horizontalmente uno junto a la otra para que puedas navegar a través de ellas utilizando gestos de paneo y toque.

Las aplicaciones de correo electrónico y calendario en Windows Phone son ejemplos que utilizan el control Pivot.  La siguiente ilustración muestra el control Pivot en la aplicación de correo electrónico.

clip_image004

Eligiendo entre los controles Panorama y Pivot

A pesar de que los controles Panorama y de Pivot pueden parecer similares, debes tener cuidado al decidir cuándo usar un Panorama y cuándo usar un Pivot.

Utiliza un control Panorama para permitir a los usuarios explorar el contenido y proporcionar un punto de partida para acciones futuras. Un control Panorama es genial para la agregación de información de múltiples fuentes. Un control  Panorama no debe ser la única interacción de una aplicación. Debe fomentar la navegación a tareas específicas que complementan la experiencia de usuario.

Utiliza un control Pivot para permitir a los usuarios filtrar, ordenar u organizar el contenido dentro de tu aplicación. El control Pivot sólo debe ser usado para mostrar elementos o datos de tipo similar.  Los títulos en el control Pivot deben ser categorías naturales de los datos.  El modelo de navegación de izquierda a derecha en el control Pivot ayudará a los usuarios a encontrar de manera eficiente la información que necesitan.

 

Agregando  un Control Panorama o Pivot a tu proyecto

Puedes agregar un control Panorama o Pivot a tu proyecto de Windows Phone en una de las tres siguientes maneras.

Mediante la caja de herramientas

Para agregar un control Panorama o Pivot a una página existente, puedes arrastrarlo desde la caja de herramientas.  Los controles Panorama y Pivot no se encuentran en la caja de herramientas por defecto.  Para agregar elementos a tu caja de herramientas, haz clic derecho en la caja de herramientas y selecciona la opción Choose Items (Elegir elementos).

clip_image006

Mediante el uso de una plantilla de página

Para agregar un control Panorama o Pivot en una página nueva, puedes utilizar las plantillas de página.  Haz clic derecho en el proyecto en el Explorador de soluciones, haz clic en Add, y a continuación haz clic en New Item.  En la caja de diálogo Add New Items, selecciona Windows Phone Panorama Page o Windows Phone Pivot Page.  Para obtener más información, consulta Cómo: Crear una aplicación Panorama para Windows Phone  y Cómo: Crear una aplicación Pivot para Windows Phone.

clip_image008

Mediante el uso de una plantilla de proyecto

Para iniciar con un control Panorama o Pivot en un nuevo proyecto puedes utilizar las plantillas de proyecto.  En la caja de diálogo New Project, selecciona Windows Phone Panorama Application o Windows Phone Pivot Application.  Las plantillas vienen pre-diseñadas con contenido que puedes modificar.

clip_image010

Cuando agregas los controles Panorama y Pivot usando una de estas tres formas, se agrega una referencia al siguiente ensamblado.

Microsoft.Phone.Controls.dll

Además, el siguiente espacio de nombres XML se agrega a la página.

xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

Ejemplo de control Panorama

El siguiente ejemplo crea un control Panorama con una imagen de fondo y tres controles PanoramaItem.  Las dimensiones recomendadas para una imagen de fondo es una altura de 800 pixeles y un ancho inferior a 2000 pixeles.  Los controles PanoramaItem  se utilizan para agregar secciones individuales de contenido al control Panorama.  Un control Panorama puede soportar múltiples controles PanoramaItem y el usuario puede navegar a través de estas secciones utilizando los gestos táctiles pre-construidos de paneo y toque.

XAML

 

<Grid x:Name="LayoutRoot" Background="Transparent">

<!—Control Panorama –>

<controls:Panorama Title="my pictures">

<controls:Panorama.Background>

     <ImageBrush ImageSource="PanoramaBackground.png" />

</controls:Panorama.Background>

<!–Panorama primer elemento–>

<controls:PanoramaItem>

<TextBlock FontSize="30" Text="This example demonstrates

the Panorama control in a Windows Phone application." TextWrapping="Wrap" />

</controls:PanoramaItem>

<!–Panorama Segundo elemento–>

<controls:PanoramaItem>

<ListBox FontSize="35">

<ListBoxItem Content="all" />

<ListBoxItem Content="recent" />

<ListBoxItem Content="favorites" />

</ListBox>

</controls:PanoramaItem>

<!–Panorama tercer elemento–>

<controls:PanoramaItem Orientation="Horizontal">

<Grid>

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Image Source="Creek.jpg" Grid.Row="0" Grid.Column="0"

Margin="10"/>

<Image Source="Desert.jpg" Grid.Row="0" Grid.Column="1"

Margin="10"/>

</Grid>

</Grid>

</controls:PanoramaItem>

</controls:Panorama>

</Grid>

La siguiente ilustración muestra los resultados del anterior ejemplo de Panorama.

·         El primer PanoramaItem tiene un control TextBlock que contiene el texto ajustado. Esta es una forma sencilla de mostrar texto en un Panorama.

·         El segundo PanoramaItem tiene un control ListBox con tres elementos de lista.  Se puede desplazar el contenido de la lista hacia arriba o hacia abajo.  El desplazamiento vertical con una lista o grid en las secciones Panorama es aceptable siempre y cuando esté dentro de los límites de la sección y no esté en paralelo con un paneo horizontal.

·         El tercer PanoramaItem tiene la propiedad  Orientation establecida en horizontal para que puedas desplazarte horizontalmente para ver todas las imágenes en miniaturas.  El control Panorama te permite mostrar secciones que son más anchas que la pantalla. Puedes establecer la propiedad Orientation del control PanoramaItem  a horizontal de modo que el contenido que se extiende fuera de la pantalla no se corte y puede desplazarse horizontalmente para exponer el contenido restante.

clip_image012

Ejemplo de control Pivot

En el siguiente ejemplo se crea un control Pivot que se utiliza para mostrar diferentes vistas de las tareas del usuario. El control Pivot tiene tres controles PivotItem.  Cada PivotItem filtra las tareas por: todas las tareas, tareas de hoy y tareas para mañana.

 

XAML

<!– LayoutRoot es la raíz del Grid donde se encuentra todo el contenido de la página -->

<Grid x:Name="LayoutRoot" Background="Transparent">

<controls:Pivot Title="my tasks">

<!–Pivot primer elemento–>

<controls:PivotItem Header="all">

<ListBox FontSize="30">

<ListBoxItem Content="Dentist appointment" />

<ListBoxItem Content="Pickup laundry" />

<ListBoxItem Content="Service car" />

<ListBoxItem Content="Send birthday gift to mom" />

<ListBoxItem Content="Grocery" />

</ListBox>

</controls:PivotItem>

<!–Pivot Segundo elemento–>

<controls:PivotItem Header="today">

<ListBox FontSize="30">

<ListBoxItem Content="Dentist appointment" />

<ListBoxItem Content="Pickup laundry" />

</ListBox>

</controls:PivotItem>

<!–Pivot tercer elemento–>

<controls:PivotItem Header="tomorrow">

<ListBox FontSize="30">

<ListBoxItem Content="Service car" />

<ListBoxItem Content="Send birthday gift to mom" />

<ListBoxItem Content="Grocery" />

</ListBox>

</controls:PivotItem>

</controls:Pivot>

</Grid>

 

La siguiente ilustración muestra los resultados del ejemplo de Pivot anterior.

 

clip_image014

 

Consejo

Si tienes que implementar el desplazamiento vertical de elementos en un control Panorama o Pivot, puedes agregar controles de desplazamiento como ListBox, o añadir un ScrollViewer al PanoramaItem o PivotItem.  Añadir un ScrollViewer asegura que los elementos sean siempre del tamaño del contenedor padre.

Mejores Prácticas

Las siguientes son algunas de las mejores prácticas para utilizar un control Panorama:

·         Limita el número de PanoramaItems en un control Panorama a un máximo de cuatro. Si el contenido es denso, o si los PanoramaItems comparten muchos controles, reduce el número de PanoramaItems.

·         Oculta los PanoramaItems hasta que tengan contenido que mostrar estableciendo el valor de la propiedad PanoramaItem.Visibility en Collapsed.

·         Cuando aplique, extiende los PanoramaItems más allá de los límites de la pantalla estableciendo la propiedad PanoramaItem.Orientation en horizontal.  Esto refuerza la naturaleza panorámica del control.

·         Utiliza una imagen de fondo del tamaño adecuado en la aplicación.  Las dimensiones recomendadas para una imagen de fondo es una altura de 800 pixeles y un ancho inferior a 2000 pixeles.

·         Para mantener la consistencia, establece el título del Panorama con el mismo texto que el mosaico de lanzamiento en la pantalla de inicio.

·         Evita animar el título del Panorama o cambiar su tamaño dinámicamente.        

Las siguientes son algunas de las mejores prácticas para utilizar un control Pivot:

·         Minimiza el número de elementos en un control Pivot por consideraciones de rendimiento

·         Carga el contenido del control Pivot bajo demanda en lugar de cargar todo al inicio.

·         Utiliza el control Pivot para mostrar elementos o datos de tipo similar.

·         No utilices el control Pivot para la navegación basada en tareas, como en una aplicación de tipo asistente (wizard).

·         No deberías usar botones en la Barra de Aplicación para proporcionar navegación en un control Pivot.  Si el control Pivot requiere ayuda para la navegación, probablemente estás haciendo un mal uso de él.

Para obtener más información sobre las mejores prácticas de los controles Panorama y Pivot, consulta  Central Application Hub with Home Page Menu (Panorama or Pivot Control) for Windows Phone.

  1. November 23rd, 2011 at 14:17 | #1

    MUY INTERESANTE, ME SIRVE MUCHO EN LO QUE HAGO
    GRACIAS

  2. Andres
    December 10th, 2012 at 14:47 | #2

    Excelente tutorial de como usar estas herramientas, excelente forma de explicarlos. Aunque tuve un problema con poner una imagen de fondo a cualquiera de los dos….

  3. José Rodríguez
    December 25th, 2012 at 15:07 | #3

    La información presentada fue valiosa para mí. !Gracias!

  4. April 14th, 2013 at 19:19 | #4

    Excelente material….me hace a pensar….

  5. Fernando Pes
    September 4th, 2014 at 00:10 | #5

    Excelente, es lo que necesitaba