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í:
Silverlight provee un control <Grid> 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 <Grid>, 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.
|
1 |
<UserControl x:Class=<span style="color: #006080">"SilverlightTip004.Page"</span> |
|
1 |
xmlns=<span style="color: #006080">"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span> |
|
1 |
xmlns:x=<span style="color: #006080">"http://schemas.microsoft.com/winfx/2006/xaml"</span> |
|
1 |
Width=<span style="color: #006080">"656"</span> Height=<span style="color: #006080">"480"</span>> |
Usaremos los siguientes attributos en el <Grid>:
- 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 <Grid> con 3 filas.
Columna 1: Esta será la barra del borde izquierdo.
Columna 2: Esta es otro <Grid> 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:
|
1 |
<Grid x:Name=<span style="color: #006080">"LayoutRoot"</span> Background=<span style="color: #006080">"Black"</span> ShowGridLines=<span style="color: #006080">"True"</span>> |
|
1 |
<Grid.ColumnDefinitions> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"8"</span> /> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"640"</span> /> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"8"</span> /> |
|
1 |
</Grid.ColumnDefinitions> |
|
1 |
</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 <Grid> en la segunda columna para que tengamos las 3 filas que mencionamos antes. Para esto, en este segundo <Grid> especificamos Grid.Column = 1 (Índice base cero). Esto le dice a Silverlight que ponga este control <Grid> en la segunda columna del primer <Grid>.
|
1 |
<Grid x:Name=<span style="color: #006080">"LayoutRoot"</span> Background=<span style="color: #006080">"Black"</span> ShowGridLines=<span style="color: #006080">"True"</span>> |
|
1 |
<Grid.ColumnDefinitions> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"8"</span> /> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"640"</span> /> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"8"</span> /> |
|
1 |
</Grid.ColumnDefinitions> |
An error has occurred. Please try again later. |
|
1 |
<Grid Grid.Column=<span style="color: #006080">"1"</span> ShowGridLines=<span style="color: #006080">"True"</span>> |
|
1 |
<Grid.RowDefinitions> |
|
1 |
<RowDefinition Height=<span style="color: #006080">"51"</span> /> |
|
1 |
<RowDefinition Height=<span style="color: #006080">"323"</span> /> |
|
1 |
<RowDefinition Height=<span style="color: #006080">"106"</span> /> |
|
1 |
</Grid.RowDefinitions> |
|
1 |
</Grid> |
|
1 |
</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 <Image>. 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:
|
1 |
<Image Canvas.ZIndex=<span style="color: #006080">"1001"</span> Grid.Column=<span style="color: #006080">"0"</span> Source=<span style="color: #006080">"images/column_4.png"</span> /> |
An error has occurred. Please try again later. |
|
1 |
<Image Canvas.ZIndex=<span style="color: #006080">"1001"</span> Grid.Column=<span style="color: #006080">"2"</span> Source=<span style="color: #006080">"images/column_4.png"</span> /> |
Esto pondrá la imagen del borde lateral en la 1ra y 3er columna del primer <Grid>.
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 <Grid>. 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.
|
1 |
<Canvas Canvas.ZIndex=<span style="color: #006080">"1001"</span> Background=<span style="color: #006080">"Black"</span> x:Name=<span style="color: #006080">"logoCanvas"</span> Canvas.Top=<span style="color: #006080">"0"</span> Grid.Row=<span style="color: #006080">"0"</span>> |
|
1 |
<Image Source=<span style="color: #006080">"images/toppanel_2.png"</span> /> |
|
1 |
<Image Canvas.Top=<span style="color: #006080">"1"</span> Canvas.Left=<span style="color: #006080">"0"</span> Source=<span style="color: #006080">"images/SilverlightFireball.png"</span> /> |
|
1 |
</Canvas> |
La ventana de chat está compuesta de varias partes como podemos observar:
|
1 |
<Canvas Canvas.ZIndex=<span style="color: #006080">"1001"</span> Background=<span style="color: #006080">"Black"</span> Canvas.Top=<span style="color: #006080">"0"</span> Grid.Row=<span style="color: #006080">"2"</span> Grid.Column=<span style="color: #006080">"0"</span>> |
|
1 |
<Image Source=<span style="color: #006080">"images/panel_2.png"</span> /> |
|
1 |
<Image Canvas.Top=<span style="color: #006080">"30"</span> Canvas.Left=<span style="color: #006080">"20"</span> Source=<span style="color: #006080">"images/chatwindow_4.png"</span> /> |
|
1 |
<Button Canvas.Top=<span style="color: #006080">"45"</span> Canvas.Left=<span style="color: #006080">"570"</span> Width=<span style="color: #006080">"50"</span> Background=<span style="color: #006080">"Brown"</span> Content=<span style="color: #006080">"Send"</span> /> |
|
1 |
</Canvas> |
Para terminar, el XAML completo de Page.xaml debería verse algo así:
|
1 |
<UserControl x:Class=<span style="color: #006080">"SilverlightTip004.Page"</span> |
|
1 |
xmlns=<span style="color: #006080">"http://schemas.microsoft.com/winfx/2006/xaml/presentation"</span> |
|
1 |
xmlns:x=<span style="color: #006080">"http://schemas.microsoft.com/winfx/2006/xaml"</span> |
|
1 |
Width=<span style="color: #006080">"656"</span> Height=<span style="color: #006080">"480"</span>> |
|
1 |
<Grid x:Name=<span style="color: #006080">"LayoutRoot"</span> Background=<span style="color: #006080">"Black"</span> ShowGridLines=<span style="color: #006080">"True"</span>> |
|
1 |
<Grid.ColumnDefinitions> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"8"</span> /> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"640"</span> /> |
|
1 |
<ColumnDefinition Width=<span style="color: #006080">"8"</span> /> |
|
1 |
</Grid.ColumnDefinitions> |
|
1 |
<Image Canvas.ZIndex=<span style="color: #006080">"1001"</span> Grid.Column=<span style="color: #006080">"0"</span> Source=<span style="color: #006080">"images/column_4.png"</span> /> |
|
1 |
<Grid Grid.Column=<span style="color: #006080">"1"</span> ShowGridLines=<span style="color: #006080">"True"</span>> |
|
1 |
<Grid.RowDefinitions> |
|
1 |
<RowDefinition Height=<span style="color: #006080">"51"</span> /> |
|
1 |
<RowDefinition Height=<span style="color: #006080">"323"</span> /> |
|
1 |
<RowDefinition Height=<span style="color: #006080">"106"</span> /> |
|
1 |
</Grid.RowDefinitions> |
|
1 |
<Canvas Canvas.ZIndex=<span style="color: #006080">"1001"</span> Background=<span style="color: #006080">"Black"</span> x:Name=<span style="color: #006080">"logoCanvas"</span> Grid.Row=<span style="color: #006080">"0"</span>> |
|
1 |
<Image Source=<span style="color: #006080">"images/toppanel_2.png"</span> /> |
|
1 |
<Image Canvas.Top=<span style="color: #006080">"2"</span> Canvas.Left=<span style="color: #006080">"0"</span> Source=<span style="color: #006080">"images/SilverlightFireball.png"</span> /> |
|
1 |
</Canvas> |
|
1 |
<Canvas x:Name=<span style="color: #006080">"MapCanvas"</span> Grid.Row=<span style="color: #006080">"1"</span>> |
|
1 |
<TextBlock Foreground=<span style="color: #006080">"AliceBlue"</span> FontSize=<span style="color: #006080">"20"</span>>El mapa va aqui.</TextBlock> |
|
1 |
</Canvas> |
|
1 |
<Canvas Canvas.ZIndex=<span style="color: #006080">"1001"</span> Background=<span style="color: #006080">"Black"</span> Grid.Row=<span style="color: #006080">"2"</span>> |
|
1 |
<Image Source=<span style="color: #006080">"images/panel_2.png"</span> /> |
|
1 |
<Image Canvas.Top=<span style="color: #006080">"30"</span> Canvas.Left=<span style="color: #006080">"20"</span> Source=<span style="color: #006080">"images/chatwindow_4.png"</span> /> |
|
1 |
<Button Canvas.Top=<span style="color: #006080">"45"</span> Canvas.Left=<span style="color: #006080">"570"</span> Width=<span style="color: #006080">"50"</span> Background=<span style="color: #006080">"Brown"</span> Content=<span style="color: #006080">"Send"</span> /> |
|
1 |
</Canvas> |
|
1 |
</Grid> |
|
1 |
<Image Canvas.ZIndex=<span style="color: #006080">"1001"</span> Grid.Column=<span style="color: #006080">"2"</span> Source=<span style="color: #006080">"images/column_4.png"</span> /> |
|
1 |
</Grid> |
|
1 |
</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í).
1 comment
Silverlight Tip of the Day #4: Building the Game Interface Using the Grid Control. - Silverlight Tips of the Day - Blog by Mike Snow says:
Feb 24, 2009
[...] [Read in Spanish] [...]