Gráficos

Gráficos

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Graphics

En Windows Phone 7, hay varias opciones para crear figuras y dibujarlas en la pantalla.  Este artículo introduce figuras, tales como elipses, rectángulos, polígonos y rutas.  Este artículo se enfoca en la creación de gráficos usando XAML.

Nota

Si haces un montón de trabajos gráficos, es probable que desees utilizar una herramienta WYSIWYG como Expression Blend para Windows Phone.  Una herramienta WYSIWYG sólo genera XAML, por lo que comprender el código XAML subyacente vale la pena.

Este tutorial contiene las siguientes secciones:

  • Introducción a los gráficos.
  • Elipses
  • Rectángulos y trazos
  • Polígonos
  • Polilíneas
  • Rutas
  • Hilo para gráficos

Nota

Los ejemplos del uso de Silverlight se ejecutan en el navegador para simular su comportamiento para Windows Phone. El comportamiento real puede ser ligeramente diferente en el emulador de Windows Phone o en un dispositivo Windows Phone. 

Introducción a los gráficos

Hay dos conjuntos de clases que definen una región del espacio: Shape y Geometry. La principal diferencia entre estas clases es que Shape tiene una brocha asociada que puede dibujarse en la pantalla, mientras que Geometry simplemente define una región del espacio y no es dibujada.  Puedes pensar en un Shape como UIElement con su límite definido por un Geometry.  Este tutorial sólo cubre las clases Shape.

Las diferentes la clases Shape son, Line (Línea), Ellipse (Elipse), Rectangle (Rectángulo), Polygon (Polígono), Polyline (Polilínea) y Path (Ruta).  Path es interesante ya que permite definir una geometría arbitraria para sus límites.

Para que un Shape pueda ser dibujado en la pantalla debe asociarse un Brush con él.  La propiedad Fill de la clase Shape se establece al Brush deseado.  Los diferentes tipos de brochas en Silverlight para Windows Phone son: SolidColorBrush, LinearGradientBrush, RadialGradienteBrush e ImageBrush.  Para obtener más información consulta Brochas [Brochas.DOCX].

Para obtener más información acerca de las clases Shape y Geometry, consulta los siguientes temas en MSDN:

Elipses

Para crear un Ellipse básico, simplemente especifica un Width (ancho), Height (alto) y un Brush (brocha) para el Fill (relleno).

En el siguiente ejemplo se crea un Ellipse con un ancho de 300, una altura de 300, y utiliza un SolidColorBrush como relleno.  

XAML

<Ellipse Fill="Blue"

Height="300"

Width="300">

 

image

Rectángulos y  Trazos

Un rectángulo es una figura de cuatro lados con sus lados opuestos iguales. Para crear un Rectangle básico, sólo tienes que especificar un ancho, una altura y un relleno.

Silverlight te permite redondear las esquinas de un rectángulo.  Para crear esquinas redondeadas, especifica un valor para las propiedades RadiusX y RadiusY.  Estas propiedades especifican los ejes X e Y de una elipse que define la curva de las esquinas.  El valor máximo de RadiusX es el ancho, dividido entre dos, y el valor máximo de RadiusY es la altura dividido entre dos.

Todas las clases Shape tienen las propiedades Stroke y StrokeThickness.  Stroke especifica la brocha que es utilizada para pintar el borde de una figura. Si no se especifica la brocha para el Stroke entonces el borde alrededor de la forma no se dibuja.  StrokeThickness especifica el ancho para el borde.

Nota

Un Line (línea) sólo dibuja el Stroke (trazo), no el Fill (el relleno) ya que no tiene espacio interior.  Para hacer una línea, asegúrate de que las propiedades Stroke y StrokeThickness sean especificadas.

En el siguiente ejemplo se crea un rectángulo con un ancho de 100 y una altura de 50. Se utiliza un SolidColorBrush de color SteelBlue para su relleno y un SolidColorBrush negro para el Stroke.  El StrokeThickness se establece en 3 y las propiedades RadiusX y RadiusY se establecen en 10, lo que permite al rectángulo tener las esquinas redondeadas.  Utiliza los controles deslizantes en este ejemplo para experimentar con diferentes valores para las propiedades.

Get Microsoft Silverlight

La siguiente imagen muestra un rectángulo con esquinas redondeadas desplegado en Windows Phone.

XAML

<Rectangle Fill="SteelBlue"

Height="275"

Width="350"

Stroke="AliceBlue"

StrokeThickness="15"

RadiusX="40"

RadiusY="30"

</Rectangle>

 

 

 

image

Polígonos

Un polígono (Polygon) es una forma con un límite definido por un número arbitrario de puntos.  El límite se crea mediante la conexión de una línea de un punto a otro, con el último punto vinculado con el primer punto.  La propiedad Points define la colección de puntos que conforman el límite.  En XAML, se definen los puntos con una lista separada por comas.  En código, utilizas un PointCollection para definir los puntos y agregas cada uno de ellos de manera individual como una estructura Point a la colección.

