Windows Phone Tips & Tricks. Adaptando nuestro intefaz al tema del teléfono

[Nota: Este artículo pertenece a la serie de Windows Phone Tips & Tricks de MSDN España]

Hola,

El usuario de Windows Phone puede cambiar el tema de su teléfono y elegir el color de Fondo “oscuro” o “claro”, así como el Color de énfasis (o Accent Color), que es el color que tendrán los Live Tiles de su pantalla principal.

Nosotros a la hora de diseñar nuestra app podemos optar por utilizar ese Fondo y Color de énfasis, adaptándonos a la selección de tema del usuario. La siguiente imagen de ejemplo muestra un fragmento de la página de una app que hace esto mismo (parte de arriba con fondo “oscuro” y color de énfasis “rojo”, y parte de abajo con fondo “claro” y color de énfasis “esmeralda”) :

Iconos de colores

Lo primero que vemos que cambia de color según el tema es el icono del título y el título en sí (“MI MALETA”). En una página como la que te viene por defecto al crear con Visual Studio un proyecto de app de Windows Phone de tipo Pivot, el título es parte del control Pivot. En el siguiente XAML de ejemplo puedes ver cómo he modificado el título del Pivot para incluir el icono y hacer que el icono y el título cambien de color según el tema:

<phone:PhoneApplicationPage
...
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
...
>

    <!-- Contenido de la página -->
    <Grid x:Name="LayoutRoot">

        <!-- Pivot -->
        <phone:Pivot>

            <!-- Título de la página -->
            <phone:Pivot.Title>
                <StackPanel Orientation="Horizontal" >
                    <Rectangle
                        Fill="{StaticResource PhoneForegroundBrush}"
                        Margin="-2,-10,10,0"
                        Height="48" Width="48">
                        <Rectangle.OpacityMask>
                            <ImageBrush ImageSource="/Assets/applicationiconsmall.png" Stretch="Fill"/>
                        </Rectangle.OpacityMask>
                    </Rectangle>
                    <TextBlock Text="MI MALETA" FontSize="{StaticResource PhoneFontSizeMedium}" FontWeight="Medium"/>
                </StackPanel>
            </phone:Pivot.Title>

            <!-- Pivot de "crear la lista" -->
            <phone:PivotItem Header="crear la lista">
...
</phone:PhoneApplicationPage>

El TextBox con el texto del título hereda el color de fuente por defecto de la página, que está definido como Foreground=”{StaticResource PhoneForegroundBrush}” en phone:PhoneApplicationPage. PhoneForegroundBrush es un recurso de la app que hará que el texto cambie de color según el tema elegido por el usuario. Si el tema tiene Fondo “oscuro”, el texto será blanco. Si el tema tiene Fondo “claro”, el texto será negro.

Para conseguir el mismo efecto con el icono del título sin necesidad de tener un icono de cada color y cambiar de uno a otro por código, hacemos lo siguiente: primero conseguimos el icono deseado, que tendrá cualquier color (blanco por ejemplo) y fondo transparente (“/Assets/applicationiconsmall.png” en este ejemplo, uno de los recursos de mi app). En el XAML creamos un rectángulo (Rectangle) del color que queramos que tenga el icono, en este caso el mismo que el texto del título, Fill=”{StaticResource PhoneForegroundBrush}; así el color cambiará en función del Fondo del tema. Después a ese rectángulo le aplicamos una máscara de opacidad (OpacityMask) con el icono elegido, que hará que sólo se pinte la parte del rectángulo cubierta por la parte no transparente de nuestro icono. Así conseguimos un dibujo con la misma forma que nuestro icono y con el color deseado.

Respecto al fondo de la página, tal cual está por defecto este XAML en el que no definimos ningún color especial ni foto de fondo, éste se pondrá negro cuando el Fondo del tema sea “oscuro” y blanco cuando el Fondo sea “claro”.

Por otro lado, en este ejemplo utilizo un control de tipo LongListSelector dentro del control Pivot. El LongListSelector que he utilizado es el de Windows Phone 8. Este LongListSelector contiene una lista de elementos agrupados. En la imagen anterior la cabecera de un grupo es “ropa” y un miembro del grupo es “camisetas”. Además, el elemento “camisetas” está seleccionado como indica la marca del mismo color que la cabecera del grupo. A los colores de este LongListSelector también le afecta el cambio de tema como puedes ver en la imagen anterior.

A la cabecera de los grupos les defino el color de fondo como Background=”{StaticResource PhoneAccentBrush}”. PhoneAccentBrush es un recurso de la app que equivale al color de énfasis del tema elegido por el usuario. Ahora, para poner la marca (que en este ejemplo indica que un elemento está seleccionado para ser editado) de este mismo color, lo hacemos de la misma manera en la que hemos pintado el icono del título del color que queríamos: con un rectángulo y una máscara de opacidad. Este sería el XAML correspondiente a la plantilla de un elemento del LongListSelector:

<!-- Plantilla de los ítem del LongListSelector -->
<DataTemplate x:Key="LongListSelector_ItemTemplate">
	<StackPanel
		Margin="0,-8,0,17"
		VerticalAlignment="Top"
		Orientation="Horizontal">
		<Rectangle
			Fill="{StaticResource PhoneAccentBrush}"
			Margin="10,-5,-10,-10"
			Width="48"
			Visibility="{Binding IsEditable, Converter={StaticResource BooleanToVisibilityConverter}}">
			<Rectangle.OpacityMask>
				<ImageBrush ImageSource="/Assets/MenuItems/appbar.check.png" Stretch="Fill"/>
			</Rectangle.OpacityMask>
		</Rectangle>
		<TextBlock
			Text="{Binding Name}"
			Padding="24,0,0,0"
			FontSize="{StaticResource PhoneFontSizeLarge}"/>
	</StackPanel>
</DataTemplate>

El texto del elemento heredará el color por defecto de la página (que ya hemos visto que depende del Fondo del tema), y el color de la marca dependerá del Color de énfasis.

Espero que te sea de utilidad.

Un saludo,

Alejandro Campos Magencio (@alejacma)

PD: Mantente informado de todas las novedades de Microsoft para los desarrolladores españoles a través del Twitter de MSDN, el Facebook de MSDN, el Blog de MSDN y la Newsletter MSDN Flash.

About these ads

Un pensamiento en “Windows Phone Tips & Tricks. Adaptando nuestro intefaz al tema del teléfono

  1. Pingback: Tips & Tricks de desarrollo para Windows Phone - MSDN España - Site Home - MSDN Blogs

Deja un comentario

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