Windows Phone 7 – Simon dice parte 1

Creando la Interfaz

Hace tiempo que no escribía nada, andaba algo ocupado con la escuela y con unos proyectos pero aquí estoy de nuevo. En este tiempo participé como instructor en dos talleres, uno de WPF y uno de Windows Phone 7, así que creé varias prácticas sencillas que pienso ir escribiendo poco a poco en el blog. En el último taller creamos un pequeño juego de Simon Dice. Para aquellos que no conozcan este juego, pueden jugar una versión online aquí.

Lo que nosotros haremos lucirá como esta imagen, en ella se pueden ver:

1. Los cuatro botones: verde, rojo, azul y amarillo
2. Un botón para iniciar el juego
3. Un botón para cargar una partida pasada

En ésta simple práctica cubriré la creación de la interfaz pero más adelante iré cubriendo la creación de las animaciones, la lógica del juego, la manipulación de los eventos y la utilización de isolated storage para guardar y cargar el estado del juego.

Para realizar ésta práctica voy a utilizar Expression Blend 4 Beta con el add in para Windows Phone 7 y a Visual Studio 2010.

Empezaremos creando la interfaz del juego:

1. El inicio. Abre Expression Blend y crea un proyecto para Windows Phone: Selecciona File > New Project. En las opciones que se abren selecciona Windows Phone > Windows Phone Application y dale un nombre al proyecto:
2. Empezaremos cambiando el título de la ventana: Da doble click donde dice “page title” y escribe “Simon Dice”
3. Da click en el icono que aparece a la derecha. Esta opción permite ver la vista de diseño junto con la vista de XAML.
4. Busca a un Grid con el nombre de ContentGrid, aquí es donde debe de ir el contenido de la aplicación.

   

5. Agregaremos un Canvas a este Grid, escribiendo el código:

   <Grid x:Name="ContentGrid" Grid.Row="1">
       <Canvas Margin="0,8,8,218" Width="430" Height="430">
       </Canvas>
   </Grid>
   

   Esto se puede realizar de manera visual dando click en Assets en la barra de herrramientas, buscando Canvas y agregándolo en vista de diseño. Pero para efectos de este tutorial, me mantendré un poco apegado al código. De manera que todos acabemos con la misma interfaz

6. Dentro del Canvas agregamos cuatro cuadrados,

   <Canvas Margin="0,8,8,218" Width="430" Height="430">
                   <Rectangle x:Name="Green" Fill="#FF077002" Height="215" Stroke="Black" Width="215" RadiusX="10" RadiusY="10" StrokeThickness="10"/>
                   <Rectangle x:Name="Yellow" Fill="#FF687002" Height="215" Stroke="Black" Width="215" RadiusX="10" RadiusY="10" StrokeThickness="10" Canvas.Top="215"/>
                   <Rectangle x:Name="Blue" Fill="#FF021670" Height="215" Stroke="Black" Width="215" RadiusX="10" RadiusY="10" StrokeThickness="10" Canvas.Left="215" Canvas.Top="215"/>
                   <Rectangle x:Name="Red" Fill="#FF700202" Height="215" Stroke="Black" Width="215" RadiusX="10" RadiusY="10" StrokeThickness="10" Canvas.Left="215"/>
               </Canvas>
   

   Estos son sencillamente cuatro rectangulos que se utilizarán como los botones del juego. Yo les dí los colores que muestro en el código, esquinas  circulares de radio 10 y un borde de 10, pero puedes cambiar el diseño a tu gusto, teniendo en cuenta que es importante mantener los nombres de Green, Yellow, Blue y Red para efecto de los siguientes tutoriales en los que le metamos la lógica al juego.

7. Agregamos dos botones:

   <Button Click="Iniciar_Click" x:Name="Iniciar" Content="Iniciar" Height="76" Margin="21,0,0,74" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="202"/>
   <Button Click="Cargar_Click" x:Name="Cargar" Content="Cargar" Height="76" Margin="0,0,29,74" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="202"/>
   

   Uno lo utilizaremos para iniciar un juego nuevo y el otro para cargar una partida desde el isolated storage

8. Por último agregamos un textblock que utilizaremos para para contar los movimientos actuales del juego:

   <TextBlock x:Name="movesCounter" Height="102" Margin="0,0,0,74" TextWrapping="Wrap" Text="1" VerticalAlignment="Bottom" FontSize="66.667" TextAlignment="Center" Visibility="Collapsed"/>
   

Terminando esto debemos de tener como resultado la imagen que se muestra al inicio del post. Con esto ya tenemos donde empezar. En el siguiente post crearemos las animaciones de cada rectangulo para poder iniciar con la programación del juego.