En el siguiente ejemplo se crea un polígono con cuatro puntos de ajuste de (10,200) (60,140), (130,140) y (180,200). Se utiliza un SolidColorBrush azul para su relleno.  Si se define un Stroke, por lo menos una línea o un punto tan grueso como el Stroke es dibujado.  Utilice los controles deslizables en este ejemplo para experimentar con las coordenadas de los diferentes puntos. Además, ten en cuenta que si seleccionas la casilla de verificación de Stroke, el último punto se conecta con el primero.

Get Microsoft Silverlight

Polilíneas

Una polilínea (Polyline) es similar a un Polygon en el que el límite de su forma define por un conjunto de puntos.  La principal diferencia entre un Polyline y un Polygon es que el último punto de una Polyline no está conectado al primer punto.  El relleno de una Polyline sigue pintando el espacio interior de la forma, incluso si los extremos de sus límites (o Stroke) no se encuentran.

Al igual que con un polígono, la propiedad Points define una colección de puntos que conforman un límite. En XAML, se definen los puntos con una lista separada por comas.  En código, se utiliza un PointCollection para definir los puntos y agregar cada punto individual como una estructura Point a la colección.

En el siguiente ejemplo se crea una Polyline con cuatro puntos establecidos en (10,200), (60,140), (130,140) y (180,200).  El Fill no está definido pero el Stroke sí está definido.  Observa que el primero y el último punto no están conectados como lo están en un polígono.  Utiliza los controles deslizables en este ejemplo para experimentar con las coordenadas de los diferentes puntos.  Compara las diferencias entre un Polyline y un Polygon cuando las casillas de verificación de Fill y Stroke son cambiadas.

Get Microsoft Silverlight

Rutas

Una ruta (Path) es el más versátil de los Shape ya que te permite definir una geometría arbitraria.  Sin embargo, con esta versatilidad viene la complejidad.  En esta sección se muestra cómo crear una Path básico en XAML.  Para una discusión en profundidad de las rutas y cómo definirlas, consulta en MSDN Sintaxis de marcado de trazados y Formas y dibujos.

La geometría de un Path se define con la propiedad Data.  La propiedad Data puede establecerse a un objeto Geometry o en el XAML.  Para definir una ruta en XAMl, utilizas la sintaxis de marcado de rutas.

En el siguiente ejemplo se crea un Path que es compuesto de un segmento de curva Bézier y un segmento de línea.  La cadena en el atributo Data comienza con el comando de movimiento, indicado por una M, el cual establece el punto de partida para la ruta.  La letra mayúscula M indica una ubicación absoluta para el nuevo punto.  Una m minúscula indica una posición relativa.  El primer segmento es una curva cúbica de Bézier que comienza en (100,200) y termina en (400,175), la cual se dibuja a través de dos puntos de control (100,25) y (400,350).  Este segmento se indica mediante el comando c en la cadena del atributo Data. Una vez más, la C mayúscula indica una ruta absoluta, la c minúscula indica una ruta relativa. 

El segundo segmento comienza con un comando de línea absoluta horizontal H, que especifica una línea trazada desde el extremo anterior del subtrazado (400,175) a un nuevo extremo (280,175).  Debido a que es un comando de línea horizontal, el valor especificado es una coordenada x.

Nota

Los datos del parámetro Path son sensibles entre mayúsculas y minúsculas.

XAML

 

<Path Stroke="DarkGoldenRod"

StrokeThickness="3"

Data="M 100,200 C 100,25 400,350 400,175 H 280" />

 

La imagen siguiente muestra la ruta de acceso que aparece en un Windows Phone.

image

 

Hilo para gráficos

Una de las diferencias entre Silverlight para Windows Phone y Silverlight en el navegador es que los gráficos del teléfono (y algunas animaciones) ejecutan hilo por separado.  Para la mayoría de los escenarios no tendrás que preocuparte por esto, ya que el sistema se encarga de gestionar todo esto para ti.  Pero si tu aplicación va a tener una gran cantidad de gráficos y animaciones, hay consideraciones para el rendimiento y el diseño que querrás tomar en consideración.

Para obtener más información sobre el hilo de composición, consulta el artículo Gráficas en Silverlight para Windows Phone en MSDN.

Para obtener más información sobre el rendimiento, consulta el artículo Consideraciones para el rendimiento en aplicaciones de Windows Phone en MSDN.

7 thoughts on “Gráficos

  1. Eduardo Hernandez

    ummm, Bueno en el momento no me entusiasma mucho este tema pero estoy seguro que en cualquier momento me servirá

  2. Sebas

    Faltan algunos ejemplos, esta el espacio en blanco, fijate sin se te cayeron las imagenes. Igualmente esta bien profundizado el tema.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">