Información general sobre formas y dibujo básico en WPF

Artículo
10/07/2008

Actualización: noviembre 2007

En este tema se proporciona información general sobre cómo dibujar con objetos Shape. Shape es un tipo de UIElement que permite dibujar una forma en la pantalla. Dado que son elementos de interfaz de usuario, los objetos Shape se pueden utilizar dentro de elementos Panel y de la mayoría de los controles.

Windows Presentation Foundation (WPF) ofrece varias capas de acceso a los gráficos y a los servicios de representación. En la capa superior, los objetos Shape son fáciles de utilizar y proporcionan numerosas características útiles, como diseño y participación en el sistema de eventos de Windows Presentation Foundation (WPF).

Este tema contiene las secciones siguientes.

Objetos de formas
Utilizar trazados y geometrías
Pintar formas
Formas extensibles
Transformar formas
Temas relacionados

Objetos de formas

WPF proporciona varios objetos Shape listos para usar. Todos los objetos de formas heredan de la clase Shape. Los objetos de formas disponibles incluyen Ellipse, Line, Path, Polygon, Polyline y Rectangle. Los objetos Shape comparten las siguientes propiedades comunes.

Stroke: describe cómo se pinta el contorno de la forma.
StrokeThickness: describe el grosor del contorno de la forma.
Fill: describe cómo se pinta el interior de la forma.
Propiedades de datos para especificar coordenadas y vértices, medidos en píxeles independientes del dispositivo.

Dado que se derivan de UIElement, los objetos de formas se pueden utilizar dentro de los paneles y en la mayoría de los controles. El panel Canvas es una opción particularmente apropiada para crear dibujos complejos, porque admite la posición absoluta de sus objetos secundarios.

La clase Line permite dibujar una línea entre dos puntos. En el ejemplo siguiente se muestran varias maneras de especificar coordenadas de línea y propiedades de trazo.

<Canvas Height="300" Width="300">

  <!-- Draws a diagonal line from (10,10) to (50,50). -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />

  <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    StrokeThickness="4"
    Canvas.Left="100">
    <Line.Stroke>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Blue" Offset="0.25" />
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Line.Stroke>
  </Line>

  <!-- Draws a horizontal line from (10,60) to (150,60). -->
  <Line
     X1="10" Y1="60"
     X2="150" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

</Canvas>

' Add a Line Element
Dim myLine As New Line()
myLine.Stroke = Brushes.LightSteelBlue
myLine.X1 = 1
myLine.X2 = 50
myLine.Y1 = 1
myLine.Y2 = 50
myLine.HorizontalAlignment = HorizontalAlignment.Left
myLine.VerticalAlignment = VerticalAlignment.Center
myLine.StrokeThickness = 2
myGrid.Children.Add(myLine)

// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
myGrid.Children.Add(myLine);

En la siguiente ilustración se muestra la línea (Line) representada.

Ilustración de línea

Aunque la clase Line proporciona una propiedad Fill, establecerla no surte ningún efecto porque Line no tiene área.

Otra forma común es Ellipse. Cree una forma Ellipse definiendo las propiedades Width y Height de la forma. Para dibujar un círculo, especifique una forma Ellipse cuyos valores de Width y Height sean iguales.

<Ellipse
Fill="Yellow"
Height="100"
Width="200"
StrokeThickness="2"
Stroke="Black"/>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace SDKSample
{
    public partial class SetBackgroundColorOfShapeExample : Page
    {
        public SetBackgroundColorOfShapeExample()
        {
            // Create a StackPanel to contain the shape.
            StackPanel myStackPanel = new StackPanel();

            // Create a red Ellipse.
            Ellipse myEllipse = new Ellipse();

            // Create a SolidColorBrush with a red color to fill the 
            // Ellipse with.
            SolidColorBrush mySolidColorBrush = new SolidColorBrush();

            // Describes the brush's color using RGB values. 
            // Each value has a range of 0-255.
            mySolidColorBrush.Color = Color.FromArgb(255, 255, 0, 0);
            myEllipse.Fill = mySolidColorBrush; 

            // Set the width and height of the Ellipse.
            myEllipse.Width = 100;
            myEllipse.Height = 100;

            // Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse);

            this.Content = myStackPanel;
        }

    }
}

