El segundo control que analizaremos para administrar el Layout de nuestras aplicaciones se llama Grid.
Tal es su importancia que cuando creamos un proyecto en Visual Studio el archivo MainPage.xaml define un control Grid por defecto:
<Grid>
</Grid>
Los primeros programas que desarrollamos dispusimos controles de tipo Button, TextBlock, TextBox etc. dentro del Grid, por ejemplo:
<Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="57,55,0,0" VerticalAlignment="Top"/>
<TextBox x:Name="textBox" HorizontalAlignment="Left" Margin="51,133,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="51,219,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>
En este caso el Grid tiene solo una fila y una columna (es decir una sola celda) y los objetos no se solapan ya que definen distintos valores para la propiedad Margin de cada control:
Margin="57,55,0,0" Margin="51,133,0,0" Margin="51,219,0,0"
Como dijimos esta forma de disponer controles en la página no es la adecuada si queremos que nuestra interfaz se vea correctamente en distintos tamaños de pantalla.
Definición de una grilla de tres filas y una columna.
Como primer paso creamos un nuevo proyecto llamado "Proyecto9" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.
Crearemos un Grid de tres filas, la primer fila ocupará el 20%, la segunda el 60% y la última el 20% restante. Agregaremos un botón en cada celda que ocupe todo el espacio:
<Page
x:Class="Proyecto9.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto9"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Button x:Name="boton1" Content="botón 1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton2" Content="botón 2" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton3" Content="botón 3" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
</Grid>
</Page>
Debemos definir una propiedad compleja RowDefinition dentro del objeto Grid indicando cada una de las filas:
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="3*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
El espacio relativo de cada fila lo logramos antecediendo al caracter * un valor (como vemos la suma de los tres valores es 5, luego al que le asignamos el valor 3* estamos indicando que dicha fila tiene un peso relativo de 60%)
Luego cada uno de los objetos dentro del Grid debemos indicar la fila donde debe agregarse (las filas comienzan a numerarse a partir de cero):
<Button x:Name="boton1" Content="botón 1" Grid.Row="0" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="10,10,10,10" />
Las propiedades HorizontalAlignment y VerticalAlignment con el valor Stretch hacen que los botones ocupen todo el espacio reservado en la celda.
En pantalla tenemos como resultado:
Este control Grid es muy poderoso si pensamos en distribuir espacios dentro de la interfaz. Si ejecutamos la aplicación y lo probamos en dispositivos con tamaños de pantalla distinta veremos que los espacios reservados para cada celda se respeta:
Probar de iniciar las propiedades Height de la etiqueta RowDefinition con los valores "1*" para todas las filas:
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto9.zip
Definición de una grilla de tres filas y tres columnas.
Cuando tenemos más de una columna debemos indicarlas a cada una.
Como primer paso creamos un nuevo proyecto llamado "Proyecto10" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.
El código XAML para crear un Grid de tres filas y tres columnas e insertar un botón en cada celda queda con la siguiente sintaxis:
<Page
x:Class="Proyecto10.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Proyecto10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Button x:Name="boton1" Content="Botón 1" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton2" Content="Botón 2" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton3" Content="Botón 3" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton4" Content="Botón 4" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton5" Content="Botón 5" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton6" Content="Botón 6" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton7" Content="Botón 7" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton8" Content="Botón 8" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
<Button x:Name="boton9" Content="Botón 9" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
</Grid>
</Page>
Como podemos observar definimos otra propiedad compuesta Grid.ColumnDefinition especificando cada una de sus columnas con su respectivo ancho:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
Luego para disponer los controles visuales dentro del Grid debemos indicar en que fila y columna se ubica:
<Button x:Name="boton1" Content="Botón 1" Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" />
La interfaz visual es similar a esta:
Cuando ejecutamos la aplicación la grilla ocupa todo el espacio del dispositivo y se adapta al tamaño de nuestro dispositivo.
Este proyecto lo puede descargar en un zip desde este enlace :Proyecto10.zip