Gráficos en Windows Presentation Foundation

Windows Presentation Foundation representa un cambio radical en el diseño de las aplicaciones, nos viene a brindar una serie de facilidades que nos permite hacer muchas cosas nuevas.

Desde hace aproximadamente 20 años se ha utilizado la misma interfaz de dispositivo gráfico, conocida como GDI, más recientemente GDI+, esto para gráficos bidimensionales. Para Gráficos tridimensionales requeríamos de algo como Direct3D estas tecnologías hacían el desarrollo complicado, ya que tenía que conocer en detalle la forma de usar cada una de ellas, ahora Windows Presentation Foundation introduce una serie de nuevas y avanzadas características que permiten un mejor aprovechamiento de la capacidad gráfica de nuestras aplicaciones y todo en una sola tecnología.

Ahora con WPF podemos trabajar de una forma más natural con gráficos, efectos, sonido y video en nuestras aplicaciones, ya que integra soporte para multimedia, gráficos vectoriales bidimensionales, tridimensionales, animación, y otra serie de características que nos permiten hacer diseños que hace algún tiempo parecían imposibles.

Veamos rápidamente algunas de estas características

Resolución independiente

Mejoras en la precisión

Gráficos avanzados y animación

Aceleración de Hardware

Ya sabemos un poco de lo que ahora tenemos, pero veamos qué podemos hacer:

Gráficos Bidimensionales

Para la creación de gráficos bidimensionales contamos con las siguientes instrucciones:

Line: Dibuja un línea recta entre dos puntos.

Ellipse: Dibuja un elipse.

Rectangle: Dibuja un rectángulo.

Polygon: Dibuja una figura cerrada definida por varias líneas rectas unidas entre sí.

Polyline: Dibuja una figura abierta definida por varias líneas rectas unidas entre sí.

Path: Dibuja figuras definidas por rutas arbitrarias (abiertas o cerradas).

Veamos un ejemplo:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <Canvas> <!-- Crear una Circulo --> <Ellipse Fill="LightGreen" Height="100" Width="100" StrokeThickness="2" Stroke="Black"/> <!-- Crear una linea --> <Line X1="50" Y1="40" X2="50" Y2="60" Stroke="Red" StrokeThickness="2" /> <!-- Crear una Circulo --> <Ellipse Canvas.Top="25" Canvas.Left="25" Fill="LightBlue" Height="10" Width="10" StrokeThickness="1" Stroke="White"/> <!-- Crear una Circulo --> <Ellipse Canvas.Top="25" Canvas.Left="65" Fill="LightBlue" Height="10" Width="10" StrokeThickness="1" Stroke="White"/> <!-- Crear una figura mediante el path --> <Path Stroke="Black" StrokeThickness="1"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="25,70"> <PathFigure.Segments> <PathSegmentCollection> <QuadraticBezierSegment Point1="50,90" Point2="75,70" /> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Canvas> </Page>

Otro elemento importante es el brush, cada elemento visible dibujado en pantalla fue “pintado” por medio de un brush, ya sea el fondo de un botón, de un texto o el relleno de una figura geométrica. El Brush nos permite cambiar el fondo sólido a los objetos y hacer gradientes y otros efectos. Veamos un par de ejemplos de lo que podemos hacer con el brush:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <Canvas> <!-- Crear una Circulo --> <Ellipse Height="100" Width="100" StrokeThickness="2" Stroke="Black"> <Ellipse.Fill> <LinearGradientBrush> <GradientStop Color="Yellow" Offset="0.0" /> <GradientStop Color="Orange" Offset="0.5" /> <GradientStop Color="Red" Offset="1.0" /> </LinearGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Crear una linea --> <Line X1="50" Y1="40" X2="50" Y2="60" Stroke="Red" StrokeThickness="2" /> <!-- Crear una Circulo --> <Ellipse Canvas.Top="25" Canvas.Left="25" Height="10" Width="10" StrokeThickness="1" Stroke="White"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.25,0.25"> <GradientStop Color="White" Offset="0.0" /> <GradientStop Color="LightBlue" Offset="0.5" /> <GradientStop Color="Blue" Offset="1.0" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Crear una Circulo --> <Ellipse Canvas.Top="25" Canvas.Left="65" Height="10" Width="10" StrokeThickness="1" Stroke="White"> <Ellipse.Fill> <RadialGradientBrush GradientOrigin="0.25,0.25"> <GradientStop Color="White" Offset="0.0" /> <GradientStop Color="LightBlue" Offset="0.5" /> <GradientStop Color="Blue" Offset="1.0" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse> <!-- Crear una figura mediante el path --> <Path Stroke="Black" StrokeThickness="1"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="25,70"> <PathFigure.Segments> <PathSegmentCollection> <QuadraticBezierSegment Point1="50,90" Point2="75,70" /> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path> </Canvas> </Page>

Esto es solo una pequeña pincelada de lo que se puede hacer en dos dimensiones, también tenemos la posibilidad de trabajar en tres dimensiones, pero ese tema lo trataré en un futuro post. Gracias.