Este artículo fue publicado originalmente en Maromas Digitales y es una traducción aproximada del artículo 31 Days of Windows Phone | Day #5: System Theming por Jeff Blankenburg publicado el 5 de octubre del 2010

Este artículo es el Día #5 de una serie llamada los 31 días de Windows Phone.

Ayer discutí la orientación del dispositivo y cómo podemos ajustar la aplicación a la posición del teléfono escogida por el usuario. Hoy vamos a enfocarnos en cómo adaptarnos a cambios en el tema y colores de la decoración.

Temas oscuros y claros

Si todavía no lo han probado, es posible cambiar el juego de colores del teléfono de oscuro a claro. También se puede definir un color que sirva como énfasis decorativo. Estos son ejemplos de ambos temas en la misma aplicación:

Colores de énfasis

Los usuarios también tienen la opción de escoger un color como acento o énfasis decorativo global. El sistema operativo ofrece diez colores enérgicos y brillantes de los cuales escoger. Estos colores son usados ampliamente en la pantalla de inicio del teléfono, pero también se les puede sacar provecho en nuestras aplicaciones. He aquí la lista de colores:

Con respecto a los valores predeterminados

Hay veces que al crear la aplicación surge el deseo de cambar algunos colores. Los animo a hacerlo. Hagan su aplicación única. Pero entre más modificaciones hagan, más van a querer hacer cambios en TODO LO DEMÁS. No estoy diciendo que sea malo usar texto oscuro en un fondo claro (o viceversa). Lo que digo es que si están por hacer algo blanco de forma explícita, consideren con cuidado cómo se va a ver si el teléfono tiene asignado el tema de colores claros. (Probablemente termine siendo invisible.) Afortunadamente existe una forma muy simple de resolver el problema y su nombre es Expression Blend 4.

Pestaña del dispositivo en Blend 4

Primero, hay que abrir el proyecto en Expression Blend. La manera más fácil de hacerlo es con un clic derecho en el proyecto de Visual Studio y escogiendo Abrir en Expression Blend…

Una vez abierto se puede localizar la pestaña titulada Dispositivo. (MD: si no aparece, se puede desplegar usando el menú Ventana->Dispositivo). Tiene la siguiente apariencia:

Esta pestaña nos permite revisar en el área de diseño cómo se verán los diferentes temas y colores de énfasis, lo cual será sumamente importante cuando empecemos a USAR esos colores en nuestras aplicaciones. A modo de ejemplo, digamos que se quiere tener un color de fondo que coordine con el escogido por el usuario. Para esto voy a usar otra asombrosa característica de Blend 4: la sección de Recursos de color.

Recursos de color

Antes de que empiecen a llover comentarios como “Yo soy programador, ¿por qué tengo que usar Blend?” déjenme aclarar que todo esto puede ser hecho en Visual Studio 2010. No más que es MUCHO, MUCHO más difícil. Yo tiendo a optar por el camino más fácil cuando no hay ventajas obvias en usar un método más duro.

Windows Phone 7 tiene un amplio juego de colores predeterminados que utiliza a menos que sean alterados intencionalmente. Lo mejor, en la mayoría de los casos, es conocer bien cuáles son esos colores. En las ilustraciones abajo pueden ver que el color de énfasis, PhoneAccentColor, y el de fondo, PhoneBackgroundColor, cambian según el tema y color escogidos en la pestaña Dispositivo. La primera es Oscuro/Azul y la segunda es Claro/Naranja.

Mediante enlazar los colores de nuestra aplicación a valores del sistema logramos que se adapte instantáneamente a cualquier escogencia del usuario. En el ejemplo siguiente verán que he añadido un rectángulo con relleno graduado que va desde PhoneBackgroundColor a PhoneAccentColor. También configuré el título para que usara el color de énfasis.

<Grid x:Name="LayoutRoot"
      Background="Transparent">
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>

  <Rectangle Stroke="Black"
             Grid.RowSpan="2">
    <Rectangle.Fill>
      <LinearGradientBrush EndPoint="0.5,1"
                              StartPoint="0.5,0">
        <GradientStop Color="{StaticResource
                              PhoneBackgroundColor}"
                      Offset="0" />
        <GradientStop Color="{StaticResource PhoneAccentColor}"
                      Offset="1" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>

  <!--TitlePanel contiene el nombre de la aplicación-->
  <!-- y el título de la página-->
  <StackPanel x:Name="TitlePanel"
              Grid.Row="0"
              Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle"
               Text="BLANKENSOFT"
               Style="{StaticResource PhoneTextNormalStyle}" />
    <TextBlock x:Name="PageTitle"
               Text="temas decorativos"
               Margin="9,-7,0,0"
               Style="{StaticResource PhoneTextTitle1Style}">
      <TextBlock.Foreground>
        <SolidColorBrush Color="{StaticResource
                                 PhoneAccentColor}" />
      </TextBlock.Foreground>
    </TextBlock>
  </StackPanel>

  <!--ContentPanel. Colocar aquí el contenido adicional-->
  <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0">
    <TextBlock Height="601"
                TextWrapping="Wrap"
                HorizontalAlignment="Left"
                Margin="0,6,0,0"
                x:Name="textBlock1"
                Text="Lorem ipsum dolor sit amet, ..."
                VerticalAlignment="Top"
                Width="468" />
  </Grid>
