Silverlight Conceptos Básicos. Creación del proyecto Utilizando Visual Studio 2008, en el menú Archivo/Nuevo/Proyecto seleccionar el lenguaje Visual C#,

Presentación del tema: "Silverlight Conceptos Básicos. Creación del proyecto Utilizando Visual Studio 2008, en el menú Archivo/Nuevo/Proyecto seleccionar el lenguaje Visual C#,"— Transcripción de la presentación:

1 Silverlight Conceptos Básicos

2 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

3 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.

4 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: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.406 24.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/> En la parte sombreada de amarillo se especifica cual control es el que se cargará en la página.

5 Propiedades  Propiedades Simples  Propiedades Complejas  Propiedades Adjuntas

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

7 Propiedades Complejas Son 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....

8 Propiedades Adjuntas Son 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 (.).

9 Recursos Los 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: <UserControl x:Class="EightBall.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">...

10 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: … Para accesar a un recurso definido a nivel del control (página) desde el código se utilizaría la siguiente sentencia: LinearGradientBrush brush = (LinearGradientBrush) this.Resources[ "BackgroundBrush" ] ; // Swap the color order. Color color = brush.GradientStops[0].Color; brush.GradientStops[0].Color = brush.GradientStops[2].Color; brush.GradientStops[2].Color = color;

11 La mejor manera de organizar los recursos es en diccionarios de recursos (ResourceDictionary) los cuales son archivos xaml que tienen la siguiente estructura: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> Los diccionarios de recursos deben ser cargados antes de poder utilizarlos, por lo que se recomienda cargarlos en el archivo App.xaml <Application xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="SilverlightApplication1.App">

12 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í.

13 One-Way Binding <Slider x:Name="sliderFontSize" Margin="3" Minimum="1" Maximum="40" Value="10"> <TextBlock Margin="10" Text="Simple Text" x:Name="lblSampleText" FontSize=" {Binding ElementName=sliderFontSize, Path=Value} " > 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.

14 Two-Way Binding <Slider x:Name="sliderFontSize" Margin="3" Minimum="1" Maximum="40" Value="10"> <TextBlock Margin="10" Text="Simple Text" Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay }" > 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.

15 Layout Los principales contenedores (Core Layout Panels) son:  StackPanel  Grid  Canvas En las librerías del ControlToolkit se incluyen además los siguientes contenedores:  WrapPanel  DockPanel

16 Core Layout Panels StackPanel. 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.

17 Layout de ControlToolkit WrapPanel. 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.

18 Border Los 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.

19

20 Eventos Algunos 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: EventoBubbles KeyDownSi KeyUpSi GotFocusSi LostFocusSi MouseLeftButtonDownSi MouseLeftButtonUpSi MouseMoveSi MouseWeelSi MouseEnterNo MouseLeaveNo LostMouseCaptureNo