Generation App – Día 5 – Controles Panorama y Pivot

En este día, vamos a entrar en detalle acerca de dos tipos de interfaces con las que podrías implementar en tu aplicación.

Proyecto Tipo Panorama

A diferencias de las aplicaciones comunes que están diseñadas para encajar dentro de los limites de la pantalla de un teléfono, aplicaciones panorámicas ofrecen una manera única para visualizar controles, datos, y servicios usando un largo lienzo horizontal que se extiende mas allá de los limites de la pantalla. Este control ya se encuentra pre-construida en una plantilla de proyecto en Visual Studio. Creando ese proyecto, desplegará la página MainPage.xaml con un control panorama. A modo de aprender a crear un control panorama, te guiaré paso a paso cómo crearla desde un proyecto normal de aplicación Windows Phone.

Creando una aplicación basado en Panorama

  1. Ejecuta Visual Studio 2010 Express para Windows Phone.

  2. Crea un nuevo proyecto seleccionando haciendo clic en Archivo | Nuevo Proyecto

  3. La ventana de Nuevo Proyecto aparece. Expande las plantillas de Visual C#, y selecciona la plantilla Silverlight para Windows Phone.

  4. Ahora selecciona la plantilla Aplicación Windows Phone. Coloca de nombre de proyecto tu preferencia.

  5. Da clic a OK. La ventana de selección de plataforma Windows Phone aparece. Selecciona Windows Phone OS 7.1 para la versión de Windows Phone objetivo.

  6. Da clic a OK. El proyecto nuevo es creado y se despliega el archivo MainPage.xamlen el diseñador de Visual Studio.

  7. Clic-derecho al proyecto en el Solution Explorer. Selecciona Windows Phone Panorama Page y clic Add en la parte inferior de la pantalla. El nombre por defecto de la pantalla es PanoramaPage1.xaml es usado en este proyecto.

  8. En MainPage.xaml, agrega el siguiente código XAML dentro del grid nombradoContentPanel.

    <HyperlinkButton Content="Panorama Application Example" Height="57" HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="383" NavigateUri="/PanoramaPage1.xaml"/>
  9. En PanoramaPage1.xaml, el siguiente código en XAML deberá ser visible:
    <!--LayoutRoot contains the root grid where all other page content is placed.-->
        <Grid x:Name="LayoutRoot">
            <controls:Panorama Title="my application">
    
                <!--Panorama item one-->
                <controls:PanoramaItem Header="item1">
                    <Grid/>
                </controls:PanoramaItem>
    
                <!--Panorama item two-->
                <controls:PanoramaItem Header="item2">
                    <Grid/>
                </controls:PanoramaItem>
            </controls:Panorama>
        </Grid>
  10. Después de la sección <!–Panorama item two–>, agrega el siguiente controlPanoramaItem usando este código:
    <!--Panorama item three.-->
    <controls:PanoramaItem Header="item3">
    <Grid/>
    </controls:PanoramaItem>

La siguiente imagen ilustra como se despliega el control panorama con sus tres paginas agregadas.

Agregar un fondo de pantalla

Para agregar un fondo de pantalla en tu control panorama, puedes hacerlo vía código XAML, programáticamente en C#. Asimiento que tienes una imagen SamplePhoto.jpgya agregada en tu proyecto, puedes colocarla de la siguiente forma:

  • Agrega el siguiente código XAML después del código del control Panorama,<controls:Panorama Title=”my application”>

    <!--Assigns a background image to the Panorama control.-->
         <controls:Panorama.Background>
            <ImageBrush ImageSource="samplePhoto.jpg"/>
         </controls:Panorama.Background>
  • Como alternativa, puedes cambiar el fondo dinámicamente por medio del código C# asociado a la pagina, agregando la directiva System.Windows.Media.Imaging. Para cambiar el fondo dinámicamente, agrega el siguiente código en el constructor de la pagina, en el método OnNavigatedTo, o en cualquier otro lado para establecer el fondo en el control Panorama. Este código asume que nombraste tu control Panorama como PanoControl.

    BitmapImage bitmapImage = new BitmapImage(new Uri(“samplePhoto.jpg”,UriKind.Relative));
    ImageBrush imageBrush = new ImageBrush();
    imageBrush.ImageSource = bitmapImage;
    PanoControl.Background = imageBrush;

