Los elementos y eventos en Silverlight

Hace ya algunos días estuve definiendo el primer layout con Silverlight, donde teníamos una primera toma de contacto con XAML. En esta ocasión pretendo dar una visión un poco más amplia acerca de algunos de los elementos que podemos usar en el diseño de la UI y cómo es posible enlazar los eventos a los mismos.

Tenemos tres entornos a nuestra disposición a la hora de diseñar la interfaz de usuario con XAML:

  • Visual Studio 2008: Podemos utilizar la ventana de Herramientas (Toolbox) para arrastrar los elementos pero directamente en el código XAML. En esta versión de Visual Studio no tenemos vista de diseño para XAML.

    Por otro lado, existe la ventana Document Outline para poder visualizar el esquema de la página que estamos creando.

  • Visual Studio 2010: En la nueva versión de VS tenemos una vista previa del código XAML implementado, lo cual facilita bastante su codificación. Actualmente podemos hacer uso de la versión Release Candidate.

  • Expression Blend: Es la herramienta por excelencia para trabajar con las UI de Silverlight y WPF. Si bien para la creación de elementos nos podemos apañar con Visual Studio, en el caso de las animaciones la cosa resulta algo más compleja de realizar codificando.

    Desde Visual Studio podemos seleccionar cualquier archivo XAML y, con el botón derecho sobre él, podemos dar la orden de abrirlo en Expression Blend y poder trabajar de forma paralela con uno y otro (Expression Blend para el diseño y Visual Studio para el desarrollo).

ALGUNAS DIFERENCIAS RESPECTO A ASP.NET

  1. Para asignar un ID a un elemento utilizamos x:Name
  2. Si queremos posicionar un elemento dentro de un contenedor debemos tener en cuenta lo siguiente:
    1. Si estamos utilizando un contenedor de tipo Grid necesitamos establecer en primer lugar la estructura del mismo para poder posicionarlos dentro de él. De lo contrario no visualizaremos los elementos.
    2. Para los contenedores Canvas, podemos ubicarlos a través de Canvas.Top, Canvas.Left y Canvas.ZIndex.
    3. En el caso de los StackPanels, podemos apilar varios y darle una orientación horizontal o vertical al contenedor a través de la propiedad Orientation.
  3. En lugar de utilizar la propiedad Text para algunos controles como en Web Forms, para definir el texto que aparece en los elementos que lo requiera, utilizaremos Content.
  4. En ASP.NET la mayoría de los controles tienen un alto y ancho predeterminado que, en ocasiones, no es necesario alterar. En Silverlight es necesario especificarlo para obtener un tamaño considerable. Si no se especifica, se adaptará al tamaño del texto del Content si lo tiene.

ALGUNOS ELEMENTOS BÁSICOS

Al igual que en ASP.NET disponemos de elementos tales como :

Button

<Button x:Name="myButton" Content="Click me!" 
Canvas
.Left="100" Canvas.Top="120" Width="100" Height="25"></Button>

Textbox

<TextBox x:Name="myTextbox" Text="Write your name here" 
Canvas
.Left="100" Canvas.Top="150" Height="25"/>

Calendar

<controls:Calendar x:Name="myCalendar" Canvas.Left="280" Canvas.Top="120" 
ToolTipService
.ToolTip="Select your birthday" Cursor="Arrow"/>

Combobox

<ComboBox x:Name="myCombobox" Canvas.Left="100" Canvas.Top="195" Width="130"  >
<ComboBoxItem Background="#FF0200FF" Foreground="White" Content="Blue"/>
<ComboBoxItem Background="#FFFF0500" Foreground="White" Content="Red"/>
<ComboBoxItem Background="#FFFF00CA" Foreground="White" Content="Pink" IsSelected="True"/>
</ComboBox>

Listbox

<ListBox Canvas.Left="100" Canvas.Top="250" Width="130" >
<ListBoxItem Background="#FF0200FF" Foreground="White" Content="Blue"/>
<ListBoxItem Background="#FFFF0500" Foreground="White" Content="Red" IsSelected="True"/>
<ListBoxItem Background="#FFFF00CA" Foreground="White" Content="Pink" />
</ListBox>

Label

<dataInput:Label x:Name="myLabel" Content="Common Label" 
Canvas
.Left="100" Canvas.Top="80" Width="130" Height="24"/>

Radiobutton

<StackPanel Orientation="Vertical">
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Blue" Content="C#"/>
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Orange" Content="VB.NET"/>
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Green" Content="Java"/>
<RadioButton Margin="10,10,0,0" GroupName="Languages" Foreground="Purple" Content="PHP"/>
</StackPanel>

Checkbox

<CheckBox x:Name="myCheckBox" Content="I want a million euros" 
Canvas
.Left="100" Canvas.Top="450"></CheckBox>

Datagrid

<data:DataGrid x:Name="myDataGrid" Height="105" 
Canvas.Left="100" Canvas.Top="345" ></data:DataGrid>

Para realizar la carga, en vez de utilizar DataSource sería ItemsSource.

public MainPage()
{
InitializeComponent();

var person = new Person { Name = "Gisela", LastName = "Torres", Location = "Madrid", Web = "http://geeks.ms/blogs/gtorres/" };
var persons = new List<Person> {person};
myDataGrid.ItemsSource = persons;
}

[…]

Existen más controles de los que aquí se indican y, además, podemos hacer uso de Silverlight Toolkit, de forma gratuita, descargándolo desde su sitio en Codeplex para ampliar el repertorio.

LOS EVENTOS EN SILVERLIGHT

Por último, para asociar un evento a un elemento de nuestra interfaz existen distintos procedimientos según el entorno:

Visual Studio 2008

Deberemos seleccionar el evento que necesitemos a través del Intellisense y, una vez añadido al elemento, nos dará la posibilidad de asociar uno existente o crear uno nuevo.

Visual Studio 2010

Si estamos trabajando con la vista previa, podemos hacer doble click sobre el elemento para autogenerar el evento click (De la misma forma que en Web Forms) o bien haciendo doble click sobre el evento que queramos en la ventana propiedades.

Expression Blend

En este último entorno, al igual que en Visual Studio 2010, disponemos de la pestaña Eventos dentro de propiedades del elemento seleccionando el icono que señalo en la imagen.

Hasta aquí la primera toma de contacto con los elementos XAML para Silverlight 🙂

¡Saludos!

7 comentarios en “Los elementos y eventos en Silverlight”

  1. Hola Gisela.

    Gran Post. Una duda….

    Cuando defines en un control Silverlight su invisibilidad con [Visibility=”Collapsed”], en tiempo de diseño desde el Ms Blend tb desaparece. Esto me resulta muy molesto porque se hace complicado seleccionar el control para hacer cualquier cosa con él. En Windows.Forms no se ocultaba y era mucho más cómodo. ¿Sabes si se puede en el Ms Blend desabilitar esto (que no se oculte en diseño aunque tenga [Visibility=”Collapsed”])?. No quiero tener que ocultarlo por código al mostrar la pantalla.

    Muchas gracias y un super-saludo !!!.

  2. Hola jorge,

    En primer lugar, muchas gracias por tu comentario 🙂

    Efectivamente en Expression Blend, al modificar la propiedad Visibility a collapsed, perdemos el elemento en la ventana de diseño 🙁

    Por otro lado, he comprobado que en Visual Studio 2010 esto no ocurre y funciona “correctamente” . Por lo que he podido leer, la mayoría de la gente hace lo mismo que me comentas.

    Si encuentro alguna solución “elegante” intentaré postearla 🙂

    ¡Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *