Información general sobre objetos Drawing

Actualización: noviembre 2007

En este tema se presentan los objetos Drawing y se describe cómo utilizarlos para dibujar con eficacia formas, mapas de bits, texto y multimedia. Utilice objetos Drawing cuando cree imágenes prediseñadas, pinte con DrawingBrush o use objetos Visual.

Este tema contiene las secciones siguientes.

• ¿Qué es un objeto Drawing?
• Dibujar una forma
• Dibujar una imagen
• Reproducir multimedia (sólo mediante código)
• Dibujar texto
• Dibujos compuestos
• Mostrar un dibujo como una imagen
• Pintar un objeto con un dibujo
• Representar un dibujo con un objeto visual
• Objetos DrawingContext
• Enumerar el contenido de un objeto visual
• Temas relacionados

¿Qué es un objeto Drawing?

Un objeto de dibujo, o Drawing, describe el contenido visible, como una forma, un mapa de bits, vídeo o una línea de texto. Los diferentes tipos de dibujos describen tipos diferentes de contenido. A continuación, se muestra una lista de tipos diferentes de objetos de dibujo.

• GeometryDrawing: dibuja una forma.

• ImageDrawing: dibuja una imagen.

• GlyphRunDrawing: dibuja texto.

• VideoDrawing: reproduce un archivo de audio o vídeo.

• DrawingGroup: dibuja otros dibujos. Utilice un grupo de dibujo para combinar otros dibujos en un único dibujo compuesto.

Los objetos Drawing son versátiles; existen numerosas maneras de utilizar un objeto Drawing.

• Puede mostrarlo como una imagen utilizando un objeto DrawingImage y un control Image.

• Puede utilizarlo con un objeto DrawingBrush para pintar un objeto, como la propiedad Background de Page.

• Puede utilizarlo para describir el aspecto de un objeto DrawingVisual.

• Puede utilizarlo para enumerar el contenido de un objeto Visual.

WPF proporciona otros tipos de objetos que son capaces de dibujar formas, mapas de bits, texto y multimedia. Por ejemplo, también puede utilizar objetos Shape para dibujar formas, mientras que el control MediaElement proporciona otra manera de agregar vídeo a la aplicación. Así pues, ¿cuándo se deben utilizar los objetos Drawing? Cuando se pueden sacrificar las características de nivel de marco de trabajo para obtener ventajas de rendimiento, o cuando se necesitan las características de Freezable. Debido a que los objetos Drawing carecen de compatibilidad con Sistema de diseño, la información de entrada y el foco, proporcionan ventajas de rendimiento que los hace idóneos para describir fondos o imágenes prediseñadas, así como para dibujos de bajo nivel con objetos Visual.

Al ser un objeto de tipo Freezable, los objetos Drawing obtienen varias características especiales, entre las que se incluyen las siguientes: pueden declararse como recursos, compartirse entre varios objetos, convertirse en objetos de sólo lectura para mejorar el rendimiento, clonarse y convertirse en seguros para subprocesos. Para obtener más información sobre las diferentes características que proporcionan los objetos Freezable, consulte Información general sobre objetos Freezable.

Dibujar una forma

Para dibujar una forma, se utiliza un objeto GeometryDrawing. La propiedad Geometry de un dibujo de geometría describe la forma que se va a dibujar, su propiedad Brush describe cómo se debe pintar el interior de la forma, y su propiedad Pen describe cómo se debe dibujar su contorno.

En el ejemplo siguiente se utiliza GeometryDrawing para dibujar una forma. La forma se describe mediante un objeto GeometryGroup y dos objetos EllipseGeometry. El interior de la forma se pinta con LinearGradientBrush y su contorno se dibuja con un objeto Pen con la propiedad Black.

En este ejemplo se crea el objeto GeometryDrawing siguiente.

Objeto GeometryDrawing

//
// Create the Geometry to draw.
//
GeometryGroup ellipses = new GeometryGroup();
ellipses.Children.Add(
    new EllipseGeometry(new Point(50,50), 45, 20)
    );
ellipses.Children.Add(
    new EllipseGeometry(new Point(50, 50), 20, 45)
    );


//
// Create a GeometryDrawing.
//
GeometryDrawing aGeometryDrawing = new GeometryDrawing();
aGeometryDrawing.Geometry = ellipses;

// Paint the drawing with a gradient.
aGeometryDrawing.Brush = 
    new LinearGradientBrush(
        Colors.Blue, 
        Color.FromRgb(204,204,255), 
        new Point(0,0), 
        new Point(1,1));

// Outline the drawing with a solid color.
aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

<GeometryDrawing>
  <GeometryDrawing.Geometry>

    <!-- Create a composite shape. -->
    <GeometryGroup>
      <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
      <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
    </GeometryGroup>
  </GeometryDrawing.Geometry>
  <GeometryDrawing.Brush>

    <!-- Paint the drawing with a gradient. -->
    <LinearGradientBrush>
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="1.0" Color="#CCCCFF" />
    </LinearGradientBrush>
  </GeometryDrawing.Brush>
  <GeometryDrawing.Pen>

    <!-- Outline the drawing with a solid color. -->
    <Pen Thickness="10" Brush="Black" />
  </GeometryDrawing.Pen>
</GeometryDrawing>

Para obtener el ejemplo completo, consulte Cómo: Crear un objeto GeometryDrawing.

Otras clases Geometry, como PathGeometry, permiten crear formas más complejas con curvas y arcos. Para obtener más información acerca de los objetos Geometry, consulte Información general sobre geometría.

Para obtener más información sobre otras maneras de dibujar formas en las que no se utilizan objetos Drawing, consulte Información general sobre formas y dibujo básico en WPF.

Dibujar una imagen

Para dibujar una imagen, se utiliza ImageDrawing. La propiedad ImageSource de un objeto ImageDrawing describe la imagen que se va a dibujar, mientras que su propiedad Rect define el área donde se dibuja la imagen.

En el ejemplo siguiente se dibuja una imagen en un rectángulo situado en (75,75), es decir, de 100 por 100 píxeles. En la ilustración siguiente se muestra el objeto ImageDrawing creado por el ejemplo. Se agregó un borde gris para mostrar los límites de ImageDrawing.

Objeto ImageDrawing de 100 por 100 píxeles

// Create a 100 by 100 image with an upper-left point of (75,75). 
ImageDrawing bigKiwi = new ImageDrawing();
bigKiwi.Rect = new Rect(75, 75, 100, 100);
bigKiwi.ImageSource = new BitmapImage(
    new Uri(@"sampleImages\kiwi.png", UriKind.Relative));

<!-- The Rect property specifies that the image only fill a 100 by 100
     rectangular area. -->
<ImageDrawing Rect="75,75,100,100" ImageSource="sampleImages\kiwi.png"/>

Para obtener más información acerca de las imágenes, consulte Información general sobre imágenes.

Reproducir multimedia (sólo mediante código)

Para reproducir un archivo de audio o vídeo, se utiliza un objeto VideoDrawing y un objeto MediaPlayer. Hay dos maneras de cargar y reproducir elementos multimedia. La primera es utilizar MediaPlayer y VideoDrawing por sí solos; la segunda consiste en crear su propio objeto MediaTimeline para utilizarlo con MediaPlayer y VideoDrawing.

Para reproducir los elementos multimedia sin crear su propio objeto MediaTimeline, siga estos pasos.

1. Crear un objeto MediaPlayer.

   MediaPlayer player = new MediaPlayer();
   

2. Utilice el método Open para cargar el archivo multimedia.

   player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
   

3. Cree un control VideoDrawing.

   VideoDrawing aVideoDrawing = new VideoDrawing();
   

4. Especifique el tamaño y la ubicación donde dibujar el elemento multimedia estableciendo la propiedad Rect de VideoDrawing.

   aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
   

5. Establezca la propiedad Player de VideoDrawing con el objeto MediaPlayer que ha creado.

   aVideoDrawing.Player = player;
   

6. Utilice el método Play de MediaPlayer para iniciar la reproducción del elemento multimedia.

   // Play the video once.
   player.Play();        
   

En el ejemplo siguiente se utilizan los objetos VideoDrawing y MediaPlayer para reproducir una vez un archivo de vídeo.

//
// Create a VideoDrawing.
//      
MediaPlayer player = new MediaPlayer();

player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));

VideoDrawing aVideoDrawing = new VideoDrawing();

aVideoDrawing.Rect = new Rect(0, 0, 100, 100);

aVideoDrawing.Player = player;

// Play the video once.
player.Play();        

Para controlar mejor el tiempo en los elementos multimedia, utilice un objeto MediaTimeline con los objetos MediaPlayer y VideoDrawing. MediaTimeline permite especificar si el vídeo se debe repetir. Para utilizar MediaTimeline con VideoDrawing, siga estos pasos:

1. Declare MediaTimeline y establezca sus comportamientos del control de tiempo.

   // Create a MediaTimeline.
   MediaTimeline mTimeline = 
       new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative)); 
   
   // Set the timeline to repeat.
   mTimeline.RepeatBehavior = RepeatBehavior.Forever;
   

2. Cree un MediaClock a partir de MediaTimeline.

   // Create a clock from the MediaTimeline.
   MediaClock mClock = mTimeline.CreateClock();
   

3. Cree un MediaPlayer y utilice MediaClock para establecer su propiedad Clock.

   MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
   repeatingVideoDrawingPlayer.Clock = mClock;
   

4. Cree un VideoDrawing y asigne MediaPlayer a la propiedad Player de VideoDrawing.

   VideoDrawing repeatingVideoDrawing = new VideoDrawing();
   repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
   repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;  
   

En el ejemplo siguiente se utiliza MediaTimeline con MediaPlayer y con VideoDrawing para reproducir repetidamente un vídeo.

//
// Create a VideoDrawing that repeats.
//

// Create a MediaTimeline.
MediaTimeline mTimeline = 
    new MediaTimeline(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative)); 

// Set the timeline to repeat.
mTimeline.RepeatBehavior = RepeatBehavior.Forever;

// Create a clock from the MediaTimeline.
MediaClock mClock = mTimeline.CreateClock();

MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
repeatingVideoDrawingPlayer.Clock = mClock;

VideoDrawing repeatingVideoDrawing = new VideoDrawing();
repeatingVideoDrawing.Rect = new Rect(150, 0, 100, 100);
repeatingVideoDrawing.Player = repeatingVideoDrawingPlayer;  

Tenga en cuenta que, al utilizar MediaTimeline, se utiliza el objeto ClockController interactivo devuelto de la propiedad Controller de MediaClock para controlar la reproducción multimedia, en lugar de los métodos interactivos de MediaPlayer.

Dibujar texto

Para dibujar texto, se utiliza un objeto GlyphRunDrawing y un objeto GlyphRun. En el ejemplo siguiente, se utiliza GlyphRunDrawing para dibujar el texto "Hello World".

GlyphRun theGlyphRun = new GlyphRun(
    new GlyphTypeface(new Uri(@"C:\WINDOWS\Fonts\TIMES.TTF")),
    0,
    false,
    13.333333333333334,
    new ushort[]{43, 72, 79, 79, 82, 3, 58, 82, 85, 79, 71},
    new Point(0, 12.29),
    new double[]{
        9.62666666666667, 7.41333333333333, 2.96, 
        2.96, 7.41333333333333, 3.70666666666667, 
        12.5866666666667, 7.41333333333333, 
        4.44, 2.96, 7.41333333333333},
    null,
    null,
    null,
    null,
    null,
    null


    );

GlyphRunDrawing gDrawing = new GlyphRunDrawing(Brushes.Black, theGlyphRun);

<GlyphRunDrawing ForegroundBrush="Black">
  <GlyphRunDrawing.GlyphRun>
    <GlyphRun 
      CaretStops="{x:Null}" 
      ClusterMap="{x:Null}" 
      IsSideways="False" 
      GlyphOffsets="{x:Null}" 
      GlyphIndices="43 72 79 79 82 3 58 82 85 79 71" 
      BaselineOrigin="0,12.29"  
      FontRenderingEmSize="13.333333333333334" 
      DeviceFontName="{x:Null}" 
      AdvanceWidths="9.62666666666667 7.41333333333333 2.96 2.96 7.41333333333333 3.70666666666667 12.5866666666667 7.41333333333333 4.44 2.96 7.41333333333333" 
      BidiLevel="0">
      <GlyphRun.GlyphTypeface>
        <GlyphTypeface FontUri="C:\WINDOWS\Fonts\TIMES.TTF" />
      </GlyphRun.GlyphTypeface>
    </GlyphRun>
  </GlyphRunDrawing.GlyphRun>
</GlyphRunDrawing>

GlyphRun es un objeto de bajo nivel cuya finalidad es utilizarlo en escenarios de presentación de documentos de formato fijo y de impresión. Una manera más fácil de mostrar texto en la pantalla es utilizar Label o TextBlock. Para obtener más información sobre GlyphRun, consulte la información general de Introducción al objeto GlyphRun y al elemento Glyphs.

Dibujos compuestos

Un objeto DrawingGroup permite combinar varios dibujos en un único dibujo compuesto. Mediante un objeto DrawingGroup, puede combinar formas, imágenes y texto en un mismo objeto Drawing.

En el ejemplo siguiente se utiliza DrawingGroup para combinar dos objetos GeometryDrawing y un objeto ImageDrawing. Este ejemplo produce el siguiente resultado.

Dibujo compuesto

//
// Create three drawings.
//
GeometryDrawing ellipseDrawing =
    new GeometryDrawing(
        new SolidColorBrush(Color.FromArgb(102, 181, 243, 20)),
        new Pen(Brushes.Black, 4),
        new EllipseGeometry(new Point(50,50), 50, 50)
    );

ImageDrawing kiwiPictureDrawing = 
    new ImageDrawing(
        new BitmapImage(new Uri(@"sampleImages\kiwi.png", UriKind.Relative)), 
        new Rect(50,50,100,100));

GeometryDrawing ellipseDrawing2 =
    new GeometryDrawing(
        new SolidColorBrush(Color.FromArgb(102,181,243,20)),
        new Pen(Brushes.Black, 4),
        new EllipseGeometry(new Point(150, 150), 50, 50)
    );

// Create a DrawingGroup to contain the drawings.
DrawingGroup aDrawingGroup = new DrawingGroup();
aDrawingGroup.Children.Add(ellipseDrawing);
aDrawingGroup.Children.Add(kiwiPictureDrawing);
aDrawingGroup.Children.Add(ellipseDrawing2);

<DrawingGroup>

  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="50,50" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
  <ImageDrawing ImageSource="sampleImages\kiwi.png" Rect="50,50,100,100"/>
  <GeometryDrawing Brush="#66B5F314">
    <GeometryDrawing.Geometry>
      <EllipseGeometry Center="150,150" RadiusX="50"  RadiusY="50"/>
    </GeometryDrawing.Geometry>
    <GeometryDrawing.Pen>
      <Pen Brush="Black" Thickness="4" />
    </GeometryDrawing.Pen>
  </GeometryDrawing>
</DrawingGroup>

DrawingGroup también permite aplicar máscaras de opacidad, transformaciones, efectos de mapa de bits y otras operaciones a su contenido. Las operaciones de DrawingGroup se aplican en el orden siguiente: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet y, por último, Transform.

En la ilustración siguiente se muestra el orden en el que se aplican las operaciones de DrawingGroup.

Orden de las operaciones de DrawingGroup

En la tabla siguiente se describen las propiedades que puede utilizar para manipular el contenido de un objeto DrawingGroup.

Mostrar un dibujo como una imagen

Para mostrar Drawing con un control Image, utilice DrawingImage como propiedad Source del control Image y establezca la propiedad DrawingImage.Drawing del objeto DrawingImage en el dibujo que desea mostrar.

En el ejemplo siguiente se utiliza un objeto DrawingImage y un control Image para mostrar GeometryDrawing. Este ejemplo produce el siguiente resultado.

Objeto DrawingImage

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

namespace SDKSample
{
    public class DrawingImageExample : Page
    {

        public DrawingImageExample()
        {

            //
            // Create the Geometry to draw.
            //
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50,50), 45, 20)
                );
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50, 50), 20, 45)
                );

            //
            // Create a GeometryDrawing.
            //
            GeometryDrawing aGeometryDrawing = new GeometryDrawing();
            aGeometryDrawing.Geometry = ellipses;

            // Paint the drawing with a gradient.
            aGeometryDrawing.Brush = 
                new LinearGradientBrush(
                    Colors.Blue, 
                    Color.FromRgb(204,204,255), 
                    new Point(0,0), 
                    new Point(1,1));

            // Outline the drawing with a solid color.
            aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

            //
            // Use a DrawingImage and an Image control
            // to display the drawing.
            //
            DrawingImage geometryImage = new DrawingImage(aGeometryDrawing);

            // Freeze the DrawingImage for performance benefits.
            geometryImage.Freeze();

            Image anImage = new Image();
            anImage.Source = geometryImage;
            anImage.HorizontalAlignment = HorizontalAlignment.Left;

            //
            // Place the image inside a border and
            // add it to the page.
            //
            Border exampleBorder = new Border();
            exampleBorder.Child = anImage;
            exampleBorder.BorderBrush = Brushes.Gray;
            exampleBorder.BorderThickness = new Thickness(1);
            exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
            exampleBorder.VerticalAlignment = VerticalAlignment.Top;
            exampleBorder.Margin = new Thickness(10);

            this.Margin = new Thickness(20);
            this.Background = Brushes.White;
            this.Content = exampleBorder;
        }

    }
}

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Background="White" Margin="20">

  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Margin="10">

    <!-- This image uses a Drawing object for its source. -->
    <Image>
      <Image.Source>
        <DrawingImage PresentationOptions:Freeze="True">
          <DrawingImage.Drawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                  <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush>
                  <GradientStop Offset="0.0" Color="Blue" />
                  <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
              <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingImage.Drawing>
        </DrawingImage>
      </Image.Source>
    </Image>
  </Border>

</Page>

Pintar un objeto con un dibujo

Un objeto DrawingBrush es un tipo de pincel que pinta una área con un objeto de dibujo. Puede utilizarlo para pintar casi cualquier objeto gráfico con un dibujo. La propiedad Drawing de un objeto DrawingBrush describe su propiedad Drawing. Para representar un Drawing con DrawingBrush, agréguelo al pincel utilizando la propiedad Drawing del pincel y utilice el pincel para pintar un objeto gráfico, como un control o panel.

En los ejemplos siguientes se utiliza un DrawingBrush para pintar la propiedad Fill de un objeto Rectangle con una trama creada a partir de un objeto GeometryDrawing. Este ejemplo produce el siguiente resultado.

Objeto GeometryDrawing utilizado con un objeto DrawingBrush

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

namespace SDKSample
{
    public class DrawingBrushExample : Page
    {

        public DrawingBrushExample()
        {

            //
            // Create the Geometry to draw.
            //
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50,50), 45, 20)
                );
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50, 50), 20, 45)
                );

            //
            // Create a GeometryDrawing.
            //
            GeometryDrawing aGeometryDrawing = new GeometryDrawing();
            aGeometryDrawing.Geometry = ellipses;

            // Paint the drawing with a gradient.
            aGeometryDrawing.Brush = 
                new LinearGradientBrush(
                    Colors.Blue, 
                    Color.FromRgb(204,204,255), 
                    new Point(0,0), 
                    new Point(1,1));

            // Outline the drawing with a solid color.
            aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

            DrawingBrush patternBrush = new DrawingBrush(aGeometryDrawing);
            patternBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
            patternBrush.TileMode = TileMode.Tile;
            patternBrush.Freeze();

            //
            // Create an object to paint.
            //
            Rectangle paintedRectangle = new Rectangle();
            paintedRectangle.Width = 100;
            paintedRectangle.Height = 100;
            paintedRectangle.Fill = patternBrush;

            //
            // Place the image inside a border and
            // add it to the page.
            //
            Border exampleBorder = new Border();
            exampleBorder.Child = paintedRectangle;
            exampleBorder.BorderBrush = Brushes.Gray;
            exampleBorder.BorderThickness = new Thickness(1);
            exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
            exampleBorder.VerticalAlignment = VerticalAlignment.Top;
            exampleBorder.Margin = new Thickness(10);

            this.Margin = new Thickness(20);
            this.Background = Brushes.White;
            this.Content = exampleBorder;
        }
    }
}

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="PresentationOptions"
  Margin="20" Background="White">

  <Border BorderBrush="Gray" BorderThickness="1" 
    HorizontalAlignment="Left" VerticalAlignment="Top"
    Margin="10">
    <Rectangle Width="100" Height="100">
      <Rectangle.Fill>
        <DrawingBrush PresentationOptions:Freeze="True"
                      Viewport="0,0,0.25,0.25" TileMode="Tile">
          <DrawingBrush.Drawing>
            <GeometryDrawing>
              <GeometryDrawing.Geometry>
                <GeometryGroup>
                  <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                  <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                </GeometryGroup>
              </GeometryDrawing.Geometry>
              <GeometryDrawing.Brush>
                <LinearGradientBrush>
                  <GradientStop Offset="0.0" Color="Blue" />
                  <GradientStop Offset="1.0" Color="#CCCCFF" />
                </LinearGradientBrush>
              </GeometryDrawing.Brush>
              <GeometryDrawing.Pen>
                <Pen Thickness="10" Brush="Black" />
              </GeometryDrawing.Pen>
            </GeometryDrawing>
          </DrawingBrush.Drawing>
        </DrawingBrush>
      </Rectangle.Fill>

    </Rectangle>
  </Border>


</Page>

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

namespace SDKSample
{
    public class DrawingBrushExample : Page
    {

        public DrawingBrushExample()
        {

            //
            // Create the Geometry to draw.
            //
            GeometryGroup ellipses = new GeometryGroup();
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50,50), 45, 20)
                );
            ellipses.Children.Add(
                new EllipseGeometry(new Point(50, 50), 20, 45)
                );

            //
            // Create a GeometryDrawing.
            //
            GeometryDrawing aGeometryDrawing = new GeometryDrawing();
            aGeometryDrawing.Geometry = ellipses;

            // Paint the drawing with a gradient.
            aGeometryDrawing.Brush = 
                new LinearGradientBrush(
                    Colors.Blue, 
                    Color.FromRgb(204,204,255), 
                    new Point(0,0), 
                    new Point(1,1));

            // Outline the drawing with a solid color.
            aGeometryDrawing.Pen = new Pen(Brushes.Black, 10);

            DrawingBrush patternBrush = new DrawingBrush(aGeometryDrawing);
            patternBrush.Viewport = new Rect(0, 0, 0.25, 0.25);
            patternBrush.TileMode = TileMode.Tile;
            patternBrush.Freeze();

            //
            // Create an object to paint.
            //
            Rectangle paintedRectangle = new Rectangle();
            paintedRectangle.Width = 100;
            paintedRectangle.Height = 100;
            paintedRectangle.Fill = patternBrush;

            //
            // Place the image inside a border and
            // add it to the page.
            //
            Border exampleBorder = new Border();
            exampleBorder.Child = paintedRectangle;
            exampleBorder.BorderBrush = Brushes.Gray;
            exampleBorder.BorderThickness = new Thickness(1);
            exampleBorder.HorizontalAlignment = HorizontalAlignment.Left;
            exampleBorder.VerticalAlignment = VerticalAlignment.Top;
            exampleBorder.Margin = new Thickness(10);

            this.Margin = new Thickness(20);
            this.Background = Brushes.White;
            this.Content = exampleBorder;
        }
    }
}

La clase DrawingBrush proporciona gran variedad de opciones para expandir y colocar en mosaico su contenido. Para obtener más información sobre DrawingBrush, consulte la información general de Pintar con imágenes, dibujos y elementos visuales.

Representar un dibujo con un objeto visual

Un objeto DrawingVisual es un tipo de objeto visual diseñado para representar un dibujo. El trabajo directo con la capa visual es una opción para aquellos programadores que desean generar un entorno gráfico muy personalizado y no se describe en esta información general. Para obtener más información, consulte la información general de Usar objetos DrawingVisual.

Objetos DrawingContext

La clase DrawingContext permite rellenar un objeto Visual o Drawing con contenido visual. Muchos de estos objetos gráficos de bajo nivel utilizan DrawingContext porque describe con gran eficacia el contenido gráfico.

Aunque los métodos de dibujo de DrawingContext parecen similares a los métodos de dibujo de tipo System.Drawing.Graphics, en realidad son muy distintos. DrawingContext se utiliza con un sistema de gráficos de modo retenido, mientras que System.Drawing.Graphics se utiliza con un sistema de gráficos de modo inmediato. Al utilizar los comandos de dibujo de un objeto DrawingContext, en realidad está almacenando un conjunto de instrucciones de representación (si bien el mecanismo de almacenamiento exacto depende del tipo de objeto que proporcione DrawingContext) que el sistema de gráficos utilizará más adelante; no dibuja en la pantalla en tiempo real. Para obtener más información sobre cómo funciona el sistema de gráficos de Windows Presentation Foundation (WPF), consulte Información general sobre la representación de gráficos en Windows Presentation Foundation.

Nunca se crea directamente una instancia de DrawingContext; sin embargo, se puede adquirir un contexto de dibujo a partir de determinados métodos, como DrawingGroup.Open y DrawingVisual.RenderOpen.

Enumerar el contenido de un objeto visual

Además de sus otros usos, los objetos Drawing también proporcionan un modelo de objetos para enumerar el contenido de Visual.

En el ejemplo siguiente se utiliza el método GetDrawing para recuperar el valor de DrawingGroup de un objeto Visual y enumerarlo.

public void RetrieveDrawing(Visual v)
{
    DrawingGroup dGroup = VisualTreeHelper.GetDrawing(v);
    EnumDrawingGroup(dGroup);

}

 // Enumerate the drawings in the DrawingGroup.
 public void EnumDrawingGroup(DrawingGroup drawingGroup)
 {
     DrawingCollection dc = drawingGroup.Children;

     // Enumerate the drawings in the DrawingCollection.
     foreach (Drawing drawing in dc)
     {
         // If the drawing is a DrawingGroup, call the function recursively.
         if (drawing.GetType() == typeof(DrawingGroup))
         {
             EnumDrawingGroup((DrawingGroup)drawing);
         }
         else if (drawing.GetType() == typeof(GeometryDrawing))
         {
             // Perform action based on drawing type.  
         }
         else if (drawing.GetType() == typeof(ImageDrawing))
         {
             // Perform action based on drawing type.
         }
         else if (drawing.GetType() == typeof(GlyphRunDrawing))
         {
             // Perform action based on drawing type.
         }
         else if (drawing.GetType() == typeof(VideoDrawing))
         {
             // Perform action based on drawing type.
         }
     }
 }

Vea también

Conceptos

Optimizar el rendimiento: Imágenes y gráficos 2D

Pintar con imágenes, dibujos y elementos visuales

Información general sobre geometría

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

Información general sobre la representación de gráficos en Windows Presentation Foundation

Información general sobre objetos Freezable

Referencia

Drawing

DrawingGroup

Otros recursos

Temas "Cómo..." de dibujo