Proyecto Tipo Pivote

El control Pivote de Windows Phone provee una manera rápida para gestionar vistas o paginas. Puede ser utilizado para filtrar grandes conjuntos de datos, visualizar conjuntos de datos múltiples, o incluso intercambiar vistas de la aplicación. Este control ya se encuentra pre-construida en una plantilla de proyecto en Visual Studio. Creando ese proyecto, te desplegará la página MainPage.xaml con un control de tipo pivote. A modo de aprender a crear un control pivote, te guiaré paso a paso cómo crearla desde un proyecto normal de aplicación Windows Phone.

Creando una aplicación basado en Panorama

  1. Ejecuta Visual Studio 2010 Express para Windows Phone.

  2. Crea un nuevo proyecto seleccionando haciendo clic en Archivo | Nuevo Proyecto

  3. La ventana de Nuevo Proyecto aparece. Expande las plantillas de Visual C#, y selecciona la plantilla Silverlight para Windows Phone.

  4. Ahora selecciona la plantilla Aplicación Windows Phone. Coloca de nombre de proyecto tu preferencia.

  5. Da clic a OK. La ventana de selección de plataforma Windows Phone aparece. Selecciona Windows Phone OS 7.1para la versión de Windows Phone objetivo.

    Da clic a OK. El proyecto nuevo es creado y se despliega el archivo MainPage.xamlen el diseñador de Visual Studio.

  6. Clic-derecho al proyecto en el Solution Explorer, da clic en Add| New Item.  Selecciona Windows Phone Pivot Page y da clic Add en la parte inferior de la pantalla. El nombre por defecto de la pantalla es PivotPage1.xaml es usado en este proyecto.

  7. En MainPage.xaml, agrega el siguiente código XAML dentro del grid nombradoContentPanel.

    <HyperlinkButton Content="Pivot Application Example" Height="57" HorizontalAlignment="Left" Margin="49,116,0,0" Name="hyperlinkButton1" VerticalAlignment="Top" Width="383" NavigateUri="/PivotPage1.xaml"/>
  8. En PivotPage1.xaml, el siguiente código en XAML deberá ser visible:

    <!--LayoutRoot is the root grid where all page content is placed.-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <!--Pivot Control-->
            <controls:Pivot Title="MY APPLICATION">
                <!--Pivot item one-->
                <controls:PivotItem Header="item1">
                    <Grid/>
                </controls:PivotItem>
    
                <!--Pivot item two-->
                <controls:PivotItem Header="item2">
                    <Grid/>
                </controls:PivotItem>
            </controls:Pivot>
        </Grid>
  9. Después de la sección <!–Panorama item two–>, agrega el siguiente controlPanoramaItem usando este código:

    <!--Pivot item three.-->
    <controls:PivotItem Header="item3">
    <Grid/>
    </controls:PivotItem>

En cada ítem puedes verlo como paginas independientes que puedes implementar tus distintas interfaces. Lo común es utilizarlos para re-organizar listas de elementos de acuerdo a un cierto criterio, como la aplicación de correo electrónico, o mensajerías, etc.

Autor: Jorge Ramirez
Publicación original –> http://j.mp/XIeCFv
Fuente 1 –> http://j.mp/VMFGhq
Fuente 2 –> http://j.mp/UyerGH

Anuncios

1 comentario

Archivado bajo Windows Phone

Una respuesta a “Generation App – Día 5 – Controles Panorama y Pivot

  1. Pingback: Con Generation App nunca fue tan fácil desarrollar para Windows Phone « El Blog de MSP para Latinoamerica [BETA]

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s