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.

Páginas: 1 2 3 4