March 15th, 2009

Building a paint application in Silverlight using the ‘Line’ element

All Silverlight Examples, Silverlight 2 tutorials, Silverlight C# Tutorials, Silverlight Effects, by Gavin Wignall.

The below example shows a simple paint application in Silverlight. You can select from 10 colours, change the brush size and the opacity.

To get this effect I run some event handlers to check when the mouse is being pressed. While the mouse is pressed, every time the mouse is moved a new ‘Line’ element is produced and plots the co-ordinates from the previous mouse position to the current position. This ‘Line’ element is then styled up based on the selection from the colour palette and sliders. Finally I set Line1.StrokeStartLineCap = PenLineCap.Round; and Line1.StrokeEndLineCap = PenLineCap.Round; to ensure the joins between each ‘Line’ element fits snugly.


Possible improvements

Firstly it would be nice to add a feature to erase paint – I haven’t spent much time thinking about how to do this yet as I’m sure it’s going to be quite tricky.

It would be quite easy to add tools to draw rectangles and circles and even reasonably easy to add a gradient tool to colour these up.

Text would be an interesting addition.

The ability to save your master piece to either return at a later point or export to an image would be cool.

Get the code

As always, feel free to grab the code here and start playing!

Back Top

Responses to “Building a paint application in Silverlight using the ‘Line’ element”

  1. Brilliant! Having been involved in the development of bit-mapped ‘paint’ applications in the past I can say that the future for this type of application is very bright indeed. My work focussed mainly (though not exclusively) on the education sector and from this standpoint it is clear that the problem with many existing packages is that they offer too much functionality all at once – trying to tick all the boxes in order to get sales. The virtue here with web delivery is that ultimately it might be possible to offer functionality on demand – ie image-processing as and when the user needs it, ditto pattern funtions, text manipulation, etc. Best of luck with your project MC

    Michael Cooper at March 22, 2009 2:56 pm
  2. I really liked this post. Can I copy it to my site? Thank you in advance.

  3. Of course, a link back is all I ask :)

  4. The article is usefull for me. I’ll be coming back to your blog.

  5. I really like your post. Does it copyright protected?

  6. My work is free for all to use, a small link back to this site is welcomed if any of my content is featured elsewhere :)

  7. Great article and very usefull. and i managed to save the stokes and show it later. But i couldnt do the erase option :( Are you still working on this article to achieve erase or text features?

  8. I’m sorry i just newbie..
    Why cannot i open your project using Visual Studio Express Edition?

  9. Have you installed all the additional Silverlight addons? check out http://www.silverlight.net/getstarted/ and let me know if that helps ;)

  10. Cudos to you! This is an awesome demo!

  11. hi,
    i am new to silverlight.your post is very good but i want to draw circle r rectangle r any text just like paint application when u select r drag the circle it will placed on inkpresenter.So,Please help me

  12. It is a great post. I am trying to use it for a paint type application on Windows Phone 7. As you say the erase is very tricky. I tried the idea given below without much success. Any ideas to fix this? Thanks.

    I use a button to select erase mode. After selecting erase mode when the user touches the screen, pt.erase is the touch point .

    foreach (var item in Draw_Canvas.Children)
    {
    Line line1 = (Line)item;
    if (IsPointBetween(pterase.X, line1.X1, line1.X2))
    if (IsPointBetween(pterase.Y, line1.Y1, line1.Y2))
    {
    _deletedLines.Add(line1);
    numberofdeletedlines++;
    }
    }
    foreach (var item in _deletedLines)
    {
    Draw_Canvas.Children.Remove(item);
    Draw_Canvas_Children_Count.Text = Draw_Canvas.Children.Count.ToString();
    }

    private static bool IsPointBetween(double point, double start, double end)
    {
    if (start = start) && (point = end) && (point <= start);
    }

  1. Cup-o-Salt Silverlight game beta 1 (,March 19, 2009)

    [...] Resource Building a paint application in Silverlight using the ‘Line’ element Mar [...]

  2. Live Mesh Paint « Sigurd Snørteland (,September 8, 2009)

    [...] bygger på en tegneprosjekt som Silverlight Buzz har utviklet, og er endret for å støtte synkronisering og hosting i Live Mesh [...]

  3. links for 2009-09-10 | On9 Systems (,September 11, 2009)

    [...] Building a paint application in Silverlight using the ‘Line’ element » Silverlight Buzz (tags: silverlight paint application tutorial) [...]

  4. Silverlight Brush Effect – Paint Splatter ­ Silverlight Buzz (,February 9, 2010)

    [...] You can see another post I made on building a Paint Application here. [...]

Leave a Reply

Back Top