Share via


Visão Geral de Objetos de Desenho

Este tópico apresenta objetos Drawing e descreve como utilizá-los para desenhar de modo eficiente formas, bitmaps, textos e mídia. Utilize objetos Drawing quando você cria desenhos, pinta com uma DrawingBrush ou utiliza objetos Visual.

Este tópico contém as seguintes seções.

  • O que é um objeto de desenho?
  • Desenhar uma Forma
  • Desenhar uma Imagem
  • Reproduzir Mídia (Apenas Código)
  • Desenhar Texto
  • Desenhos Compostos
  • Exibe um Desenho como uma Imagem
  • Pintar um Objeto com um Desenho
  • Processar um desenho com um Visual
  • Objetos DrawingContent
  • Enumerar os Conteúdos de um Visual
  • Tópicos relacionados

O que é um objeto de desenho?

Um objeto Drawing descreve conteúdo visível, tal como forma, bitmap, vídeo ou uma linha de texto. Diferentes tipos de desenho descrevem diferentes tipos de conteúdo. Segue uma lista dos diferentes tipos de objetos de desenho.

Objetos Drawing são versáteis; há diversas formas como você pode utilizar um objeto Drawing.

  • Você pode exibi-lo como uma imagem utilizando DrawingImage e um controle Image.

  • Você pode utilizá-lo com um DrawingBrush para pintar um objeto, tal como o Background de um Page.

  • Você pode utilizá-lo para descrever a aparência de um DrawingVisual.

  • Você pode utilizá-lo para enumerar os conteúdos de um Visual.

WPF fornece outros tipos de objetos que são capazes de desenhar formas, bitmaps, texto e mídia. Por exemplo, você também pode utilizar objetos Shape para desenhar formas, e o controle MediaElement fornece uma outra forma de acrescentar vídeo à sua aplicação. Então quando você deve utilizar objetos Drawing? Quando você puder sacrificar características de nível de framework para ganhar benefícios de desempenho ou quando você precisa de características Freezable. Porque objetos Drawing não têm suporte para O sistema de layout, entrada e foco, eles fornecem benefícios de desempenho que os tornam ideais para descrever objetos Visual.

Porque eles são um tipo de Freezable objeto, Drawing objetos aproveitar vários recursos especiais, que inclui o seguinte: Eles podem ser declarados sistema autônomo recursos, compartilhados entre vários objetos, feitos somente leitura para melhorar o desempenho, clonada e feita thread-safe. Para mais informações sobre as diferentes características fornecidas por objetos Freezable, veja Visão geral sobre objetos Freezable.

Desenhar uma Forma

Para desenhar uma forma, você utiliza um GeometryDrawing. A propriedade Geometry de um desenho geométrico descreve a forma a ser desenhada, sua propriedade Brush descreve como o interior da forma deve ser pintado, e sua propriedade Pen descreve como seu contorno deve ser desenhado.

O exemplo a seguir utiliza um GeometryDrawing para desenhar uma forma. A forma é descrita por um GeometryGroup e dois objetos EllipseGeometry. The shape's interior is painted with a LinearGradientBrush and its outline is drawn with a Black Pen.

O exemplo a seguir cria o seguinte GeometryDrawing.

Um desenho geométrico

Um GeometryDrawing de duas elipses

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

For the complete example, see Como: Create a GeometryDrawing.

Outras classes Geometry, tal como PathGeometry, permitem que você crie formas mais complexas criando curvas e arcos. Para obter mais informações sobre objetos Geometry, consulte Visão Geral de Geometria.

Para mais informações sobre outras formas de desenhar formas que não utilizam objetos Drawing, veja Visão geral de Formas e Desenho básico no WPF.

Desenhar uma Imagem

Para desenhar uma imagem, você utiliza um ImageDrawing. A propriedade ImageSource de um objeto ImageDrawing descreve a imagem a ser desenhada e sua propriedade Rect define a região em que a imagem será desenhada.

O exemplo seguir desenha uma imagem em um retângulo localizado em (75,75) que tem 100 por 100 pixels. A ilustração a seguir mostra o ImageDrawing criado pelo exemplo. Uma borda cinza foi acrescentada para mostrar os limites do ImageDrawing.

Um ImageDrawing 100 por 100

Um ImageDrawing 100 por 100 desenhado em (75,75)

// 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 mais informações sobre imagens, consulteVisão geral sobre imagens.

Reproduzir Mídia (Apenas Código)

ObservaçãoObservação:

Embora seja possível declarar um VideoDrawing em Extensible Application Markup Language (XAML), você só pode carregar e executar sua mídia usando código. Para reproduzir vídeo em Extensible Application Markup Language (XAML), utilize MediaElement.

