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"/>
Mediante las propiedades RadiusX y RadiusY podemos conseguir rectángulos
con bordes redondeados.
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"/>
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>
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" />
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" />
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>
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.
Cuando necesitamos dibujar contenido gráfico en dos dimensiones (2D) con WPF, la mejor forma es
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.
Hola Francisco, no entiendo lo que quieres decir con «digitalizar shapes» y gracias por tu comentario
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.
En este enlace te explican la notación http://msdn.microsoft.com/en-us/library/ms752293.aspx
Aunque yo siempre los he creado con el Blend
Muchas gracias Oscar.
Sigue así 🙂
Saludos.
Francisco J.