Después de haber estudiado el concepto de Clase y Objeto pasemos a estudiar algunos objetos de silverlight.
DEFINAMOS
LAYOUT
Para empezar con silverlight se deben tener claros conceptos tales como en que forma se van a posisionara los controles (objetos) y que objetos me permiten organizar visualmente la UI (interfaz de usuario) de forma tal que para el usuario una aplicación sea atractiva y funcional.
Objetos de tipo Panel tales como canvas, grid, stackpanel son muy importantes a la hora de implementar el layout o UI (interfaz de usuario) en una aplicación Silverlight.
PRACTIQUEMOS
1 – Grid : Objeto contenedor para posicionar elementos de la UI en aplicaciones Silverlight, en forma de tabla o cuadricula.
XAML
<Grid x:Name="LayoutRoot" Background="White" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Name="BT00" Content="0 0" Grid.Column="0" Grid.Row="0" FontSize="28"></Button>
<Button Name="BT01" Content="0 1" Grid.Column="1" Grid.Row="0" FontSize="28"></Button>
<Button Name="BT02" Content="0 2" Grid.Column="2" Grid.Row="0" FontSize="28"></Button>
<Button Name="BT10" Content="1 0" Grid.Column="0" Grid.Row="1" FontSize="28"></Button>
<Button Name="BT11" Content="1 1" Grid.Column="1" Grid.Row="1" FontSize="28"></Button>
<Button Name="BT12" Content="1 2" Grid.Column="2" Grid.Row="1" FontSize="28"></Button>
<Button Name="BT20" Content="2 0" Grid.Column="0" Grid.Row="2" FontSize="28"></Button>
<Button Name="BT21" Content="2 1" Grid.Column="1" Grid.Row="2" FontSize="28"></Button>
<Button Name="BT22" Content="2 2" Grid.Column="2" Grid.Row="2" FontSize="28"></Button>
</Grid>
Viendo el anterior código se observa dentro del Grid, una sección Grid.ColumnDefinitions, una Grid.RowDefinitions las dos anteriores permiten determinar el número de columnas y el número de filas respectivamente. La definición de cada objeto tipo botón se hace a través de las propiedades Grid.Column y Grid.Row referentes a la fila y columna respectiva como se ve en la imagen inferior.
Código XAML
<UserControl x:Class="Silverlight_CPOO_Clases_03.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="400">
<Grid Name="LayoutPrincipal">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid x:Name="LayoutRoot" Background="White" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Name="BT00" Content="0 0" Grid.Column="0" Grid.Row="0" FontSize="28"></Button>
<Button Name="BT01" Content="0 1" Grid.Column="1" Grid.Row="0" FontSize="28"></Button>
<Button Name="BT02" Content="0 2" Grid.Column="2" Grid.Row="0" FontSize="28"></Button>
<Button Name="BT10" Content="1 0" Grid.Column="0" Grid.Row="1" FontSize="28"></Button>
<Button Name="BT11" Content="1 1" Grid.Column="1" Grid.Row="1" FontSize="28"></Button>
<Button Name="BT12" Content="1 2" Grid.Column="2" Grid.Row="1" FontSize="28"></Button>
<Button Name="BT20" Content="2 0" Grid.Column="0" Grid.Row="2" FontSize="28"></Button>
<Button Name="BT21" Content="2 1" Grid.Column="1" Grid.Row="2" FontSize="28"></Button>
<Button Name="BT22" Content="2 2" Grid.Column="2" Grid.Row="2" FontSize="28"></Button>
</Grid>
</Grid>
</UserControl>
Y para la carga del Grid desde C#:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace Silverlight_CPOO_Clases_03
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//Inicialización de un objeto Grid
Grid grid = new Grid();
//Definición de Columnas
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
grid.ColumnDefinitions.Add(new ColumnDefinition());
//Definición de Filas
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
grid.RowDefinitions.Add(new RowDefinition());
//Primera fila de botones/////////////////
Button button00 = new Button();
button00.SetValue(Grid.ColumnProperty, 0);
button00.SetValue(Grid.RowProperty, 0);
button00.Content = "0 - 0";
grid.Children.Add(button00);
Button button01 = new Button();
button01.SetValue(Grid.ColumnProperty, 1);
button01.SetValue(Grid.RowProperty, 0);
button01.Content = "0 - 1";
grid.Children.Add(button01);
Button button02 = new Button();
button02.SetValue(Grid.ColumnProperty, 2);
button02.SetValue(Grid.RowProperty, 0);
button02.Content = "0 - 2";
grid.Children.Add(button02);
////////////////////////////////////////////
//Segunda Fila//////////////////////////////
Button button10 = new Button();
button10.SetValue(Grid.ColumnProperty, 0);
button10.SetValue(Grid.RowProperty, 1);
button10.Content = "1 - 0";
grid.Children.Add(button10);
Button button11 = new Button();
button11.SetValue(Grid.ColumnProperty, 1);
button11.SetValue(Grid.RowProperty, 1);
button11.Content = "1 - 1";
grid.Children.Add(button11);
Button button12 = new Button();
button12.SetValue(Grid.ColumnProperty, 2);
button12.SetValue(Grid.RowProperty, 1);
button12.Content = "1 - 2";
grid.Children.Add(button12);
////////////////////////////////////////////
///Tercer Fila//////////////////////////////
Button button20 = new Button();
button20.SetValue(Grid.ColumnProperty, 0);
button20.SetValue(Grid.RowProperty, 2);
button20.Content = "2 - 0";
grid.Children.Add(button20);
Button button21 = new Button();
button21.SetValue(Grid.ColumnProperty, 1);
button21.SetValue(Grid.RowProperty, 2);
button21.Content = "2 - 1";
grid.Children.Add(button21);
Button button22 = new Button();
button22.SetValue(Grid.ColumnProperty, 2);
button22.SetValue(Grid.RowProperty, 2);
button22.Content = "2 - 2";
grid.Children.Add(button22);
/////////////////////////////////////////////
//Por último se agrega el nuevo Grid al layout
//Principal y así poder comparar las dos formas
//mencionadas.
grid.SetValue(Grid.RowProperty, 1);
LayoutPrincipal.Children.Add(grid);
}
}
}
Tal como se ve en el código de C# la Programación Orientada a Objetos es muy importante a la hora de crear controles dinámicos para una aplicación de silverlight, pero es innegable la facilidad y legibilidad del código XAML a la hora de definir objetos de la UI.
Si inspeccionamos un poco los objetos de Silverlight como button o grid se puede ver allí que hay diferentes métodos y propiedades. Sin profundizar mucho en estas instancias, clases y tipos de objeto es posible afirmara que:
button21.SetValue(Grid.ColumnProperty, 1);
A través de este método se puede establecer el valor index referente de la propiedad Column en la que se va a posicionar el objeto button, una vez sea agregado al control Grid.
button21.SetValue(Grid.RowProperty, 2);
En este caso y de igual forma que en el anterior se establece la posición pero referente a la fila del Grid.
button21.Content = “2 – 1″;
El objeto button dispone de una propiedad Content (de tipo object) la cual permite registrar cual va a ser el contenido del botón, en este caso un texto.
grid.Children.Add(button21);
El objeto Grid contiene una propiedad Children (de tipo UIElementCollection), en la cual se puede hacer uso del método Add para agregar cada elemento al control contenedor.
Así pues se empieza a notar que de la Programación Orientada a Objetos en Silverlight, permite a través de las propiedades y métodos de un objeto poder configurar y en este caso a un botón darle su respectiva posición cuando es agregado a un control Grid desde código. Aclarando que la forma estándar de hacer esto es crear la UI en código XAML el cual es por mucho, más fácil, flexible y legible.