Para reproduzir um arquivo de áudio ou vídeo, você utiliza um VideoDrawing e um MediaPlayer. Há duas formas de carregar e reproduzir mídia. A primeira é utilizar um MediaPlayer e um VideoDrawing por si só, e a segunda forma é criar seu próprio MediaTimeline para utilizar com o MediaPlayer e VideoDrawing.

ObservaçãoObservação:

Ao distribuir mídia com a sua aplicação, você não pode utilizar um arquivo de mídia como recurso de proejto, como você faria com uma imagem. No arquivo de projeto, em vez disso, você deve conjunto o tipo de mídia como Content e conjunto CopyToOutputDirectory para PreserveNewest ou Always.

Para reproduzir mídia sem criar seu próprio MediaTimeline, você reliza os seguintes passos:

  1. Crie um objeto MediaPlayer.

    MediaPlayer player = new MediaPlayer();
    
  2. Utilize o método Open para carregar o arquivo de mídia.

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

    VideoDrawing aVideoDrawing = new VideoDrawing();
    
  4. Especifique o tamanho e a localização onde desenhar a mídia definindo a propriedade Rect do VideoDrawing.

    aVideoDrawing.Rect = new Rect(0, 0, 100, 100);
    
  5. Defina a propriedade Player do VideoDrawing com o MediaPlayer que você criou.

    aVideoDrawing.Player = player;
    
  6. Utilize o método Play do MediaPlayer para começar a reproduzir a mídia.

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

O exemplo a seguir utiliza um VideoDrawing e um MediaPlayer para reproduzir um arquivo de vídeo uma vez.

//
// 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 ganhar controle adicional sobre o tempo da mídia, utilize um MediaTimeline com os objetos MediaPlayer e VideoDrawing. O MediaTimeline permite que você especifique se o vídeo deve repetir. Para utilizar um MediaTimeline com um VideoDrawing, você realiza os seguintes passos:

  1. Declare o MediaTimeline e defina seu comportamento de tempo.

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

    // Create a clock from the MediaTimeline.
    MediaClock mClock = mTimeline.CreateClock();
    
  3. Crie um MediaPlayer e utilize MediaClock para definir sua propriedade Clock.

    MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer();
    repeatingVideoDrawingPlayer.Clock = mClock;
    
  4. Crie um VideoDrawing e atribua MediaPlayer à propriedade Player do VideoDrawing.

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

O exemplo a seguir utiliza um MediaTimeline com um MediaPlayer e um VideoDrawing para reproduzir um arquivo de vídeo repetidamente.

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

Observe que, quando você utiliza um MediaTimeline, você utiliza o ClockController interativo retornado da propriedade Controller do MediaClock para controlar a reprodução de mídia em vez dos métodos interativos do MediaPlayer.

Desenhar Texto

Para desenhar texto, você utiliza um GlyphRunDrawing e um GlyphRun. O exemplo a seguir utiliza um GlyphRunDrawing para desenhar o 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>

Um GlyphRun é um objeto de baixo nível para uso com cenários de apresentação e impressão de documentos de formato fixo. Uma forma mais simples de desenhar texto na tela é utilizar um Label ou um TextBlock. Para mais informações sobre GlyphRun, veja a visão geral Introdução ao objeto GlyphRun e elemento Glyphs.

Desenhos Compostos

Um DrawingGroup permite que você combine múltiplos desenhos em um único desenho composto. Utilizando um DrawingGroup, você pode combinar formas, imagens e textos em um único objeto Drawing.

O exemplo a seguir utiliza um DrawingGroup para combinar dois objetos GeometryDrawing e um objeto ImageDrawing. O exemplo produz a seguinte saída.

Um desenho composto

Um DrawingGroup com vários desenhos

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

A DrawingGroup também permite aplicar máscaras de opacidade, transformações, efeitos de bitmap e outras operações para o seu Sumário. DrawingGroup as operações são aplicadas na seguinte ordem: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSete, em seguida, Transform.

A ilustração a seguir mostra a ordem em que operações DrawingGroup são aplicadas.

Ordem de operações DrawingGroup

Ordem de operações de DrawingGroup

A tabela a seguir descreve as propriedades que você pode utilizar para manipular o conteúdo de um objeto DrawingGroup.

Propriedade

Descrição

Ilustração

OpacityMask

Altera a opacidade de porções selecionadas do conteúdo DrawingGroup. Para um exemplo, consulte Como: Controlar a Opacidade de um Desenho.

Um DrawingGroup com uma máscara de opacidade

Opacity

Altera uniformemente a opacidade de conteúdos DrawingGroup. Utilize esta propriedade para tornar um Drawing transparente ou parcialmente transparente. Para um exemplo, consulte Como: Aplicar uma máscara de opacidade a um desenho.

DrawingGroups com diferentes configurações de opacidade

BitmapEffect

