Silverlight viene con un sistema de medición basado en pixeles. Si estás familiarizado con html y con css seguramente sabrás a que nos estamos refiriendo. Sin embargo, Silverlight, a diferencia de html y css no puede manejar porcentajes (¿o sí puede?).
A continuación presento los diferentes tamaños que podemos manejar (manipular) dentro de Silverlight.
Pixeles
Esto se hace de manera directa. Considera el siguiente código:
<UserControl x:Class="Cre_CaGeSe_v2.Assets.Controls.DateSelector"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="120">
<Border BorderBrush="Black"
BorderThickness="0,1,0,0"
Background="White" >
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
</Grid>
</Border>
</UserControl>
Esto es directo. Estamos creando un control que tiene de tamaño 200 x 120 pixeles. Como no estamos indicando lo contrario Silverligth toma como base a los pixeles. Dentro de este User Control tenemos también un Grid que tiene 4 filas, una de 20 pixeles, y 3 de 30 pixeles. Ese grid también está dividido en dos columnas, una de 30 pixeles y la otra de 70 pixeles. Como resultado tenemos un Grid de 110 pixles de alto X 100 pixeles de ancho.
Proporciones (star o *)
Este es el que viene a salvar el día. Decir star o * es igual a decir: proporciones. Aquí el ejemplo simple:
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="0.25*" />
<RowDefinition Height="0.75*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="31*" />
<ColumnDefinition Width="69*" />
</Grid.ColumnDefinitions>
</Grid>
Esto simplemente indica que esta tabla está compuesta por dos filas, la primera ocupa el 25% del tamaño de la tabla y la segunda el 75%. De igual manera las columnas están distribuidas en con una proporsión 31% vs. 69%.
Este es otro ejemplo de lo que podemos hacer con una medida tipo star o *:
<Grid x:Name="LayoutRoot" Margin="2">
<Grid.RowDefinitions>
<RowDefinition Height="0.25*" />
<RowDefinition Height="30" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="31*" />
<ColumnDefinition Width="69*" />
</Grid.ColumnDefinitions>
</Grid>
Esto indica que voy a tener una tabla con 3 filas. La primera medirá el 25% de la altura total de la tabla, la segunda medirá 30 pixeles (esto sin importar el tamaño de la tabla) y finalmente la tercer fila medirá el resto de espacio disponible, sea cual sea.
Atentamente
Ing. Héctor Hernández Rodríguez