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


Dibujar y pintar

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


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

Como se acomoda el texto dentro de la porción del Canvas que lo contiene. Las opciones son UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, Medium, SemiExpanded, Expanded, ExtraExpanded, or UltraExpanded

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

Indica la fuente donde se encuentra el video. Solo se reproduce formato WMV.

Stretch

Como se acomoda el video dentro de la porción del Canvas que lo contiene. Las opciones son None, Uniform, UniformToFill y Fill. Por defecto se setea en Fill.

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