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.