Drawing Objects Overview
This topic introduces Drawing objects and describes how to use them to efficiently draw shapes, bitmaps, text, and media. Use Drawing objects when you create clip art, paint with a DrawingBrush, or use Visual objects.
This topic contains the following sections.
- What Is a Drawing Object?
- Draw a Shape
- Draw an Image
- Play Media (Code Only)
- Draw Text
- Composite Drawings
- Display a Drawing as an Image
- Paint an Object with a Drawing
- Render a Drawing with a Visual
- DrawingContext Objects
- Enumerate the Contents of a Visual
- Related Topics
What Is a Drawing Object?
A Drawing object describes visible content, such as a shape, bitmap, video, or a line of text. Different types of drawings describe different types of content. The following is a list of the different types of drawing objects.
GeometryDrawing – Draws a shape.
ImageDrawing – Draws an image.
GlyphRunDrawing – Draws text.
VideoDrawing – Plays an audio or video file.
DrawingGroup – Draws other drawings. Use a drawing group to combine other drawings into a single composite drawing.
Drawing objects are versatile; there are many ways you can use a Drawing object.
You can display it as an image by using a DrawingImage and an Image control.
You can use it with a DrawingBrush to paint an object, such as the Background of a Page.
You can use it to describe the appearance of a DrawingVisual.
You can use it to enumerate the contents of a Visual.
WPF provides other types of objects that are capable of drawing shapes, bitmaps, text, and media. For example, you can also use Shape objects to draw shapes, and the MediaElement control provides another way to add video to your application. So when should you use Drawing objects? When you can sacrifice framework level features to gain performance benefits or when you need Freezable features. Because Drawing objects lack support for The Layout System, input, and focus, they provide performance benefits that make them ideal for describing backgrounds, clip art, and for low-level drawing with Visual objects.
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. For more information about the different features provided by Freezable objects, see the Freezable Objects Overview.
Draw a Shape
To draw a shape, you use a GeometryDrawing. 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.
The following example uses a GeometryDrawing to draw a shape. The shape is described by a GeometryGroup and two EllipseGeometry objects. The shape's interior is painted with a LinearGradientBrush and its outline is drawn with a Black Pen.
This example creates the following GeometryDrawing.
A GeometryDrawing
.jpg "A GeometryDrawing of two ellipses")
//
// 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 How to: Create a GeometryDrawing.
Other Geometry classes, such as PathGeometry enable you to create more complex shapes by creating curves and arcs. For more information about Geometry objects, see the Geometry Overview.
For more information about other ways to draw shapes that don't use Drawing objects, see Shapes and Basic Drawing in WPF Overview.
Draw an Image
To draw an image, you use an ImageDrawing. An ImageDrawing object's ImageSource property describes the image to draw, and its Rect property defines the region where the image is drawn.
The following example draws an image into a rectangle located at (75,75) that is 100 by 100 pixel. The following illustration shows the ImageDrawing created by the example. A gray border was added to show the bounds of the ImageDrawing.
A 100 by 100 ImageDrawing
.png "A 100 by 100 ImageDrawing drawn at (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"/>
For more information about images, see the Imaging Overview.
Play Media (Code Only)
Note
Although you can declare a VideoDrawing in Extensible Application Markup Language (XAML), you can only load and play its media using code. To play video in Extensible Application Markup Language (XAML), use a MediaElement instead.
To play an audio or video file, you use a VideoDrawing and a MediaPlayer. There are two ways to load and play media. 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.
Note
When distributing media with your application, you cannot use a media file as a project resource, like you would an image. In your project file, you must instead set the media type to Content and set CopyToOutputDirectory to PreserveNewest or Always.
To play media without creating your own MediaTimeline, you perform the following steps.
Create a MediaPlayer object.
MediaPlayer player = new MediaPlayer();Use the Open method to load the media file.
player.Open(new Uri(@"sampleMedia\xbox.wmv", UriKind.Relative));Create a VideoDrawing.
VideoDrawing aVideoDrawing = new 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);Set the Player property of the VideoDrawing with the MediaPlayer you created.
aVideoDrawing.Player = player;Use the Play method of the MediaPlayer to start playing the media.
// Play the video once. player.Play();
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();
To gain additional timing control over the media, use a MediaTimeline with the MediaPlayer and VideoDrawing objects. The MediaTimeline enables you to specify whether the video should repeat. To use a MediaTimeline with a VideoDrawing, you perform the following steps:
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;Create a MediaClock from the MediaTimeline.
// Create a clock from the MediaTimeline. MediaClock mClock = mTimeline.CreateClock();Create a MediaPlayer and use the MediaClock to set its Clock property.
MediaPlayer repeatingVideoDrawingPlayer = new MediaPlayer(); repeatingVideoDrawingPlayer.Clock = mClock;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;
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;
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.
Draw Text
To draw text, you use a GlyphRunDrawing and a GlyphRun. 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 is a low-level object intended for use with fixed-format document presentation and print scenarios. A simpler way to draw text to the screen is to use a Label or a TextBlock. For more information about GlyphRun, see the Introduction to the GlyphRun Object and Glyphs Element overview.
Composite Drawings
A DrawingGroup enables you to combine multiple drawings into a single composite drawing. By using a DrawingGroup, you can combine shapes, images, and text into a single Drawing object.
The following example uses a DrawingGroup to combine two GeometryDrawing objects and an ImageDrawing object. This example produces the following output.
A composite drawing
.jpg "A DrawingGroup with multiple drawings")
//
// 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 also enables you to apply opacity masks, transforms, bitmap effects, and other operations to its contents. DrawingGroup operations are applied in the following order: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet, and then Transform.
The following illustration shows the order in which DrawingGroup operations are applied.
Order of DrawingGroup operations
.png "DrawingGroup order of operations")
The following table describes the properties you can use to manipulate a DrawingGroup object's contents.
Property |
Description |
Illustration |
|---|---|---|
Alters the opacity of selected portions of the DrawingGroup contents. For an example, see How to: Control the Opacity of a Drawing. |
|
|
Uniformly changes the opacity of the DrawingGroup contents. Use this property to make a Drawing transparent or partially transparent. For an example, see How to: Apply an Opacity Mask to a Drawing. |
|
|
Applies a BitmapEffect to the DrawingGroup contents. For an example, see How to: Apply a BitmapEffect to a Drawing. |
|
|
Clips the DrawingGroup contents to a region you describe using a Geometry. For an example, see How to: Clip a Drawing . |
|
|
Snaps device independent pixels to device pixels along the specified guidelines. This property is useful for ensuring that finely detailed graphics render sharply on low-DPI displays. For an example, see How to: Apply a GuidelineSet to a Drawing. |
|
|
Transforms the DrawingGroup contents. For an example, see How to: Apply a Transform to a Drawing. |
|
.png "A DrawingGroup with an opacity mask")
.png "DrawingGroups with different opacity settings")
.png "DrawingGroup with a BlurBitmapEffect")
.png "DrawingGroup with a defined clip region")
.png "A DrawingGroup with and without a GuidelineSet")
.png "A rotated DrawingGroup")
Display a Drawing as an Image
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.
The following example uses a DrawingImage and an Image control to display a GeometryDrawing. This example produces the following output.
A 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>
Paint an Object with a Drawing
A DrawingBrush is a type of brush that paints an area with a drawing object. You can use it to paint just about any graphical object with a drawing. The Drawing property of a DrawingBrush describes its Drawing. 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.
The following examples uses a DrawingBrush to paint the Fill of a Rectangle with a pattern created from a GeometryDrawing. This example produces the following output.
A GeometryDrawing used with a DrawingBrush
.png "A tiled 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;
}
}
}
The DrawingBrush class provides a variety of options for stretching and tiling its content. For more information about DrawingBrush, see the Painting with Images, Drawings, and Visuals overview.
Render a Drawing with a Visual
A DrawingVisual is a type of visual object designed to render a drawing. 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. For more information, see the Using DrawingVisual Objects overview.
DrawingContext Objects
The DrawingContext class enables you to populate a Visual or a Drawing with visual content. Many such lower-level graphics objects use a DrawingContext because it describes graphical content very efficiently.
Although the DrawingContext draw methods appear similar to the draw methods of the System.Drawing.Graphics type, they are actually very different. DrawingContext is used with a retained mode graphics system, while the System.Drawing.Graphics type is used with an immediate mode graphics system. 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. For more information about how the Windows Presentation Foundation (WPF) graphics system works, see the Windows Presentation Foundation Graphics Rendering Overview.
You never directly instantiate a DrawingContext; you can, however, acquire a drawing context from certain methods, such as DrawingGroup.Open and DrawingVisual.RenderOpen.
Enumerate the Contents of a Visual
In addition to their other uses, Drawing objects also provide an object model for enumerating the contents of a Visual.
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.
}
}
}
See Also
Concepts
Optimizing Performance: 2D Graphics and Imaging
Painting with Images, Drawings, and Visuals
Shapes and Basic Drawing in WPF Overview
Windows Presentation Foundation Graphics Rendering Overview