The Line Length application will draw a straight black line on a Canvas and calculate the length of the line (see picture). The line begins at the coor¬dinates where the left mouse button is pressed and stops at the point where the left mouse button is released. The application displays the line’s length (that is, the distance between the two endpoints) in the Label Length =. Use the following formula to calculate the line’s length, where (x1, y1) is the first endpoint (the coordinates where the mouse button is pressed) and (x2, y2) is the second endpoint (the coordinates where the mouse button is released). To calculate the distance (or length) between the two points, use the equation:
(see Equation.jpg)

To draw a straight line, you need to use the line class. When drawing lines, use the Stroke property to specify the line’s color rather than the Fillproperty. Use the Line’s X1, Y1, X2 and Y2 properties to specify its start point and end point. Then add it as a child of the Canvas.
(see Line Lenght GUI.jpg)
a) Creating a new WPF application. Create a new WPF application and name it Line-Length. Change the Window’s Title to Line Length.
b) Adding the layout containers. Add a Canvas to the WPF application’s Grid. Name the Canvas lineCanvas. Add a StackPanel to the Grid and name it outputStackPanel-check the XAML to be sure the StackPanel is nested in the Grid element, not the Canvas.
c) Adding the output Labels. Add two Labels to the StackPanel. Name the first Label lengthLabel and set its Content property to Length =. Name the second Label lengthOutputLabel and delete the text in its Content property. Set the Width and Height properties of both Labels to Auto.
d) Setting properties of the layout containers. Set the StackPanel’s Orientation property to Horizonta1 to arrange its elements horizontally. Set the Width and Height properties to Auto. Set the HorizontalAlignment and VerticalAlignment properties to Left and Bottom, respectively. Set the Margin property to 0. Set the Canvas’s Width and Height properties to Auto, and the Margin property to 0. Set the Canvas’s Background property to White.
e) Renaming the project files. Rename the Window1.xaml project file to LineLength.xaml. Change the startup URI to LineLength. xam1. Change the Windows Class attribute to LineLengthWindow. Change the class name in the code-behind file to LineLengthWindow.
f) Declaring instance variables. Select View > Code to open the application’s code-behind file. Change the class name to LineLengthWindow. Declare and initialize two Point variables in which you store the start points and end points of the Line.
g) Creating the Length method. Define a Function procedure named Length that uses the formula given in the exercise description to return the distance between two endpoints as a Double. The Function procedure should use the following statement to perform the line-length calculation, where xDistance is the difference between the two points’ x-coordinates and yDistance is the difference between their y-coordinates:

Math.Sqrt((xD;stance ^ 2) + (yDistance ^ 2))

h) Adding a MouseLeftButtonDown event handler. Create a MouseLeftButtonDown event handler for the Canvas. Add code to store the coordinates of the first endpoint of the line. Clear the 1engthOutputLabe1 by setting its Content property to the empty String.
i) Adding a MouseLeftButtonUp event handler. Create a MouseLeftButtonUp event handler. First store the coordinates of the line’s second endpoint. Then call the Length method to obtain the distance between the two endpoints (the line’s length). Finally, display the line on the Canvas and the line’s length in the Length = Labe1, as in picture.
j) Running the application. Select Debug > Start Debugging to run your application. Draw several lines and view their lengths. Verify that the length values are accurate.