Windows Phone. Personalización control Panorama.

En esta entrada vamos a ver como personalizar el control panorama de nuestras aplicaciones con pocas líneas de código.

Antes de continuar recordemos que es el control Panorama.

El control Panorama nos permite añadir más contenido del que se puede llegar a mostrar en pantalla. Accedemos al contenido no visible desplazandonos horizontalmente dando una sensación de continuidad.

Tenemos varios ejemplos de panorama integrados en el sistema en los Hub de imágenes, el Marketplace, los contactos, etc.

Sin duda, aporta un apartado visual muy atractivo y a la vez consigue que el acceso a los elementos no visibles del control sea muy intuitivo. Aporta un soplo de aire fresco en la creación de interfaces para dispositivos móviles.

Vamos a crear un nuevo proyecto de ejemplo. El tipo de proyecto que seleccionaremos es “Windows Phone Panorama Application“:

Nota: Es muy importante especificar que no es un requisito elegir este tipo de proyecto para poder usar el control Panorama. Lo podemos usar partiendo de otras plantillas sin problemas añadiendolo a una página. Sencillamente, este tipo de proyecto nos proporciona por defecto ya un control Panorama con una implementación de la infraestructura del patrón MVVM para el acceso a datos (hablaremos largo y tendido de este patrón en futuras entradas).

Una vez creado el proyecto, veremos la vista de diseño junto a la vista de XAML. El XAML correspondiente al control Panorama que nos incluye la plantilla de manera predeterminada es:

<!--Control Panorama-->
<controls:Panorama Title="mi aplicación">
     <controls:Panorama.Background>
          <ImageBrush ImageSource="PanoramaBackground.png"/>
     </controls:Panorama.Background>

     <!--Elemento Panorama uno-->
     <controls:PanoramaItem Header="primer elemento">
          <!--Lista de líneas dobles con ajuste de texto-->
          <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
               <ListBox.ItemTemplate>
                    <DataTemplate>
                         <StackPanel Margin="0,0,0,17" Width="432" Height="78">
                              <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                              <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                         </StackPanel>
                    </DataTemplate>
               </ListBox.ItemTemplate>
          </ListBox>
     </controls:PanoramaItem>

     <!--Elemento Panorama dos-->
     <!--Use 'Orientation="Horizontal"' para habilitar un panel que dispuesto horizontalmente-->
     <controls:PanoramaItem Header="segundo elemento">
          <!--Lista de líneas dobles con marcador de posición de imagen y ajuste de texto-->
          <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Items}">
               <ListBox.ItemTemplate>
                    <DataTemplate>
                         <StackPanel Orientation="Horizontal" Margin="0,0,0,17">
                              <!--Reemplazar el rectángulo por la imagen-->
                              <Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>
                              <StackPanel Width="311">
                                   <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                                   <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
                              </StackPanel>
                         </StackPanel>
                  </DataTemplate>
              </ListBox.ItemTemplate>
         </ListBox>
    </controls:PanoramaItem>

</controls:Panorama>

Lo primero que vamos a personalizar es la cabecera del propio Panorama:

<controls:Panorama.Title>
     <StackPanel x:Name="TitlePanel" Orientation="Horizontal" Margin="0,15,0,0">
          <Image x:Name="image" Height="160" Source="Imgs/Logo.png" Stretch="Fill" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="160" Margin="5,0,5,30" RenderTransformOrigin="0.5,0.5" />
          <TextBlock Text="Panorama" FontFamily="Segoe WP Black" Foreground="White" VerticalAlignment="Stretch"/>
          <TextBlock Text="Personalizado" FontFamily="Segoe WP Black" Foreground="Red"/>
     </StackPanel>
</controls:Panorama.Title>

De esta forma tan sencilla logramos modificar la cabecera del control para añadir imágenes o textos de diferente color por ejemplo. Para evitar tener duplicada la asignación de la propiedad Title se debe borrar la propiedad Title que ya estaba establecida:

<controls:Panorama Title="mi aplicación">

También podemos personalizar las cabeceras de cada PanoramaItem para añadir una imágen o un botón por ejemplo. Para ello debemos modificar el template correspondiente a la cabecera del PanoramaItem (HeaderTemplate):

<controls:PanoramaItem.HeaderTemplate>
     <DataTemplate>
          <StackPanel Orientation="Horizontal">
               <TextBlock Text="3º elemento" FontSize="60" />
               <Button Content="Test" Background="Red" Width="100" Height="100" BorderThickness="0" Click="Button_Click"/>
          </StackPanel>
     </DataTemplate>
</controls:PanoramaItem.HeaderTemplate>

En este ejemplo se ha añadido un botón a la derecha del texto correspondiente a la cabecera. Algo muy útil para botones de configuración o información correspondiente al contenido del PanoramaItem.

Puedes ver a continuación el resultado conseguido con los cambios realizados:

También puedes descargar el código fuente del ejemplo explicado en esta entrada.

Espero que el artículo os sea de utilidad. Cualquier tipo de duda o sugerencia la podéis dejar plasmada en los comentarios de la entrada. En futuras entradas seguiremos analizando todas las posibilidades que nos brinda en control Panorama.

Más información:

Blog MSDN España: Reto Windows Phone: Control Panorama

Xamlgeek.net: Custom Title in a Windows Phone Panorama Control

3 pensamientos en “Windows Phone. Personalización control Panorama.

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