Aplicque um BitmapEffect ao conteúdo DrawingGroup. Para um exemplo, consulte Como: Aplicar Um Efeito de Bitmap em um Desenho.

DrawingGroup com um BlurBitmapEffect

ClipGeometry

Clipa o conteúdo DrawingGroup a uma região que você descreve utilizando um Geometry. Para um exemplo, consulte Como: Recortar um Drawing.

DrawingGroup com uma região de recorte definida

GuidelineSet

Gruda pixels independentes de dispositivo a pixels de dispositivo conforme as orientações especificadas. Esta propriedade é útil para assegurar que gráficos finamente detalhados são renderizados com nitidez em monitores de baixo DPI. Para um exemplo, consulte Como: Apply a GuidelineSet to a Drawing.

Um DrawingGroup com e sem um GuidelineSet

Transform

Transforma o conteúdo DrawingGroup. Para um exemplo, consulte Como: Aplicar uma transformação sobre um desenho.

Um DrawingGroup girado

Exibe um Desenho como uma Imagem

Para exibir um Drawing com um controle Image, utilize DrawingImage como o Source do controle Image e defina a propriedade DrawingImage.Drawing do objeto DrawingImage que você quer exibir.

O exemplo a seguir utiliza um DrawingImage e um controle Image para exibir um GeometryDrawing. O exemplo produz a seguinte saída.

Uma DrawingImage

Um GeometryDrawing de duas elipses

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 um Objeto com um Desenho

Um DrawingBrush é um tipo de pincel que pinta uma área com um objeto de desenho. Você pode utilizá-lo para pintar praticamente qualquer objeto gráfico com um desenho. A propriedade Drawing de um DrawingBrush descreve seu Drawing. Para renderizar um Drawing com um DrawingBrush, acrescente-o ao pincel utilizando a propriedade Drawing do pincel e utilize o pincel para pintar um objeto gráfico, tal como um controle ou painel.

Os exemplos a seguir uitlizam um DrawingBrush para pintar o Fill de um Rectangle com um padrão criado de um GeometryDrawing. O exemplo produz a seguinte saída.

Um GeometryDrawing utilizado com um DrawingBrush

Um DrawingBrush lado a lado

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;
        }
    }
}

A classe DrawingBrush fornece uma variedade de opções para redimensionar e organizar seu conteúdo lado a lado. Para mais informações sobre DrawingBrush, veja a visão geral Pintura com Imagens, Desenhos e Visuais.

Processar um desenho com um Visual

Um DrawingVisual é um tipo de objeto visual projetado para renderizar um desenho. Trabalhar diretamente com a camada visual é uma opção para os desenvolvedores que queiram construir um ambiente gráfico altamente personalizado, e não é descrito nessa visão geral. Para mais informações, consulte a visão geral Using DrawingVisual Objects.

Objetos DrawingContent

A classe DrawingContext permite que você popule um Visual ou um Drawing com conteúdo visual. Muitos objetos gráficos de baixo níel utilizam um DrawingContext porque descreve conteúdo gráfico de modo muito eficiente.

Embora o DrawingContext métodos de desenho aparecem semelhantes aos métodos de desenho a System.Drawing.Graphics tipo, eles são realmente muito diferentes. DrawingContext é usado com um sistema de gráficos de modo retido, enquanto o System.Drawing.Graphics tipo é usado com um sistema de modo imediato de elementos gráficos. Quando você utiliza os comandos de desenho de um objeto DrawingContext, você está na realidade armazenando um conjunto de instruções (embora o mecanismo exato de armazenamento dependa do tipo de objeto que supre o DrawingContext) que será utilizado mais tarde pelo sistema gráfico; você não está desenhando na tela em tempo real. Para mais informações sobre como o sistema gráfico Windows Presentation Foundation (WPF) funciona, veja Visão Geral sobre Renderização de Gráficos do Windows Presentation Foundation.

Você nunca instancia diretamente um DrawingContext; você pode, no entanto, adquirir um contexto de desenho de alguns métodos, tais como DrawingGroup.Open e DrawingVisual.RenderOpen.

Enumerar os Conteúdos de um Visual

Além de seus outros usos, objetos Drawing também fornecem um modelo de objeto para enumerar os conteúdos de um Visual.

O exemplo a seguir utiliza o método GetDrawing para recuperar o valor DrawingGroup de um Visual e enumerá-lo.

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.
         }
     }
 }

Consulte também

Conceitos

Otimizando o desempenho: 2D Graphics and Imaging

Pintura com Imagens, Desenhos e Visuais

Visão Geral de Geometria

Visão geral de Formas e Desenho básico no WPF

Visão Geral sobre Renderização de Gráficos do Windows Presentation Foundation

Visão geral sobre objetos Freezable

Referência

Drawing

DrawingGroup

Outros recursos

Tópicos de How-to de Desenho