Inicio rápido: dibujar formas (XAML)

Aprende a dibujar formas como elipses, rectángulos, polígonos y trayectorias. La clase Path constituye el modo de ver un lenguaje de dibujo basado en vectores relativamente complejo en una interfaz de usuario XAML (por ejemplo, para dibujar curvas Bézier).

Guía básica: Relación de este tema con los demás. Consulta:

Presentación

Son dos los conjuntos de clases que definen una región del espacio en la interfaz de usuario XAML: las clases Shape y las clases Geometry. La principal diferencia entre estas clases es que Shape tiene asociado un pincel y se puede representar en la pantalla, mientras que Geometry simplemente define una región del espacio y no se representa, salvo que ayude a aportar información a otra propiedad de interfaz de usuario. Puedes pensar en una Shape como un UIElement con su límite definido por una Geometry. Este tema se centra principalmente en las clases Shape.

Las clases de Shape son Line, Ellipse, Rectangle, Polygon, Polyline y Path. Path es interesante, porque puede definir una geometría arbitraria, y la clase Geometry está involucrada aquí dado que es la única forma de definir las partes de un Path.

Escenarios para formas

El escenario más común en el que se usa una forma es una definición de UI basada en plantilla de XAML para un control de UI. En particular, la forma Rectangle se ve en muchas plantillas de control, porque se usa para mostrar un indicador de foco visible para controles activables cuando el control está en un estado visual "Focused".

El siguiente escenario más frecuente para una forma es la presentación de un gráfico vectorial que se generó en otro formato y se exportó a un formato de serialización y definición de vector que XAML puede usar. Este formato se convierte en el valor de la propiedad Path.Data. A continuación, el elemento Path se puede colocar en una interfaz de usuario de XAML, y el gráfico vectorial puede formar parte del diseño, como lo hacen los controles, los paneles y otros elementos.

Relleno y trazo para formas

Para representar una Shape en el Canvas de la aplicación, debes asociarla a un Brush. Establece la propiedad Fill de la Shape en el Brush que quieras. Para más información sobre los pinceles, consulta Inicio rápido: Usar pinceles.

Un objeto Shape también puede tener un Stroke, que es una línea dibujada en torno al perímetro de la forma. Un Stroke también requiere un Brush que defina su apariencia y debe tener un valor distinto de cero para StrokeThickness. StrokeThickness es una propiedad que define el grosor del perímetro en torno al borde de la forma. Si no especificas un valor de Brush para el Stroke, o si estableces StrokeThickness en 0, no se dibuja el borde alrededor de la forma.

Elipse

Una Ellipse es una forma con un perímetro curvo. Para crear una Ellipse básica, especifica los valores de Width y Height, y un Brush para Fill.

El ejemplo siguiente crea una Ellipse con un Width de 200 y un Height de 200, y usa un SolidColorBrush con color SteelBlue como Fill.


<Ellipse Fill="SteelBlue" Height="200" Width="200" />

Esta es la Ellipse representada.

Ellipse representada.

En este caso, la Ellipse es lo que la mayoría de las personas considerarían un círculo, pero así es como se declara un círculo en XAML: usa una Ellipse con valores de Width y Height iguales.

Cuando se coloca un objeto Ellipse en un diseño de UI, se supone que su tamaño es el mismo que el del rectángulo con esos valores de Width y Height; el área que queda fuera del perímetro no tiene representación, pero sigue formando parte de su tamaño de diseño asignado.

Un grupo de seis elementos Ellipse forman parte de la plantilla de control para el control ProgressRing, y dos elementos Ellipse concéntricos forman parte de un RadioButton.

Rectángulo

Un Rectangle es una forma de cuatro lados cuyos lados opuestos son iguales. Para crear un Rectangle básico, especifica los valores de Width y Height, y un Fill.

Puedes redondear las esquinas de un Rectangle. 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 permitido de RadiusX es el valor de Width dividido por dos, y el valor máximo permitido de RadiusY es el valor de Height dividido por dos.

El ejemplo siguiente crea un Rectangle con un Width de 200 y un Height de 100. Usa un valor Blue de SolidColorBrush para su Fill y un valor Black de SolidColorBrush para su Stroke. Establecemos StrokeThickness en 3. Establecemos la propiedad RadiusX en 50 y la propiedad RadiusY en 10 para dar al Rectangle las esquinas redondeadas.


<Rectangle Fill="Blue"
           Width="200"
           Height="100"
           Stroke="Black"
           StrokeThickness="3"
           RadiusX="50"
           RadiusY="10" />

