Solución Reto Windows Phone: Mi primera interfaz Metro

En la solución de este reto vamos a crear una interfaz Metro muy sencilla que nos servirá para empezar a manejar los controles y coger práctica en la creación de interfaces de Windows Phone. La interfaz que vamos a hacer es la siguiente:

Para solucionar este reto necesitamos:

Visual Studio. Si ya tienes VS instalado perfecto, pero por si acaso, aquí tienes el enlace de descarga de la versión gratuita express o de la Ultimate Trial.

Windows Phone developer tools 7.1. Con esta descarga tendremos todo lo necesario para empezar a programar aplicaciones para los dispositivos con Windows Phone.

En el primer reto de Windows Phone aprendimos qué es una interfaz Metro y creamos nuestro primer proyecto para Windows Phone. También vimos los tipos de controles que podíamos utilizar y para qué servían. Ahora es el momento de añadirlos al proyecto para crear la interfaz que nos piden.

Como ya explicamos en el reto tendremos que crear un nuevo proyecto Windows Phone desde Visual Studio 2010, darle un nombre y una vez aceptado seleccionar que queremos programar para Windows Phone 7.1.

Cambiar título de aplicación y de página

Vamos a empezar a personalizar nuestra interfaz cambiando el título de la aplicación y de la página.

Pondremos como título de aplicación “Mi Primera Aplicación” y de título de página “Interfaz Metro”. Esto se hace cambiando la propiedad Text de los 2 TextBlock que tenemos en el StackPanel llamado TitlePanel.

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="Mi Primera Aplicación" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="Interfaz Metro" Margin="9,-7,0,0"Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

Añadir controles a la página

Ahora empezaremos a añadir controles al grid llamado ContentPanel que es donde pondremos los controles para crear la interfaz Metro.

Vamos a utilizar un StackPanel(recuadro amarillo) para organizar todos los elementos verticalmente y dentro de éste insertaremos más StackPanel(recuadros rojos) dividiéndolo en 5 partes.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
     <StackPanel >
                     <StackPanel></StackPanel>
                     <StackPanel></StackPanel>
                     <StackPanel></StackPanel>
                     <StackPanel></StackPanel>
                     <StackPanel></StackPanel>
     </StackPanel>
</Grid>

Dentro de esos StackPanel irán los distintos controles para crear una interfaz similar a la que tenemos que hacer. Los StackPanel de nombre, apellidos y descripción son 1 Texblock para mostrar el título y un TextBox para que podamos introducir el valor.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"><StackPanel >
        <StackPanel>
               <TextBlock Text="Nombre" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
               <TextBox Text="Jose V." TextWrapping="Wrap"/>
        </StackPanel>
        <StackPanel>
               <TextBlock Text="Apellidos" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
               <TextBox Text="Perona" TextWrapping="Wrap" />
        </StackPanel>
        <StackPanel></StackPanel>
        <StackPanel>
               <TextBlock Text="Descripción:" VerticalAlignment="Center" Style="{StaticResource PhoneTextSubtleStyle}"/>
               <TextBox Height="100" TextWrapping="Wrap"/>
        </StackPanel>
        <StackPanel></StackPanel>
</StackPanel>
</Grid>

El siguiente paso es añadir los RadioButton para la selección del sexo. Dentro del StackPanel correspondiente añadimos un TextBlock para el título y otro StackPanel con orientación horizontal para mostrar dentro los controles correctamente.

<TextBlock Text="Sexo" TextWrapping="Wrap"  Style="{StaticResource PhoneTextSubtleStyle}"/>
<StackPanel Margin="0,0,0,17" Orientation="Horizontal">
    <RadioButton Content="Hombre" />
    <RadioButton Content="Mujer" />
</StackPanel>

Ya sólo nos queda el StackPanel correspondiente a los botones. Pondremos el StackPanel con orientación horizontal, lo centraremos e insertaremos los controles de los botones.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
     <Button Content="Aceptar"/>
     <Button Content="Cancelar"/>
</StackPanel>

Para acabar pondremos un Margin y un Width a los StackPanels principales para mejorar el aspecto de nuestra aplicación.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel >
        <StackPanel Margin="0,0,0,20" Width="432">
               <TextBlock Text="Nombre" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
               <TextBox Text="Jose V." TextWrapping="Wrap"/>
        </StackPanel>
        <StackPanel Margin="0,0,0,20" Width="432">
               <TextBlock Text="Apellidos" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
               <TextBox Text="Perona" TextWrapping="Wrap"/>
        </StackPanel>
        <StackPanel Margin="0,0,0,20" Width="432">
               <TextBlock Text="Sexo" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
               <StackPanel Margin="0,0,0,17" Orientation="Horizontal">
                       <RadioButton Content="Hombre"/>
                       <RadioButton Content="Mujer"/>
               </StackPanel>
        </StackPanel>
        <StackPanel Margin="0,0,0,20" Width="432" Orientation="Vertical">
               <TextBlock Text="Descripción:" VerticalAlignment="Center" Style="{StaticResource PhoneTextSubtleStyle}"/>
               <TextBox Height="100" TextWrapping="Wrap"  />
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
               <Button Content="Aceptar"/>
               <Button Content="Cancelar"/>
        </StackPanel>
</StackPanel>
</Grid>