En la siguiente ilustración se muestra un ejemplo de Ellipse representada.

Ilustración de elipse

Utilizar trazados y geometrías

La clase Path permite dibujar curvas y formas complejas. Estas curvas y formas se describen mediante objetos Geometry. Para utilizar un Path, se crea una Geometry y se utiliza para establecer la propiedad Data del objeto Path.

Hay gran variedad de objetos Geometry entre los que elegir. Las clases LineGeometry, RectangleGeometry y EllipseGeometry describen formas relativamente simples. Para crear formas más complejas o crear curvas, utilice PathGeometry.

PathGeometry y PathSegments

Los objetos PathGeometry se componen de uno o más objetos PathFigure; cada PathFigure representa una "figura" o forma diferente. Cada PathFigure, a su vez, está compuesta de uno o varios objetos PathSegment, cada uno de los cuales representa una parte conectada de la figura o forma. Los tipos de segmentos incluyen los siguientes: LineSegment, BezierSegment y ArcSegment.

En el ejemplo siguiente, se utiliza Path para dibujar una curva Bézier cuadrática.

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

En la siguiente ilustración se muestra la forma representada.

Ilustración de trayecto

Para obtener más información sobre PathGeometry y las demás clases Geometry, consulte Información general sobre geometría.

Sintaxis XAML abreviada

En Lenguaje de marcado de aplicaciones extensible (XAML), puede utilizar también una sintaxis abreviada especial para describir Path. En el ejemplo siguiente, se utiliza la sintaxis abreviada para dibujar una forma compleja.

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

En la ilustración siguiente, se muestra el trazado (Path) representado.

Ilustración de trayecto

La cadena de atributos de Data comienza con el comando "moveto", indicado por M, que establece un punto de inicio para el trazado en el sistema de coordenadas de Canvas. Los parámetros de datos de Path distinguen mayúsculas de minúsculas. La M mayúscula indica una ubicación absoluta para el nuevo punto activo. Una m minúscula indicaría coordenadas relativas. El primer segmento es una curva de Bézier cúbica, que comienza en (100,200) y termina en (400,175). Se ha dibujado mediante los dos puntos de control (100,25) y (400,350). Este segmento se indica mediante el comando C en la cadena de atributos de Data. De nuevo, la C mayúscula indica un trazado absoluto; la c minúscula indicaría un trazado relativo.

El segundo segmento comienza por un comando H "lineto" horizontal, que especifica una línea trazada desde el extremo del subtrazado anterior (400,175) hasta un nuevo extremo (280,175). Dado que se trata de un comando "lineto" horizontal, el valor especificado es una coordenada X.

Para obtener la sintaxis del trazado completo, consulte la referencia de Data y Cómo: Crear una forma mediante una clase PathGeometry.

Pintar formas

Los objetos Brush se utilizan para pintar las propiedades Stroke y Fill de una forma. En el ejemplo siguiente, se especifican el trazo y el relleno de Ellipse. Observe que para las propiedades de pincel es válido especificar una palabra clave o un valor de color hexadecimal. Para obtener más información sobre las palabras clave de colores disponibles, consulte las propiedades de la clase Colors en el espacio de nombres System.Windows.Media.

<Canvas Background="LightGray"> 
   <Ellipse
      Canvas.Top="50"
      Canvas.Left="50"
      Fill="#FFFFFF00"
      Height="75"
      Width="75"
      StrokeThickness="5"
      Stroke="#FF0000FF"/>
</Canvas>

En la siguiente ilustración se muestra la forma Ellipse representada.

Elipse

Como alternativa, puede utilizar la sintaxis de elementos de propiedades para crear explícitamente un objeto SolidColorBrush a fin de pintar la forma con un color sólido.

<!-- This polygon shape uses pre-defined color values for its Stroke and
     Fill properties. 
     The SolidColorBrush's Opacity property affects the fill color in 
     this case by making it slightly transparent (opacity of 0.4) so 
     that it blends with any underlying color. -->
   
<Polygon
    Points="300,200 400,125 400,275 300,200"
    Stroke="Purple" 
    StrokeThickness="2">
    <Polygon.Fill>
       <SolidColorBrush Color="Blue" Opacity="0.4"/>
    </Polygon.Fill>