</Grid>

Y el resultado de usar las combinaciones de color y tema citadas anteriormente (lo único que cambió entre ambas capturas es el tema usado y el color de énfasis):

Descargando el código

Bajen el ejemplo y ábranlo en Expression Blend. Jueguen con los Recursos de color. Experimenten con la pestaña del Dispositivo para ver los cambios que se producen. Definitivamente les va a hacer la vida más fácil.

Jeff Blankenburg

Ver Demo

Paso 1.- Para comenzar creamos un proyecto en Expression Blend, en el cual dentro del layout root  dibujaremos una línea con la herramienta “Pencil” , o “Pen”.

Nota:   la línea que dibujemos será la “ruta” que queremos que nuestro objeto recorra en un determinado momento.

Paso 2.- Seleccionamos la línea o “Path” que acabamos de trazar  y con el botón derecho Seleccionamos en la Opción Path  el atributo “Make Layout Path”. (2.1)

2.1

2.2

Esto nos generara Un PathListBox y un Path (2.2).   El Path es la línea que dibujamos desde un inicio, y el PathListBox  será el contenedor

donde estará el objeto que seguirá la guía trazada.

Paso 3.- Seleccionamos el PathListBox generado y agregamos el objeto que tendrá movimiento al PathListBox., Para este ejemplo agregare una Imagen con la figura de  un carrito el cual simulara seguir

la ruta trazada en el punto 1.

3.1

Asegúrate que la imagen se agrego dentro del PathListBox.

Paso 4.- Agregaremos un StoryBoard al proyecto, y seleccionando nuestro PathListBox agregamos dos keyframes.

El primer KeyFrame lo posicionamos en el segundo cero de la animación, y en nuestro panel de propiedades buscamos la propiedad “Start” la cual esta ubicada en el panel llamado “Layout Path”,

y establecemos el valor cero porcentual.

El segundo keyFrame lo posicionamos en el segundo en el cual queremos que el carrito llegue al final de su recorrido.

Y en nuestro panel de propiedades establecemos el valor cien porcentual en la propiedad Start.

Paso 5.

Para disparar la animación que acabamos de generar ,vamos a agregar un Behavior (Comportamiento)   llamado  “ControlStoryboardAction”.

Seleccionamos la Imagen y damos doble click sobre el Behavior “ControlStoryboardAction”

En nuestro panel de propiedades Establecemos  el “EventName”  –> “MouseLeftButtonDown”   y

“StoryBoard” – >  el nombre que hayamos asignado a la animación creada en el paso 4.

Ejecutamos y  al dar click sobre la imagen  del carrito podremos ver con este sigue la ruta que le establecimos.

Ver Demo

Descargar Código aquí

Espero les sea de utilidad.

Saludos.

No duden en echarle un vistazo.

• 3 licencias de Visual Studio 2008 Professional Edition
• 1 licencia de Epression Studio 3 (Incluyendo Blend, Sketchflow y Web)
• 2 licencias de Expression Web 3
• 4 licencias por procesador de Windows Web Server 2008 R2
• 4 licencias pro procesador de SQL Server 2008 Web Edition
• Panel de Control DotNetPanel

Las licencias de Windows Server y SQL Sever pueden usarse tanto para ambientes de desarrollo como de producción.

Todo lo que necesitan es ser desarrolladores independientes o ser una compañía de 10 o menos empleados.

Después de 3 años, no tiene olbigación alguna de pagar el software, solo un cargo de $100 dlls al final del programa. Si deciden seguir en el programa, este tendrá un costo de $999 dlls por año. Alternativamente, pueden quedarse sólo con las licencias de producción (una de Windows Web Server y otra de SQL Server) por $199 dlls al año.

Para enrolarse solo necesitan entrar a la página del programa en donde se les solicitará unos datos sobre su compañía y un referal code que pueden solicitar a webspark@microsoft.com

No lo duden más y ¡enrólense!