Consejo Silverlight del día #4 : Construyendo la Interfaz del Juego con el control Grid

Arturo Molina — Tue, 24 Feb 2009 19:06:54 +0000

La siguiente es una traducción de un post de la serie Silverlight Tips of the Day del blog de Mike Snow. Pueden encontrar el post original aquí:

[Read in English]

Silverlight provee un control que permite planear fácilmente el diseño de la interfaz de usuario para tu juego. Este control permite incrustar grids dentro de grids, similar a lo que Word te permite hacer con sus tablas.

Antes de comenzar a crear la interfaz de nuestro juego “Fireball”, echemos un vistazo al resultado final:

La interfaz de usuario para tu juego se encuentra en el archivo Page.xaml. Lo primero que tienes que hacer, anter de agregar el control , es cambiar los valores de Width y Height del control de Silverlight. En este caso, 656×480. Esto lo logramos agregando dichos atributos al UserControl de Page.xaml.

<UserControl x:Class="SilverlightTip004.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="656" Height="480">

Usaremos los siguientes attributos en el :

Background: El color de fondo del control. Establece esto como “Black” (Negro).
ShowGridLines: Esto es para propósitos de diseño. Por tanto, solo puede tener lineas punteadas. Por ahora, lo pondremos como “True”, pero una vez que termines no olvides cambiarlo a “False” o tendrás unas lineas horribles en tu interfaz.

Para este ejemplo, tendremos 3 columnas. En la segunda columna pondremos otro control con 3 filas.

Columna 1: Esta será la barra del borde izquierdo.

Columna 2: Esta es otro con tres filas:

Fila 1: Banner que dice “Silverlight Fireball”.
Fila 2: Área del mapa.
Fila 3: Ventana de chat y otros botones.

Columna 3: Esta será la barra del borde derecho.

Para crear las 3 columnas, agregamos el siguiente XAML a Page.xaml:

<Grid x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8" />
<ColumnDefinition Width="640" />
<ColumnDefinition Width="8" />
</Grid.ColumnDefinitions>
</Grid>

Estableceremos la primera y última columna con Width = “8” debido a que sólo es un borde estrecho. La segunda columna le pondremos Width = “640” debido a que es el espacio para el banner, mapa y ventana de chat.

Si observas la ventana de Preview, esto es lo que verás:

Ahora, pongamos otro en la segunda columna para que tengamos las 3 filas que mencionamos antes. Para esto, en este segundo especificamos Grid.Column = 1 (Índice base cero). Esto le dice a Silverlight que ponga este control en la segunda columna del primer .

<Grid x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8" />
<ColumnDefinition Width="640" />
<ColumnDefinition Width="8" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="323" />
<RowDefinition Height="106" />
</Grid.RowDefinitions>
</Grid>
</Grid>

Establece la primera fila con Height = 51, esta es la altura del banner.

Establece la segunda fila con Height = 323, esta es la altura del mapa.

Establece la tercera fila con Height = 106, esta es la altura de la ventana de chat.

Voila:

Ahora, agreguemos gráficos!

Paso 1: En el explorador de la solución, da clic derecho sobre el nodo del proyecto Fireball (*Ojo, este no es el proyecto web) y selecciona “Create New Folder”. Crea un nuevo folder llamado images.

Paso 2: Da clic en las siguientes imágenes y guárdalas en el folder images que acabas de crear.

Paso 3: Da clic derecho en el folder images (*En Visual Studio) y selecciona Add –> Existing Item. Agrega todas las imágenes de ese folder al proyecto, de otra manera no se cargarán ni se desplegarán. Esto quiere decir que no es suficiente tener el archivo en el folder, tienes que agregarlos explícitamente al proyecto o no sabrá que está ahí.

Paso 4: Añade las imágenes a tu grid. Por cada uno de estos elementos gráficos, declararemos un control . Todos los controles en Silverlight te permiten especificar en cuál fila y cuál columna serán desplegados. La propiedad Canvaz.ZIndex especifica el orden de dibujado. Como queremos que el borde siempre esté hasta arriba elegiremos el valor “1001”. Para nuestras barras laterales tenemos:

<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column_4.png" />
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column_4.png" />

Esto pondrá la imagen del borde lateral en la 1ra y 3er columna del primer .

El panel superior y el banner de Silverlight Fireball están agrupados en un objeto Canvas y son colocados en la primera fila del segundo . Puedes posicionar la imagen de Silverlight Fireball usando los atributos Canvas.Top y Canvas.Left. De forma predeterminada, estos atributos son cero si no los declaras.

<Canvas Canvas.ZIndex="1001" Background="Black" x:Name="logoCanvas" Canvas.Top="0" Grid.Row="0">
<Image Source="images/toppanel_2.png" />
<Image Canvas.Top="1" Canvas.Left="0" Source="images/SilverlightFireball.png" />
</Canvas>

La ventana de chat está compuesta de varias partes como podemos observar:

<Canvas Canvas.ZIndex="1001" Background="Black" Canvas.Top="0" Grid.Row="2" Grid.Column="0">
<Image Source="images/panel_2.png" />
<Image Canvas.Top="30" Canvas.Left="20" Source="images/chatwindow_4.png" />
<Button Canvas.Top="45" Canvas.Left="570" Width="50" Background="Brown" Content="Send" />
</Canvas>

Para terminar, el XAML completo de Page.xaml debería verse algo así:

<UserControl x:Class="SilverlightTip004.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="656" Height="480">
<Grid x:Name="LayoutRoot" Background="Black" ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8" />
<ColumnDefinition Width="640" />
<ColumnDefinition Width="8" />
</Grid.ColumnDefinitions>
<Image Canvas.ZIndex="1001" Grid.Column="0" Source="images/column_4.png" />
<Grid Grid.Column="1" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="51" />
<RowDefinition Height="323" />
<RowDefinition Height="106" />
</Grid.RowDefinitions>
<Canvas Canvas.ZIndex="1001" Background="Black" x:Name="logoCanvas" Grid.Row="0">
<Image Source="images/toppanel_2.png" />
<Image Canvas.Top="2" Canvas.Left="0" Source="images/SilverlightFireball.png" />
</Canvas>
<Canvas x:Name="MapCanvas" Grid.Row="1">
<TextBlock Foreground="AliceBlue" FontSize="20">El mapa va aqui.</TextBlock>
</Canvas>
<Canvas Canvas.ZIndex="1001" Background="Black" Grid.Row="2">
<Image Source="images/panel_2.png" />
<Image Canvas.Top="30" Canvas.Left="20" Source="images/chatwindow_4.png" />
<Button Canvas.Top="45" Canvas.Left="570" Width="50" Background="Brown" Content="Send" />
</Canvas>
</Grid>
<Image Canvas.ZIndex="1001" Grid.Column="2" Source="images/column_4.png" />
</Grid>
</UserControl>

* Nota del traductor

ACTUALIZACIÓN: El código lo pueden descargar de la sección de contenido en La Liga Silverlight. (O directamente dando clic aquí).

La Liga SilverlightImage | La Liga Silverlight

Consejo Silverlight del día #4 : Construyendo la Interfaz del Juego con el control Grid