#234 – Getting a DrawingVisual Object Rendered in a Window

A class deriving from DrawingVisual that draws one or more 2D objects needs to be hosted in another object in order to render the DrawingVisual object in a window or a page.

You can host the lower level control in either an UIElement or a FrameworkElementUIElement has basic support for layout and is the minimum functionality required in order to host a control within a Window (or a container control).

Here’s an example of overriding FrameworkElement to host our new control.

    public class EllAndRectHost : FrameworkElement
        private EllipseAndRectangle _ellAndRect = new EllipseAndRectangle();

        // EllipseAndRectangle instance is our only visual child
        protected override Visual GetVisualChild(int index)
            return _ellAndRect;

        protected override int VisualChildrenCount
                return 1;

We create a FrameworkElement with one visual child, overriding GetVisualChild and VisualChildrenCount.

Now we can use this new element directly in XAML:

		<local:EllAndRectHost Margin="30"/>

#233 – An Example of Deriving from DrawingVisual Class

You can define a new class that inherits from the DrawingVisual class when you need a low-level control to draw one or more 2D objects.

Below is an example showing a simple implementation of a class derived from DrawingVisual that draws a couple of objects.

    class EllipseAndRectangle : DrawingVisual
        public EllipseAndRectangle()
            using (DrawingContext dc = RenderOpen())
                // Black ellipse with blue border
                    new Pen(Brushes.Blue, 3),        // Border
                    new Point(120, 120), 20, 40);    // Center & radius

                // Red rectangle with green border
                    new Pen(Brushes.Green, 4),       // Border
                    new Rect(new Point(10, 10), new Point(80, 80)));    // Corners

The RenderOpen method allows us to render content into the DrawingVisual object.  RenderOpen returns a DrawingContext, which allows us to draw various kinds of 2D objects.

The DrawingContext will actually cache all commands for drawing the objects that we tell it to draw.  This means that we only have to issue our drawing commands once–in the class’ constructor.

#30 – Visual Class

Visual is the base class for all classes that represent objects that can be rendered to a WPF window or page.  It provides support for hit testing, clipping and coordinate transforms, as well as for rendering itself to a window or page.  It also models the object’s participation in a WPF visual tree, through its VisualParent property and GetVisualChild method.

The Visual class can also be used a starting point for implementing new (lightweight) WPF controls.