Silverlight 1.0 Parte II
October 19th, 2007
El objeto Canvas
El objeto “Canvas” puede contener muchos objetos que representan UIElements (son objetos que se muestran en pantalla). Se pueden construir figuras geométricas y ubicarlas con referencia al objeto Canvas que las contiene. Además un objeto Canvas puede contener otros objetos Canvas.
|
Elementos geométricos |
|
|
Ellipse |
Representa un círculo en pantalla |
|
Rectangle |
Representa un rectángulo |
|
Line |
Representa una línea |
|
Polyline |
Representa un conjunto de líneas unidas entre si |
|
Polygon |
Representa un polígono |
|
Path |
Representa figuras no geométricas (Ver en el SDK Path Markup Syntax) |
|
Propiedades |
Aplica a |
|
|
Canvas.Left |
La posición de un objeto con respecto al margen izquierdo del Canvas |
Todos |
|
Canvas.ZOrder |
La posición de un objeto en cuanto al eje de referencia Z con respecto a otros objetos que se encuentran contenidos en el Canvas. |
Todos |
|
With |
Ancho de los objetos |
Rectangle Ellipse Canvas |
|
Heigth |
Alto de los objetos |
Rectangle Ellipse Canvas |
|
Background |
Color de Fondo del objeto |
Todos |
|
Storke |
Representa el color del borde de un elemento |
Rectangle Ellipse Line |
|
StrokeTickness |
Representa el ancho del borde de un elemento |
Rectangle Ellipse |
|
RadiusX - RadiusY |
Sirve para ajustar el redondeo de los bordes. |
Rectangle |
|
X1, Y1, X2, Y2 |
Los puntos iniciales y finales del en coordenadas cartesianas |
Line |
|
Points |
Puntos de referencia de una figura |
Polygon Polyline |
|
Data |
Atributo para enviar información de formas |
Path |
|
Fill |
Color de relleno de un objeto |
Rectangle Ellipse Polygon Polyline |
Se utilizan las propiedades de brush para pintar los objetos geométricos. Se pueden colorear utilizando gradientes (permite colorear un mismo objeto con distintos colores).
Dibujar y pintar
|
Propiedades para relleno de objetos |
|
|
SolidColorBrush |
Rellena un objeto con una color sólido |
|
LinearGradientBrush |
Rellena con una transición de colores gradual que se separan mediante líneas. Para detener el avance de un color se pueden indicar GradientStop. |
|
RadialGradientBrush |
Rellena con una transición de colores gradual que se separa formando círculos. Para detener el avance de un color se pueden indicar GradientStop. Además se puede setear el centro de la figura circular con las propiedades GradientOrigin, Center, RadiusX, and RadiusY |
|
ImageBrush |
Rellena un objeto con una imagen |
|
VideoBrush |
Rellena un objeto con un video |
Propiedades Gráficas comunes
Se puede manejar la opacidad de las figuras (tanto de toda la figura como utilizando gradientes). También se puede usar la propiedad Clip (que permite mostrar una parte de una figura). Y utilizar Render Transform que es básicamente redibujar las imágenes (por ejemplo, un rectángulo se convierte en un rombo, etc).
|
Propiedades |
|
|
Opacity |
Maneja la opacidad de un objeto |
|
Opacity Mask |
Permite setear la opacidad de ciertas partes de un objeto. Para ello utiliza un objeto al que le setea la propiedad Brush logrando que el mismo se superponga sobre el objeto al que se le quiere cambiar la opacidad. |
|
Clip |
Permite solapar un objeto para que sólo se vea una porción del mismo. Hay que usar un objeto Geométrico para definir que parte del objeto se quiere mostrar |
|
RenderTransform |
Propiedad para renderizar imágenes. Utiliza las propiedades RotateTransform, SkewTransform, ScaleTransform, TranslateTransform. |
|
Rotate Transform |
Rota una imagen sobre su eje. |
|
Skew Transform |
Estira la imagen sobre el eje X o el Y |
|
ScaleTransform |
Cambia la escala de la imagen tanto en el eje X como en el Y |
|
TransalteTransform |
Traslada un objeto en forma horizontal o vertical |
Imagenes
La imagen se carga mediante el tag Image.
|
Propiedades |
|
|
Source |
Indica la fuente donde se encuentra la imagen. |
|
Stretch |
Acomoda una imagen dentro de la porción del Canvas que lo contiene. Puede setearse con los valores Fill, None o Uniform. |
Texto
Se puede darle formato a un texto (tamaño de letra, color, screcht, etc). Pueden aplicarse las propiedades generales de UI Elements (Opacidad, Clip, etc). Se utiliza un tag TextBlock para indicar un bloque de texto.
|
Propiedades |
|
|
FontSize |
Tamaño de letra |
|
FontStyle |
Estilo (Normal o Italic) |
|
FontStretch |
|
|
FontWeigth |
|
|
FontFamily |
La familia de la letra |
|
Foreground |
Brush del texto (cómo se rellena). Puede utilizarse todas las opciones de Brush. |
Media (audio y video)
Se puede agregar video en formato WMV. Como es la versión 1.0, se tienen que generar los scripts necesarios para manipular el video (stop, pause, play). Se puede ver el video en pantalla completa. Se utiliza un tag MediaElement para indicar el objeto multimedia.
|
Propiedades |
|
|
Source |
|
|
Stretch |
|
|
IsMuted |
Setea si el video es o no mudo. Valores posibles true o false. Por defecto está en false. |
|
Volume |
Setea el volumen del video. Los valores van del 0 al 1 siendo el 1 el valor más alto. Por defecto el volumen es 0.5. |
Leave a Reply