Este es el Rectangle representado.

Rectangle representado.

Sugerencia  Hay algunos escenarios para definiciones de UI en los que, en lugar de usar un Rectangle, es más apropiado usar un Border. Si quieres crear una forma rectangular en torno a otro contenido, puede ser mejor usar un Border, ya que puede tener contenido secundario y su tamaño se ajustará automáticamente en torno a ese contenido, en lugar de tener dimensiones fijas de alto y ancho como un Rectangle. Un Border también ofrece la opción de tener esquinas redondeadas, a través de la propiedad CornerRadius.

Por otro lado, es probable que un Rectangle sea la mejor opción para la composición de controles. Un Rectangle es una forma que se ve en muchas plantillas de control, porque se usa como una parte de "FocusVisual" para los controles activables. Cuando el control esté en un estado visual "Focused", este rectángulo se hará visible; en otros estados, estará oculto.

Polígono

Un Polygon es una forma con un límite definida por un número de puntos arbitrario. El límite se crea conectando una línea desde un punto al siguiente, con el último punto conectado al primero. La propiedad Points define la colección de puntos que conforman el límite. En XAML, los puntos se definen con una lista separada por comas. En el código subyacente, se usa una PointCollection para definir los puntos, y cada punto individual se agrega como un valor Point a la colección.

No tienes que declarar explícitamente los puntos como el punto inicial y el punto final, ya que ambos se especifican con el mismo valor Point. La lógica de representación para un Polygon supone que se está definiendo una forma cerrada y se conectará el punto final con el punto inicial implícitamente.

En el siguiente ejemplo se crea un Polygon con 4 puntos establecidos en (10,200), (60,140), (130,140) y (180,200). Usa un valor de LightBlue igual a SolidColorBrush para su Fill y no tiene ningún valor para Stroke, por lo que no tiene contorno de perímetro.


<Polygon Fill="LightBlue"
         Points="10,200,60,140,130,140,180,200" />

Esta es la Polygon representada.

Polygon representado.

Por cierto, muchas veces se usa un valor Point como un tipo en XAML para escenarios en los que no se declaran los vértices de las formas. Por ejemplo, un Point es parte de los datos del evento para eventos de entrada táctil, de modo que puedas saber exactamente en qué punto de un espacio de coordenadas se produjo la acción táctil. Para más información sobre Point y cómo usarlo en XAML o en código, consulta el API reference topic for Point.

Línea

Un objeto Line es simplemente una línea dibujada entre dos puntos en un espacio de coordenadas. Un objeto Line omite cualquier valor proporcionado para Fill, ya que no tiene espacio interior. Para un objeto Line, asegúrate de especificar valores para las propiedades Stroke y StrokeThickness, ya que de lo contrario Line no se podrá representar.

No debes usar valores de Point para especificar una forma Line; en su lugar, debes usar valores de Double discretos para X1, Y1, X2 y Y2. Esto permite usar un número mínimo de marcas para líneas horizontales o verticales. Por ejemplo, <Line Stroke="Red" X2="400"/> define una línea horizontal de 400 píxeles de largo. Las otras propiedades X,Y son 0 de manera predeterminada, por lo que, en términos de puntos, este código XAML dibujaría una línea de (0,0) a (400,0). Luego, puedes usar un TranslateTransform para mover toda la Line si quieres que se inicie en un punto que no sea (0,0).

Polilínea

Una Polyline es similar a un Polygon en cuanto a que el límite de la forma está definida por un conjunto de puntos, excepto que el último punto de una Polyline no está conectado al primero.

Nota   Puedes tener explícitamente un punto inicial y un punto final idénticos en el Points establecido para el Polyline, pero en ese caso es probable que sea mejor usar un objeto Polygon.

Si especificas un Fill de un Polyline, el Fill pinta el espacio interior de la forma, incluso si el punto inicial y el punto final del Points establecido para el Polyline no se cortan. Si no especificas un Fill, el Polyline es similar a lo que se habría representado si hubieras especificado varios elementos Line individuales en los que se cortan los puntos iniciales y finales de líneas consecutivas.

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

En este ejemplo se crea un Polyline con cuatro puntos establecidos en (10,200), (60,140), (130,140) y (180,200). Se define un Stroke, pero no un Fill.


<Polyline Stroke="Black"
        StrokeThickness="4"
        Points="10,200,60,140,130,140,180,200" />

