Paint Application in Silverlight 3

Introduction

In this article we will continue from our last article Paint Application in Silverlight 3 - Part 1. In our previous article we designed the whole Silverlight Application. Now we will continue.

Drawing Logic

Basically while drawing with the mouse, we will create lines. So we need two Points. As you will see in my code I have used two Points; as a line requires two points to be drawn. I have taken a Boolean value bool MouseDraw = false; based on the value we will draw.

Now we need some events to be triggered when we will draw. We are planning to draw on a grid called DrawingArea. So we need three events from the Grid. Such as: LeftMouseButtonDown, LeftMouseButtonUp and MouseMove.

The following code will guide you through.

private void DrawingArea_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
MouseDraw = false;
}

private void DrawingArea_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
pt = e.GetPosition(DrawingArea);
ptOld1 = pt;
MouseDraw = true;
}

private void DrawingArea_MouseMove(object sender, MouseEventArgs e)
{
if (MouseDraw)
{
pt = e.GetPosition(DrawingArea);
Line1 = new Line();
Line1.X1 = pt.X;
Line1.Y1 = pt.Y;
Line1.X2 = ptOld1.X;
Line1.Y2 = ptOld1.Y;

Line1.Stroke = rectFront.Fill;

DrawShapeType();

Line1.StrokeThickness = BrushSize.Value;
Line1.Opacity = BrushOpacity.Value;
DrawingArea.Children.Add(Line1);
ptOld1 = pt;
}
ptOld1 = pt;
}

Collecting Draw Color Information

You have seen that I have assigned the color of the Line from a Rectangle's Fill property. Now as I have explained you in my earlier article that I created 28 Colors based on the combination. So to make the draw Color easy to choose; I have used another Rectangle and on each Rectangle's Click Property I am setting the Color to the RectFront Rectangle's Fill.

The following code will guide you through.

#region Rectangle Colors
private void rect0_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect0.Fill; }

private void rect1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect1.Fill; }

private void rect2_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect2.Fill; }

private void rect3_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect3.Fill; }

private void rect4_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect4.Fill; }

private void rect5_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect5.Fill; }

private void rect6_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect6.Fill; }

private void rect7_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect7.Fill; }

private void rect8_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect8.Fill; }

private void rect9_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect9.Fill; }

private void rect10_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect10.Fill; }

private void rect11_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect11.Fill; }

private void rect12_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect12.Fill; }

private void rect13_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect13.Fill; }

private void rect14_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect14.Fill; }

private void rect15_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect15.Fill; }

private void rect16_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect16.Fill; }

private void rect17_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect17.Fill; }

private void rect18_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect18.Fill; }

private void rect19_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect19.Fill; }

private void rect20_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect20.Fill; }

private void rect21_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect21.Fill; }

private void rect22_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect22.Fill; }

private void rect23_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect23.Fill; }

private void rect24_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect24.Fill; }

private void rect25_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect25.Fill; }

private void rect26_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect26.Fill; }

private void rect27_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{ rectFront.Fill = rect27.Fill; }
#endregion

Drawing Pen Shape

You might have see a method named DrawShapeType(); it will give the respective PenLineCap Shape according to the selection made. There are four types of the PenLineCap Shape available such as Flat, Round, Triangle and Square.
The following code will help you understand.

private void DrawShapeType()
{
if (RadioRound.IsChecked == true)
{
Line1.StrokeStartLineCap = PenLineCap.Round;
Line1.StrokeEndLineCap = PenLineCap.Round;
}
else if (RadioSquare.IsChecked == true)
{
Line1.StrokeStartLineCap = PenLineCap.Square;
Line1.StrokeEndLineCap = PenLineCap.Square;
}
else if (RadioTriangle.IsChecked == true)
{
Line1.StrokeStartLineCap = PenLineCap.Triangle;
Line1.StrokeEndLineCap = PenLineCap.Triangle;
}
else if (RadioFlat.IsChecked == true)
{
Line1.StrokeStartLineCap = PenLineCap.Flat;
Line1.StrokeEndLineCap = PenLineCap.Flat;
}
}

Clearing the Drawing Screen

This is a very simple task that is clearing the screen. While drawing we are adding the particular child to the grid. So we can remove all children by the method Clear(); as showed below.

private void btnClear_Click(object sender, RoutedEventArgs e)
{
DrawingArea.Children.Clear();
}

That's it; now you are ready with your Silverlight Paint Application. Try to play with more functionality that you can add. Enjoy Coding.

8 Comments

Join the conversation! Your thoughts help the community grow.

jay david9y ago
THANK YOU SO MUCH!!! You are a Godsend. This helped with my project
Gowtham Rajamanickam11y ago
helpful
reena12y ago
Thanks for the help your article was extremely helpful...I'm also developing the same paint application in silverlight and want to save it in a db...can you help me with this???
reena12y ago
hi
studio14y ago
Got an error on old version of silverlight
vix c16y ago
Just a quick question where does all this code on this page go into exactly? I'm unsure where to put it??
- Diptimaya Patra16y ago
  If you have designed the application in TestPage.xaml then the code should go into TextPage.xaml.cs in Silvrlight Project
- nishit vaghela16y ago
  You could have used a single event for Color rectangle click event like below instead of individual events for each rectangle. private void Rectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { Rectangle rcColor = (Rectangle)sender; currentColor.Fill = rcColor.Fill; }