Shapes en WPF

Cuando necesitamos dibujar  contenido gráfico  en dos dimensiones  (2D)  con
WPF,  la  mejor  forma  es  usando  Shapes.  Realmente  los  Shapes  son  clases
dedicadas que se utilizan para representar simples  líneas, elipses, rectángulos
y polígonos varios. Los Shapes son conocidos como primitivos porque son los
precursores de gráficos más complejos mediante la combinación de diferentes
tipos de shapes.
WPF  provee  seis  clases  que  derivan  de  la  clase  abstracta
System.Windows.Shapes.Shape:

Rectangle

De  los  Shapes  más  sencillos  con  el  que  crearemos  diferentes  tipos  de
rectángulos,  simplemente  son necesarios  establecer  las propiedades Width  y
Height.

<Rectangle Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"/> 
image 

Mediante  las propiedades RadiusX y RadiusY podemos  conseguir  rectángulos
con bordes redondeados.

image 

 

 

 

Ellipse

Al igual que el shape Rentangle, el shape Ellipse es utilizado para crear elipses
fácilmente. Estableciendo las propiedades Width y Height tenemos una elipse.

 

<Ellipse Fill="Yellow" Stroke="Blue" Height="50" Width="100" Margin="5" HorizontalAlignment="Left"/> 
image 
Line

Representa la línea que une dos puntos. Por tanto tenemos las coordenadas X
e Y de ambos puntos.

<Line Stroke="Blue" X1="120" Y1="50" X2="280" Y2="125"></Line> 

image

 

Polyline

Nos  permite  dibujar  una  secuencia  de  líneas  rectas  conectadas.  Para  ello
debemos  especificar  una  lista  de  coordenadas  X  e  Y  que  representan  los
puntos por los que pasará la recta.

<Polyline Stroke="Red" StrokeThickness="5" Points="10,150 30,140 50,160 70,130 190,100 210,240" /> 
image 
Polygon

Podríamos decir que este shape es muy parecido al anterior, al Polyline, ya que
recibe  una  lista  de  puntos  que  componen  el  polígono,  con  la  diferencia
fundamental que se unen el punto de inicio con el último punto.

<Polygon Stroke="Red" StrokeThickness="5" Points="10,150 30,140 50,160 70,130 190,100 210,240" />  

image

Path

El shape Path puede ser usado para representar formas complejas que incluyan
curvas y arcos. Para poder usar, debemos usar un tipo especial de sintaxis en
los atributos para asignar la propiedad Data.
En el siguiente ejemplo vemos algo de lo que es capaz de aportarnos el shape
Path:

 

 

 

<Path Fill="LightSkyBlue" Stroke="Black"> 
   <Path.Data> 
     <CombinedGeometry GeometryCombineMode="Union"> 
       <CombinedGeometry.Geometry1> 
          <EllipseGeometry Center="100,150" RadiusX="70" RadiusY="30" /> 
       </CombinedGeometry.Geometry1> 
       <CombinedGeometry.Geometry2> 
          <EllipseGeometry Center="200,150" RadiusX="70" RadiusY="30" /> 
       </CombinedGeometry.Geometry2> 
     </CombinedGeometry> 
   </Path.Data> 
</Path> 

 

image

Si recordais el post de Panel vemos que la  clase  Shape  deriva  de  la  clase
FrameworkElement, por lo que podemos decir que los Shapes son elementos.

Gracias a esto, tenemos las siguientes ventajas:

  • Autodibujado :El  Shape  se  autogestion  en  este  sentido  y  no  debemos  preocuparnos  por
    redibujar el shape cuando alguna propiedad del mismo cambia, ya sea tamaño,
    posición, etc.
  • Organización similar a otros elementos :Es  decir,  podemos  utilizar  los  shapes  como  elementos,  por  tanto  no  hay
    problema de incluirlos en cualquier contenedor de los descritos en anteriores
    capítulos.
  • Tienen Eventos :Disponemos de los mismos eventos que otros elementos, es decir, no debemos
    preocuparnos  en  el  trabajo  extra  que  supondría  añadir  la  posibilidad  de
    controlar eventos de ratón o similares, ya los tenemos implementados.

6 comentarios sobre “Shapes en WPF”

  1. Hola Oscar muy buen post, una cuestión, ¿la notación especial usada para digitalizar shapes en WPF podrías comentar un poco en algún post su uso en XAML?

    En mi caso ese tipo de post y los sucesivos en WPF como los anteriores son muy útiles, sigue así.

    Un saludo.
    Francisco J.

  2. Perdón, me refería a la creación mediante la notación especial para crear figuras o Shapes.

    Es que como vengo del entorno CAD y demás pues a veces se escapa alguna expresión relacionada.

    Un ejemplo de ese tipo de expresiones es:

    Saludos.
    Francisco J.

Responder a anonymous Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *