Información general sobre objetos DrawingDrawing Objects Overview

Este tema se presentan Drawing objetos y se describe cómo utilizarlos para dibujar con eficacia formas, mapas de bits, texto y multimedia.This topic introduces Drawing objects and describes how to use them to efficiently draw shapes, bitmaps, text, and media. Usar Drawing objetos al crear imágenes prediseñadas, pintar con un DrawingBrush, o use Visual objetos.Use Drawing objects when you create clip art, paint with a DrawingBrush, or use Visual objects.

¿Qué es un objeto Drawing?What Is a Drawing Object?

Un Drawing objeto describe el contenido visible, como una forma, mapa de bits, vídeo o una línea de texto.A Drawing object describes visible content, such as a shape, bitmap, video, or a line of text. Distintos tipos de dibujo describen tipos de contenido diferentes.Different types of drawings describe different types of content. La siguiente lista muestra los distintos tipos de objetos de dibujo.The following is a list of the different types of drawing objects.

Drawing los objetos son versátiles; Hay muchas formas de usar un Drawing objeto.Drawing objects are versatile; there are many ways you can use a Drawing object.

WPF ofrece otros tipos de objetos capaces de dibujar formas, mapas de bits, texto y elementos multimedia.WPF provides other types of objects that are capable of drawing shapes, bitmaps, text, and media. Por ejemplo, también puede utilizar Shape objetos que se va a dibujar formas y el MediaElement control proporciona otra manera de agregar vídeo a la aplicación.For example, you can also use Shape objects to draw shapes, and the MediaElement control provides another way to add video to your application. ¿Por lo que cuándo se debe utilizar Drawing objetos?So when should you use Drawing objects? Cuando se pueden sacrificar las características de nivel de marco de trabajo para obtener ventajas de rendimiento o cuando necesite Freezable características.When you can sacrifice framework level features to gain performance benefits or when you need Freezable features. Dado que Drawing objetos no son compatibles con diseño, de entrada y centrarse, proporcionan ventajas de rendimiento que hacen que sean idóneos para describir fondos, imágenes prediseñadas así como para el dibujo de bajo nivel con Visual objetos.Because Drawing objects lack support for Layout, input, and focus, they provide performance benefits that make them ideal for describing backgrounds, clip art, and for low-level drawing with Visual objects.

Un tipo que es Freezable objeto, Drawing objetos obtienen varias características especiales, como las siguientes: se pueden declarar como recursos, compartir entre varios objetos, solo lectura para mejorar rendimiento, clonar y estará seguro para subprocesos.Because they are a type Freezable object, Drawing objects gain several special features, which include the following: they can be declared as resources, shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. Para obtener más información acerca de las diferentes características proporcionadas por Freezable los objetos, vea la Freezable Objects Overview.For more information about the different features provided by Freezable objects, see the Freezable Objects Overview.

Dibujar una formaDraw a Shape

Para dibujar una forma, se utiliza un GeometryDrawing.To draw a shape, you use a GeometryDrawing. Un dibujo de geometría Geometry propiedad describe la forma que se va a dibujar, su Brush propiedad describe cómo se debe pintar el interior de la forma y su Pen propiedad describe cómo se debe dibujar su contorno.A geometry drawing's Geometry property describes the shape to draw, its Brush property describes how the interior of the shape should be painted, and its Pen property describes how its outline should be drawn.

En el ejemplo siguiente se usa un GeometryDrawing para dibujar una forma.The following example uses a GeometryDrawing to draw a shape. Describe la forma un GeometryGroup y dos EllipseGeometry objetos.The shape is described by a GeometryGroup and two EllipseGeometry objects. Se pinta el interior de la forma con un LinearGradientBrush y su contorno se dibuja con un Black Pen.The shape's interior is painted with a LinearGradientBrush and its outline is drawn with a Black Pen.

Este ejemplo crea la siguiente GeometryDrawing.This example creates the following GeometryDrawing.

GeometryDrawing de dos elipsesA GeometryDrawing of two ellipses
GeometryDrawingA 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, vea Create a GeometryDrawing (Cómo: Crear un objeto GeometryDrawing).For the complete example, see Create a GeometryDrawing.

Otros Geometry las clases, como PathGeometry le permiten crear formas más complejas mediante la creación de curvas y arcos.Other Geometry classes, such as PathGeometry enable you to create more complex shapes by creating curves and arcs. Para obtener más información acerca de Geometry los objetos, vea la información general sobre geometría.For more information about Geometry objects, see the Geometry Overview.

Para obtener más información sobre otras maneras de dibujar formas que no usan Drawing los objetos, vea formas y dibujo básico en WPF Overview.For more information about other ways to draw shapes that don't use Drawing objects, see Shapes and Basic Drawing in WPF Overview.

Dibujar un objeto ImageDraw an Image

Para dibujar una imagen, se utiliza un ImageDrawing.To draw an image, you use an ImageDrawing. Un ImageDrawing del objeto ImageSource propiedad describe la imagen para dibujar y su Rect propiedad define la región donde se dibuja la imagen.An ImageDrawing object's ImageSource property describes the image to draw, and its Rect property defines the region where the image is drawn.

En el ejemplo siguiente se dibuja una imagen en un rectángulo situado en (75,75) que ocupa 100 por 100 píxeles.The following example draws an image into a rectangle located at (75,75) that is 100 by 100 pixel. La siguiente ilustración muestra el ImageDrawing creado por el ejemplo.The following illustration shows the ImageDrawing created by the example. Se agregó un borde gris para mostrar los límites de la ImageDrawing.A gray border was added to show the bounds of the ImageDrawing.

Un ImageDrawing 100 por 100 dibujado en (75,75)A 100 by 100 ImageDrawing drawn at (75,75)
ImageDrawing de 100 por 100A 100 by 100 ImageDrawing

// 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 más información sobre las imágenes, Información general sobre imágenes.For more information about images, see the Imaging Overview.

Reproducir elementos multimedia (solo código)Play Media (Code Only)

Nota

Aunque se puede declarar un VideoDrawing en Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML), sólo se puede cargar y reproducir su archivos multimedia mediante código.Although you can declare a VideoDrawing in Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML), you can only load and play its media using code. Para reproducir vídeo en Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML), use un MediaElement en su lugar.To play video in Lenguaje XAML (Extensible Application Markup Language)Extensible Application Markup Language (XAML), use a MediaElement instead.

Para reproducir un archivo de audio o vídeo, utilizar un VideoDrawing y MediaPlayer.To play an audio or video file, you use a VideoDrawing and a MediaPlayer. Hay dos maneras de cargar y reproducir elementos multimedia.There are two ways to load and play media. La primera consiste en utilizar un MediaPlayer y un VideoDrawing por sí mismos y la segunda manera es crear sus propios MediaTimeline para usar con el MediaPlayer y VideoDrawing.The first is to use a MediaPlayer and a VideoDrawing by themselves, and the second way is to create your own MediaTimeline to use with the MediaPlayer and VideoDrawing.

Nota

Al distribuir elementos multimedia con la aplicación, no puede utilizar un archivo multimedia como recurso del proyecto, como haría con una imagen.When distributing media with your application, you cannot use a media file as a project resource, like you would an image. En el archivo de proyecto, debe establecer en su lugar el tipo de elemento multimedia en Content y establecer CopyToOutputDirectory en PreserveNewest o Always.In your project file, you must instead set the media type to Content and set CopyToOutputDirectory to PreserveNewest or Always.

Para reproducir archivos multimedia sin crear su propio MediaTimeline, realice los pasos siguientes.To play media without creating your own MediaTimeline, you perform the following steps.

  1. Crear un objeto MediaPlayer.Create a MediaPlayer object.

    MediaPlayer player = new MediaPlayer();
    
  2. Use la Open método para cargar el archivo multimedia.Use the Open method to load the media file.

    player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));
    
  3. Creará un control VideoDrawing.Create a VideoDrawing.

    VideoDrawing aVideoDrawing = new VideoDrawing();
    
  4. Especifique el tamaño y la ubicación para dibujar el elemento multimedia estableciendo la Rect propiedad de la VideoDrawing.Specify the size and location to draw the media by setting the Rect property of the VideoDrawing.

    aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
    
  5. Establecer el Player propiedad de la VideoDrawing con el MediaPlayer que ha creado.Set the Player property of the VideoDrawing with the MediaPlayer you created.

    aVideoDrawing.Player = player;
    
  6. Use la Play método de la MediaPlayer para iniciar la reproducción del elemento multimedia.Use the Play method of the MediaPlayer to start playing the media.

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

En el ejemplo siguiente se usa un VideoDrawing y un MediaPlayer para reproducir un archivo de vídeo de una vez.The following example uses a VideoDrawing and a MediaPlayer to play a video file once.

//
// 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 tener un control de tiempo adicionales sobre los medios, use un MediaTimeline con el MediaPlayer y VideoDrawing objetos.To gain additional timing control over the media, use a MediaTimeline with the MediaPlayer and VideoDrawing objects. El MediaTimeline le permite especificar si se debe repetir el vídeo.The MediaTimeline enables you to specify whether the video should repeat. Para usar un MediaTimeline con un VideoDrawing, realice los pasos siguientes:To use a MediaTimeline with a VideoDrawing, you perform the following steps:

  1. Declare el MediaTimeline y establezca sus comportamientos de control de tiempo.Declare the MediaTimeline and set its timing behaviors.

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

    // Create a clock from the MediaTimeline.
    MediaClock mClock = mTimeline.CreateClock();
    
  3. Crear un MediaPlayer y use la MediaClock para establecer su Clock propiedad.Create a MediaPlayer and use the MediaClock to set its Clock property.

    MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
    repeatingVideoDrawingPlayer.Clock = mClock;
    
  4. Crear un VideoDrawing y asignar el MediaPlayer a la Player propiedad de la VideoDrawing.Create a VideoDrawing and assign the MediaPlayer to the Player property of the VideoDrawing.

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

En el ejemplo siguiente se usa un MediaTimeline con un MediaPlayer y un VideoDrawing para reproducir un vídeo varias veces.The following example uses a MediaTimeline with a MediaPlayer and a VideoDrawing to play a video repeatedly.

//
// 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, cuando se usa un MediaTimeline, usa el interactivo ClockController procedentes de la la Controller propiedad de la MediaClock para controlar la reproducción de medios en lugar de los métodos interactivos de MediaPlayer.Note that, when you use a MediaTimeline, you use the interactive ClockController returned from the Controller property of the MediaClock to control media playback instead of the interactive methods of MediaPlayer.

Dibujar textoDraw Text

Para dibujar texto, se utiliza un GlyphRunDrawing y GlyphRun.To draw text, you use a GlyphRunDrawing and a GlyphRun. En el ejemplo siguiente se usa un GlyphRunDrawing para dibujar el texto "Hola mundo".The following example uses a GlyphRunDrawing to draw the text "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>

A GlyphRun es un objeto de bajo nivel pensado para usarse con escenarios de impresión y presentación del documento de formato fijo.A GlyphRun is a low-level object intended for use with fixed-format document presentation and print scenarios. Una manera más sencilla para dibujar texto en la pantalla es usar un Label o TextBlock.A simpler way to draw text to the screen is to use a Label or a TextBlock. Para obtener más información acerca de GlyphRun, consulte el Introducción al objeto GlyphRun y al elemento de glifos información general.For more information about GlyphRun, see the Introduction to the GlyphRun Object and Glyphs Element overview.

Dibujos compuestosComposite Drawings

Un DrawingGroup le permite combinar varios dibujos en un único dibujo compuesto.A DrawingGroup enables you to combine multiple drawings into a single composite drawing. Mediante el uso de un DrawingGroup, puede combinar formas, imágenes y texto en una sola Drawing objeto.By using a DrawingGroup, you can combine shapes, images, and text into a single Drawing object.

En el ejemplo siguiente se usa un DrawingGroup para combinar dos GeometryDrawing objetos y un ImageDrawing objeto.The following example uses a DrawingGroup to combine two GeometryDrawing objects and an ImageDrawing object. Este ejemplo produce el siguiente resultado:This example produces the following output.

DrawingGroup con varios dibujosA DrawingGroup with multiple drawings
Un dibujo compuestoA composite drawing

//
// 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>

Un DrawingGroup también permite aplicar máscaras de opacidad, las transformaciones, los efectos de mapa de bits y otras operaciones a su contenido.A DrawingGroup also enables you to apply opacity masks, transforms, bitmap effects, and other operations to its contents. DrawingGroup las operaciones se aplican en el siguiente orden: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSety, a continuación, Transform.DrawingGroup operations are applied in the following order: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet, and then Transform.

La ilustración siguiente muestra el orden en el que DrawingGroup se aplican las operaciones.The following illustration shows the order in which DrawingGroup operations are applied.

El orden de operaciones de DrawingGroupDrawingGroup order of operations
Orden de las operaciones de DrawingGroupOrder of DrawingGroup operations

En la tabla siguiente se describe las propiedades que puede utilizar para manipular un DrawingGroup contenido del objeto.The following table describes the properties you can use to manipulate a DrawingGroup object's contents.

PropertyProperty DescripciónDescription IlustraciónIllustration
OpacityMask Modifica la opacidad de las partes seleccionadas de la DrawingGroup contenido.Alters the opacity of selected portions of the DrawingGroup contents. Para obtener un ejemplo, vea Cómo: Controlar la opacidad de un dibujo. For an example, see How to: Control the Opacity of a Drawing. DrawingGroup con una máscara de opacidadA DrawingGroup with an opacity mask
Opacity Cambia de manera uniforme la opacidad de la DrawingGroup contenido.Uniformly changes the opacity of the DrawingGroup contents. Utilice esta propiedad para realizar un Drawing transparente o parcialmente transparente.Use this property to make a Drawing transparent or partially transparent. Para obtener un ejemplo, vea Cómo: Aplicar una máscara de opacidad a un dibujo. For an example, see How to: Apply an Opacity Mask to a Drawing. DrawingGroups con diferentes valores de opacidadDrawingGroups with different opacity settings
BitmapEffect Se aplica un BitmapEffect a la DrawingGroup contenido.Applies a BitmapEffect to the DrawingGroup contents. Para obtener un ejemplo, vea Cómo: Aplicar un objeto BitmapEffect a un dibujo.For an example, see How to: Apply a BitmapEffect to a Drawing. DrawingGroup con BlurBitmapEffectDrawingGroup with a BlurBitmapEffect
ClipGeometry Recorta el DrawingGroup contenido a una región describe el uso de un Geometry.Clips the DrawingGroup contents to a region you describe using a Geometry. Para obtener un ejemplo, vea Cómo: Recortar un dibujo.For an example, see How to: Clip a Drawing . DrawingGroup con una región de recorte definidaDrawingGroup with a defined clip region
GuidelineSet Ajusta los píxeles independientes del dispositivo a los píxeles del dispositivo según las directrices especificadas.Snaps device independent pixels to device pixels along the specified guidelines. Esta propiedad resulta útil para garantizar que los gráficos muy detallados se representan nítidamente en pantallas de baja resolución.This property is useful for ensuring that finely detailed graphics render sharply on low-DPI displays. Para obtener un ejemplo, vea Apply a GuidelineSet to a Drawing (Aplicar un objeto GuidelineSet a un dibujo).For an example, see Apply a GuidelineSet to a Drawing. DrawingGroup con y sin GuidelineSetA DrawingGroup with and without a GuidelineSet
Transform Transforma el DrawingGroup contenido.Transforms the DrawingGroup contents. Para obtener un ejemplo, vea Cómo: Aplicar una transformación a un dibujo.For an example, see How to: Apply a Transform to a Drawing. DrawingGroup giradoA rotated DrawingGroup

Mostrar un dibujo como imagenDisplay a Drawing as an Image

Para mostrar un Drawing con una Image controlar, use un DrawingImage como el Image del control Source y establezca el DrawingImage del objeto DrawingImage.Drawing propiedad al dibujo que desea mostrar.To display a Drawing with an Image control, use a DrawingImage as the Image control's Source and set the DrawingImage object's DrawingImage.Drawing property to the drawing you want to display.

En el ejemplo siguiente se usa un DrawingImage y Image control para mostrar un GeometryDrawing.The following example uses a DrawingImage and an Image control to display a GeometryDrawing. Este ejemplo produce el siguiente resultado:This example produces the following output.

GeometryDrawing de dos elipsesA GeometryDrawing of two ellipses
DrawingImageA 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://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 dibujoPaint an Object with a Drawing

A DrawingBrush es un tipo de pincel que pinta un área con un objeto de dibujo.A DrawingBrush is a type of brush that paints an area with a drawing object. Puede usarlo para pintar casi cualquier objeto gráfico con un dibujo.You can use it to paint just about any graphical object with a drawing. El Drawing propiedad de un DrawingBrush describe su Drawing.The Drawing property of a DrawingBrush describes its Drawing. Para representar un Drawing con un DrawingBrush, agregarlo al pincel mediante el pincel Drawing propiedad y use el pincel para dibujar un gráfico de objeto, como un control o panel.To render a Drawing with a DrawingBrush, add it to the brush using the brush's Drawing property and use the brush to paint a graphical object, such as a control or panel.

Los ejemplos siguientes se utiliza un DrawingBrush para pintar el Fill de un Rectangle con un patrón creado a partir de un GeometryDrawing.The following examples uses a DrawingBrush to paint the Fill of a Rectangle with a pattern created from a GeometryDrawing. Este ejemplo produce el siguiente resultado:This example produces the following output.

Un mosaico de DrawingBrushA tiled DrawingBrush
Uso de GeometryDrawing con un objeto DrawingBrushA GeometryDrawing used with a 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options" 
  xmlns:mc="http://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>

La DrawingBrush clase proporciona una variedad de opciones de ajuste y disponer en mosaico su contenido.The DrawingBrush class provides a variety of options for stretching and tiling its content. Para obtener más información acerca de DrawingBrush, consulte el pintar con imágenes, gráficos y objetos visuales información general.For more information about DrawingBrush, see the Painting with Images, Drawings, and Visuals overview.

Representar un dibujo con un objeto VisualRender a Drawing with a Visual

A DrawingVisual es un tipo de objeto visual que se ha diseñado para representar un dibujo.A DrawingVisual is a type of visual object designed to render a drawing. Una posibilidad para los desarrolladores que quieran crear un entorno gráfico muy personalizado es trabajar directamente en la capa visual, que no se describe en esta información general.Working directly at the visual layer is an option for developers who want to build a highly customized graphical environment, and is not described in this overview. Para más información, consulte la página de información general Usar objetos DrawingVisual.For more information, see the Using DrawingVisual Objects overview.

Objetos DrawingContextDrawingContext Objects

El DrawingContext clase permite llenar un Visual o Drawing con contenido visual.The DrawingContext class enables you to populate a Visual or a Drawing with visual content. Usan muchos de estos objetos de gráficos de bajo nivel un DrawingContext porque describe el contenido del gráfico muy eficazmente.Many such lower-level graphics objects use a DrawingContext because it describes graphical content very efficiently.

Aunque la DrawingContext métodos draw un aspecto similares a los métodos de dibujo de la System.Drawing.Graphics tipo, son realmente muy diferentes.Although the DrawingContext draw methods appear similar to the draw methods of the System.Drawing.Graphics type, they are actually very different. DrawingContext es si se utiliza con un sistema de gráficos de modo retenido, mientras el System.Drawing.Graphics tipo se usa con un sistema de gráficos de modo inmediato.DrawingContext is used with a retained mode graphics system, while the System.Drawing.Graphics type is used with an immediate mode graphics system. Cuando se usa un DrawingContext comandos de dibujo del objeto, en realidad se está almacenando un conjunto de instrucciones de procesamiento (aunque el mecanismo de almacenamiento exacto depende del tipo de objeto que proporciona el DrawingContext) que se utilizará más adelante mediante el sistema de gráficos; no se dibuja en la pantalla en tiempo real.When you use a DrawingContext object's draw commands, you are actually storing a set of rendering instructions (although the exact storage mechanism depends on the type of object that supplies the DrawingContext) that will later be used by the graphics system; you are not drawing to the screen in real-time. Para obtener más información sobre cómo funciona el sistema de gráficos de Windows Presentation Foundation (WPF), consulte el información general de representación de gráficos de WPF.For more information about how the Windows Presentation Foundation (WPF) graphics system works, see the WPF Graphics Rendering Overview.

Nunca directamente cree instancias de un DrawingContext; sin embargo, puede adquirir un contexto de dibujo de ciertos métodos, como DrawingGroup.Open y DrawingVisual.RenderOpen.You never directly instantiate a DrawingContext; you can, however, acquire a drawing context from certain methods, such as DrawingGroup.Open and DrawingVisual.RenderOpen.

Enumerar el contenido de un objeto VisualEnumerate the Contents of a Visual

Además de sus otros usos, Drawing objetos también proporcionan un modelo de objetos para enumerar el contenido de un Visual.In addition to their other uses, Drawing objects also provide an object model for enumerating the contents of a Visual.

En el ejemplo siguiente se utiliza el GetDrawing método para recuperar el DrawingGroup valor de un Visual y enumerar.The following example uses the GetDrawing method to retrieve the DrawingGroup value of a Visual and enumerate it.

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énSee Also

Drawing
DrawingGroup
Imágenes y gráficos 2D2D Graphics and Imaging
Pintar con imágenes, dibujos y elementos visualesPainting with Images, Drawings, and Visuals
Información general sobre geometríaGeometry Overview
Información general sobre formas y dibujo básico en WPFShapes and Basic Drawing in WPF Overview
Información general sobre la representación de gráficos en WPFWPF Graphics Rendering Overview
Información general sobre objetos FreezableFreezable Objects Overview
Temas "Cómo..."How-to Topics