Esta es la Polyline representada. Observa que el primer y el último punto no están conectados por el contorno de Stroke como en un Polygon.

Polilínea representada.

Ruta de acceso

Un objeto Path es el objeto Shape más versátil porque se puede usar para definir una geometría arbitraria. Pero esta versatilidad implica complejidad. Veamos cómo crear una Path básica en XAML.

La geometría de una trayectoria se define con la propiedad Data. Existen dos técnicas para establecer Data:

  • Puedes establecer un valor de cadena para Data en XAML. De esta forma, el valor de Path.Data consume un formato de serialización para gráficos. Normalmente no se edita el texto de este valor en forma de cadena una vez establecido. En lugar de ello puedes usar herramientas de diseño para trabajar en una metáfora de diseño o dibujo sobre una superficie. A continuación, guardas o exportas la salida, y esto genera un archivo XAML o un fragmento de cadena XAML con información de Path.Data.
  • Puedes establecer la propiedad Data en un solo objeto Geometry. Esto puede hacerse mediante programación o en XAML. Ese objeto Geometry individual suele ser un GeometryGroup, que actúa como un contenedor que puede componer varias definiciones de geometría en un solo objeto para los fines del modelo de objetos. La razón más común para hacer esto es cuando quieres usar una o más de las curvas y formas complejas que se pueden definir como valores de Segments para un PathFigure, como por ejemplo BezierSegment.

En este ejemplo se muestra Path que puede ser el resultado de usar Blend para Visual Studio para obtener unas pocas formas vectoriales y, después, guardar el resultado como un archivo XAML. El Path total consiste en un segmento de curva Bézier y un segmento de línea. El ejemplo está pensado principalmente para señalar los elementos que existen en el formato de serialización de Path.Data y qué representan los números.

Esta propiedad Data comienza con el comando mover, indicado por "M", que establece el punto de inicio de la trayectoria.

El primer segmento es una curva Bézier cúbica que comienza en (100,200) y termina en (400,175), y que se dibuja con los dos puntos de control (100,25) y (400,350). Este segmento se indica con el comando "C" en la cadena de atributo Data.

El segundo segmento comienza con un comando de línea horizontal absoluto, "H", que especifica una línea dibujada desde el extremo de la subtrayectoria anterior (400,175) hasta un nuevo extremo (280,175). Como es un comando de línea horizontal, el valor especificado es una coordenada x.


<Path Stroke="DarkGoldenRod" 
      StrokeThickness="3"
      Data="M 100,200 C 100,25 400,350 400,175 H 280" />

Esta es la Path representada.

Path representada.

En el siguiente ejemplo, se muestra el uso de otra técnica que analizamos: un GeometryGroup con una PathGeometry. En este ejemplo, se ejercitan algunos de los tipos de geometría de contribución que se pueden usar como parte de una PathGeometry: PathFigure y los diversos elementos que pueden ser un segmento en PathFigure.Segments.


          <Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
            <Path.Data>
              <GeometryGroup>
                  <RectangleGeometry Rect="50,5 100,10" />
                  <RectangleGeometry Rect="5,5 95,180" />
                  <EllipseGeometry Center="100, 100" RadiusX="20" RadiusY="30"/>
                  <RectangleGeometry Rect="50,175 100,10" />
                  <PathGeometry>
                    <PathGeometry.Figures>
                      <PathFigureCollection>
                        <PathFigure IsClosed="true" StartPoint="50,50">
                          <PathFigure.Segments>
                            <PathSegmentCollection>
                              <BezierSegment Point1="75,300" Point2="125,100" Point3="150,50"/>
                              <BezierSegment Point1="125,300" Point2="75,100"  Point3="50,50"/>
                            </PathSegmentCollection>
                          </PathFigure.Segments>
                        </PathFigure>
                      </PathFigureCollection>
                    </PathGeometry.Figures>
                  </PathGeometry>               
              </GeometryGroup>
            </Path.Data>
          </Path>

Un motivo por el que podrías usar PathGeometry con las diversas partes es que cada una de ellas tiene propiedades Double y Point que podría tener como destino para una animación de interfaz de usuario. No puedes hacer eso con el formato de serialización de Path.Data. Para obtener más información, consulta Animaciones con guion gráfico.

Muestras de formas

Para obtener más ejemplos de cómo usar gráficos y formas en aplicaciones, consulta:

Temas relacionados

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic
Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++
Inicio rápido: Usar pinceles

 

 

Mostrar:
© 2015 Microsoft