SilverlightConceptos Básicos

Creación del proyecto

Utilizando Visual Studio 2008, en el menú Archivo/Nuevo/Proyecto seleccionar el lenguaje Visual C#, tipo de proyecto Silverlight, Aplicación Silverlight, como se muestra en la imagen siguiente

Luego se presenta una pantalla preguntando si se genera un proyecto ASP.Net, si se desmarca el check solo se creará una página de prueba.

Toda “página” de silverlight es un control de usuario, que se lo debe agregar a la página web o asp.net. la manera de hacerlo es la siguiente:

En la parte sombreada de amarillo se especifica cual control es el que se cargará en la página.

Propiedades

Propiedades SimplesPropiedades ComplejasPropiedades Adjuntas

Propiedades Simples

Son propiedades que toman un valor determinado de un tipo de dato simple, por ejemplo FontSize.

Propiedades ComplejasSon propiedades que toman valores en base a estructuras definidas por otros elementos, por ejemplo en un control Grid la propiedad Background se compone de un objeto Brush que tiene el color, la trama.

Propiedades AdjuntasSon popiedades que obtienen los controles al estar “dentro” de otro control, generalmente un contenedor, como por ejemplo el Grid. Para especificar la fila o columa de un textbox se utiliza la sentencia:

Se identifica la propiedad por la pertenencia a otro control representada por el punto (.).

RecursosLos recursos son definiciones de valores de propiedades que se guardan con un nombre (key) para ser reutilizados en otros controles clarificando el código.En Sivlerlight se pueden definir recursos para el proyecto, para el control (página) o para el elemento. Todo elemento tiene la colección Resources.Para definir los recursos para el control (página) se utiliza la sentencia siguiente:

Para utilizar el recurso se debe poner como valor de la propiedad, entre llaves ({}) la palabra StaticResource seguido del nombre del recurso.

Si se desea que un recurso esté disponible para toda la aplicación, se lo debe deinir en el archivo App.xaml, dentro del elemento:

<Application.Resources>…

</Application.Resources>Para accesar a un recurso definido a nivel del control (página) desde el código se utilizaría la siguiente sentencia:

La mejor manera de organizar los recursos es en diccionarios de recursos (ResourceDictionary) los cuales son archivos xaml que tienen la siguiente estructura:

Los diccionarios de recursos deben ser cargados antes de poder utilizarlos, por lo que se recomienda cargarlos en el archivo App.xaml

Element-Element Binding

Para que el valor de una propiedad esté amarrada o dependa de el valor de una propiedad de otro control, se utiliza la palabra reservada Binding.Existen dos tipos:

One-Way-Binding: Que una propiedad dependa de otra.

Two-Way-Binding: Que ambas propiedades dependan entre sí.

One-Way Binding

ElementName es el nombre del elemento del cual depende, Path es la propiedad del elemento (ElementName) que servirá para dar valor a la propiedad amarrada.

Two-Way Binding

Es igual al One-Way-Binding, solo que se agrega un parámetro más: Mode que por default es OneWay, ahora con el valor TwoWay.

LayoutLos principales contenedores (Core Layout Panels) son:

StackPanel

Grid

Canvas

En las librerías del ControlToolkit se incluyen además los siguientes contenedores:

WrapPanel

DockPanel

Core Layout PanelsStackPanel. Organiza los elementos horizontal o verticalmente en una pila.

Grid. Organiza los elementos en filas y columnas invisibles (a menos que se defina un borde). Es el más utilizado.

Canvas.Permite organizar los elementos estableciendo sus coordenadas con respecto al contenedor.

Layout de ControlToolkitWrapPanel. Organiza los elementos de igual manera que el StackPanel, pero si la cantidad de elementos supera la fila/columna se genera una nueva fila/columna con los elementos restantes.

DockPanel. Organiza los elementos apilados, alineados a un borde del contenedor (superior, inferior, izquierdo, derecho). Es útil al hacer barras de menú o botones.

BorderLos contenedores no definen una propiedad o atributo para el borde, en su lugar debemos anteponer el elemento Border al contenedor que se quiere aplicar.Las propiedades que definen un Borde son:

Background, define el fondo de todo lo contenido dentro del borde.BorderBrush, define el objeto Brush de la línea del borde.BorderThickness, define el ancho del borde, se puede definir por cada lado.CornerRadius, permite dar un efecto de redondeo de los extremos borde.Padding, define el espacio entre el borde y el contenido.

<Border Margin="25" Background="LightYellow" BorderBrush="SteelBlue" BorderThickness="8" CornerRadius="15"><Button Margin="10 Content="Click Me"></Button></Border>

EventosAlgunos eventos en Silverlight tiene la propiedad de ser lanzados hacia arriba en la jerarquía de los contenedores, a lo que se conoce como Bubbling, pero solo los que viene de la clase UIElement y según la siguiente tabla:

Evento Bubbles

KeyDown Si

KeyUp Si

GotFocus Si

LostFocus Si

MouseLeftButtonDown Si

MouseLeftButtonUp Si

MouseMove Si

MouseWeel Si

MouseEnter No

MouseLeave No

LostMouseCapture No