WPF Tutorial : Drawing Visual

As described in the MSDN, is a lightweight drawing class to render shapes, images, videos, text etc. It’s so lightweight that it needs a container to hold it, also the fact that it doesn’t provide layout or hit-testing or event-handling.
So for holding our DrawingVisual, we will use a which will provide layout, hit-testing and event-handling.
Lets get started by creating a class DrawIt which inherits FrameworkElement class. In this class we will create two rectangles using DrawingVisual class.

class DrawIt:FrameworkElement {     VisualCollection visuals;       public DrawIt()     {         visuals = new VisualCollection(this);           this.Loaded += new RoutedEventHandler(DrawIt_Loaded);     }       void DrawIt_Loaded(object sender, RoutedEventArgs e)     {         int x = 0;                   for (int i = 0; i <= 1; i++)         {             DrawingVisual visual = new DrawingVisual();             using (DrawingContext dc = visual.RenderOpen())             {                 dc.DrawRectangle(Brushes.Red, new Pen(Brushes.Black, 2),                     new Rect(new Point(0 + x, 0), new Size(40, 40)));             }             visuals.Add(visual);             x += 60;         }     }       protected override Visual GetVisualChild(int index)     {         return visuals[index];     }       protected override int VisualChildrenCount     {         get         {             return visuals.Count;         }     } }

Explanation :
For this class, we have defined visuals of type VisualCollection. VisualCollection will keep the number of visual objects that we have drawn so far.
In the LoadedEvent, I am running a for-loop to draw 2 rectangles. In that, a DrawingVisual object is created for every loop made. The RenderOpen() method of DrawingVisual will return an object of type DrawingContext which is used to render the content of the visual. This line is straight from MSDN: “When you use a DrawingContext object’s draw commands, you are actually storing a set of rendering instructions that will later be used by the graphics system; you are not drawing to the screen in real-time”. This will greatly improve the performance.
Then there are two overrides which will be used by our container to manage the collection of the visual objects.
Next is to display our visuals in a Window. Here is the XAML of our window.

<Window x:Class="LearnDrawing.Window1"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:local="clr-namespace:LearnDrawing"     Title="Window1" Height="300" Width="300">     <Grid>         <local:DrawIt Width="100" Height="100"/>     </Grid> </Window>

And the window will display this:

Window

I would like you to read these articles too which helped me a lot:
http://jerryclin.wordpress.com/2007/11/21/lightweight-drawing-with-drawingvisuals-part-1-of-2
http://jerryclin.wordpress.com/2007/12/19/lightweight-drawing-with-drawingvisuals-part-2-of-2
http://msdn.microsoft.com/en-us/library/ms748373%28v=VS.90%29.aspx
That’s it. Hope it helped you. Happy coding!