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
- Para asignar un ID a un elemento utilizamos x:Name
- Si queremos posicionar un elemento dentro de un contenedor debemos tener en cuenta lo siguiente:
- 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.
- Para los contenedores Canvas, podemos ubicarlos a través de Canvas.Top, Canvas.Left y Canvas.ZIndex.
- 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.
- 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.
- 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!
