Convirtiendo un Button en un Tile para Windows Phone

Desarrollando con Windows Phone lo primero que uno hace es comenzar a copiar las interfaces de usuario de aplicaciones ya creadas como el People Hub o el Pictures hub y lo primero que deseamos crear es un Tile.

Mas de uno habra usado un control Border para crearlo pero si como yo después desean aplicar un Tilt Effect (si, ese que pasa cuando presionas el tile y se ve como es presionado) nos dara problemas si no sabemos animar con XAML.

Para salir al paso tener nuestro Tile con Tilt Effect vamos a hacer 2 cosas:

1. Crear un Style para convertir el Button en Tile
2. Utilizar una clase del Windows Phone Toolkit para agregar el TiltEffect

El primer paso es crear un Style creando en nuestro proyecto un archivo llamado UIRes.xaml con el siguiente codigo:

<ResourceDictionary   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
    <Style x:Key="BX_TileStyle" TargetType="Button">
        <Setter Property="Width" Value="170"></Setter>
        <Setter Property="Height" Value="170"></Setter>
        <Setter Property="Width" Value="170"></Setter>
        <Setter Property="Margin" Value="0,0,10,10"></Setter>
        <Setter Property="Padding" Value="5,0,0,5"></Setter>        
        <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
        <Setter Property="VerticalContentAlignment" Value="Bottom"></Setter>
        <Setter Property="FontSize" Value="20"></Setter>
        <Setter Property="BorderThickness" Value="0"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Rectangle Fill="{TemplateBinding Background}" />
                        <Border VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                Padding="{TemplateBinding Padding}">
                            <ContentPresenter Content="{TemplateBinding Content}" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Revisando el nodo raiz ResourceDictionary descubrimos que es un archivo de recursos que para los nuevos en WPF es algo parecido al CSS del Html ya que con este archivo se pueden describir apariencia, comportamiento, animacion y hasta redefinir los controles como es nuestro caso.

Primero vemos la definicion de Style y vemos que el TargetType sera un control Button de esta forma lo limitamos a que solo los botones puedan usar este Style, después vemos etiquetas Setter que lo que hacen es definir valores por default del boton al que se le asignara el estilo.

Al fondo encontramos un Setter a la propiedad Template que es donde re definiremos la forma en que el boton sera creado reemplazando su forma actual con un Grid que contiene un Rectangle que sera el fondo de nuestro Tile y un Border que nos ayudara a darle posicion al ContentPresenter.

Aqui lo importante es ver los TemplateBinding ya que estos bindings enlazan las propiedades que definimos en el boton con el nuevo aspecto, por ejemplo el Background que definamos en el boton sera puesto como el background del rectangulo y asi con las posiciones, padding y contenido.

Despues de haber creado el Style lo que sigue es dar de alta el recurso en la ApplicationPage con el siguiente codigo:

    <phone:PhoneApplicationPage.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </phone:PhoneApplicationPage.Resources>

Y finalmente a nuestro boton hay que agregarle el nuevo estilo con un

<Button Content="Characters" Style="{StaticResource BX_TileStyle}" />

abajo podemos ver el antes y después de los botones.

Ahora el paso 2, para crear el TiltEffect insertamos en nuestro proyecto el archivo TiltEffect.cs que podemos encontrar aqui y después simplemente a nuestra ApplicationPage le agregamos el siguiente codigo en el nodo phone:PhoneApplicationPage:

xmlns:local="clr-namespace:ControlTiltEffect"
    local:TiltEffect.IsTiltEnabled="True"

Voila ya tienen Tiles que se comportan como las de los hubs, aqui lo hermoso del asunto es que pueden cambiar el ancho del boton para que sean large tiles y pueden modificar tanto el texto como el fondo del boton sin modificar el Style.

Espero les sea de utilidad para mejorar la experienca de sus aplicaciones y no duden en dejar sus preguntas o comentarios.