</Polygon>

En la siguiente ilustración se muestra la forma representada.

Ilustración de SolidColorBrush

También puede pintar el trazo o el relleno de una forma con degradados, imágenes, patrones, etc. Para obtener más información, vea Información general sobre el dibujo con colores sólidos y degradados.

Formas extensibles

Todas las clases Line, Path, Polygon, Polyline y Rectangle tienen una propiedad Stretch. Esta propiedad determina cómo se expande el contenido de un objeto Shape (la forma que se va a dibujar) hasta rellenar el espacio de diseño del objeto Shape. El objeto de diseño de un objeto Shape es la cantidad de espacio que el sistema de diseño asigna a Shape, bien basándose en un valor explícito de Width y Height, o bien en sus valores de HorizontalAlignment y VerticalAlignment. Para obtener información adicional sobre el diseño en Windows Presentation Foundation, consulte la información general de Sistema de diseño.

La propiedad Stretch acepta uno de los valores siguientes:

None: no se expande el contenido del objeto Shape.
Fill: el contenido del objeto Shape se expande hasta rellenar su espacio de diseño. No se conserva la relación de aspecto.
Uniform: el contenido del objeto Shape se expande tanto como sea posible hasta rellenar su espacio de diseño conservando su relación de aspecto original.
UniformToFill: el contenido del objeto Shape se expande hasta rellenar completamente su espacio de diseño conservando su relación de aspecto original.

Tenga en cuenta que, cuando se expande el contenido de un objeto Shape, el contorno del objeto Shape se pinta después de efectuar la expansión.

En el ejemplo siguiente, se utiliza Polygon para dibujar un triángulo muy pequeño de (0,0) a (0,1) y a (1,1). Las propiedades Width y Height del objeto Polygon se establecen en 100 y su propiedad Stretch se establece en Fill. Como resultado, el contenido del objeto Polygon (el triángulo), se expande hasta rellenar el espacio mayor.

...
<Polygon
  Points="0,0 0,1 1,1"
  Fill="Blue"
  Width="100"
  Height="100"
  Stretch="Fill"
  Stroke="Black"
  StrokeThickness="2" />
...

...
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0,0));
myPointCollection.Add(new Point(0,1));
myPointCollection.Add(new Point(1,1));

Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = Brushes.Blue;
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = Brushes.Black;
myPolygon.StrokeThickness = 2;
...

Transformar formas

La clase Transform proporciona el medio para transformar las formas en un plano bidimensional. Los distintos tipos de transformación incluyen rotación (RotateTransform), escala (ScaleTransform), sesgo (SkewTransform) y traslación (TranslateTransform).

Una transformación común que se aplica a las formas es el giro. Para girar una forma, cree una RotateTransform y especifique su Angle. Un valor de Angle de 45 gira el elemento 45 grados en el sentido de las agujas del reloj; un ángulo de 90 gira el elemento 90 grados en el sentido de las agujas del reloj; y así sucesivamente. Establezca las propiedades CenterX y CenterY si desea controlar el punto sobre el que se gira el elemento. Estos valores de propiedades se expresan en el espacio de coordenadas del elemento que se transforma. CenterX y CenterY tienen un valor predeterminado de cero. Por último, aplique RotateTransform al elemento. Si desea que la transformación no afecte al diseño, establezca la propiedad RenderTransform de la forma.

En el ejemplo siguiente, se utiliza RotateTransform para girar una forma 45 grados sobre la esquina superior izquierda de la misma (0,0).

<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50">
  <Polyline.RenderTransform>
    <RotateTransform CenterX="0" CenterY="0" Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

En el ejemplo siguiente, se gira otra forma 45 grados, pero esta vez sobre el punto (25,50).

<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline 
  Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5">
  <Polyline.RenderTransform>
    <RotateTransform Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

En la ilustración siguiente se muestran los resultados de aplicar las dos transformaciones.

rotaciones de 45 grados con diferentes centros

En los ejemplos anteriores, se aplicó una sola transformación a cada objeto de forma. Para aplicar varias transformaciones a una forma (o a cualquier otro elemento de la interfaz de usuario), utilice TransformGroup.