Functions and drawing shapes in C# using wpf

Picture of the squares that this code creates.

Today in class we worked on drawing squares in wpf – there is a lot of information so this post is to recap and hopefully clarify things.

Before we begin you can access the complete code. It would work if you created a new program (wpf) called u2Graphics.

MainWindow.xaml code
MainWindow.xaml.cs code


MainWindow.xaml code - set the x:Name attribute

There isn’t much to explain about the MainWindow.xaml code – you do need a Canvas object and for the code to work set the x:Name attribute to myGrid – this is a poor choice for names but it was based on the sample code we were starting with. Note that in class we had a lot of code from early in the lesson, I’ve deleted that as it is not needed for this.


I am actually going to work backwards – please take a few moments to look at the entire code. Some of my graphics look slightly different than the github code – I’ve added some comments for clarity. Line numbers remain the same.

createLine method code - highlighting the method

Lines 54 to 68 are the createLine method. A method is a block of code that contains a series of statements.

Line 54 is the method signature – there are a number of elements that are contained:
private – this is an access level modifier. private and public are the two main ones we will use in the course. Grade 12s – when you create your own classes private will prevent code in other classes from running it.

static – this is not needed but since I put it in I will explain it. The static modifier allows you to access the method as part of the type instead of as an instance of an object. For example MessageBox.Show() is a static method – you don’t need to create an instance of the MessageBox class to use it. Grade 12s you can create static methods (or properties) for classes but I advise not to unless there is a really good reason to.

Line – this is the return type. For this method we want a Line object returned that we can then draw on the screen. When you create a method that returns a value you specify the data type here. Note that line 67 is where you specify the value to return. For example:
public int addNumbers(int x, int y)

This method would return an integer.

createLine() – this is the name of the method. The parentheses are required to indicate it is a method. You can provide any name you want that meets the naming rules (use alphanumeric letters, no spaces). A good convention is to make the name self-explanatory. createLine is pretty clear – it creates a line. In this class we use camelCase. Some programmers use _ whenever a space occurs: create_line

(double x1, double x2, double y1, double y2) – your method sometimes requires information to fun – for example our line needs to know the starting point the x axis (x1), the starting point on the y axis (y1), and the end point (x2 and y2). Because WPF uses decimal numbers for positioning we declare each of these variables as doubles. These variables are called parameters. Methods could have no paremeters:

public Line createLine()

One parameter:

public Line createLIne(double startingX)

or multiple parameters (use commas)

public Line createLine(double x1, double x2, double y1, double y2)

Line 55 contains {
This is the start of the block of code that will run when the method is called.
Line 68 contains }
This is the end of the block of code.

createLine method code - highlighting the method

  • Line 56 – declare a line variable, use the new keyword to create an instance of the Line object.
  • Lines 58 – 63 – assign values to the line properties (i.e. Stroke, starting point, end point).  Note how the parameter values (x1, x2 etc.) are used
  • Line 64-65 – these values aren’t required.
  • Line 67 – this method returns a Line (line 54)

drawSquare method code

This method is the drawSquare method.  It takes four parameters – the value for the left corner, right corner, top corner and bottom corner.  It will then draw four lines using these values to form a squre.

Line 41 – note the word void.  This method isn’t returning a value so the keyword void is used to indicate there is no value returned.  We don’t need the line return in the method since nothing is returned.

Line 44 – myGrid is the x:Name for the Canvas object, we are adding to the children (this technique can be used to add buttons and labels to a program in code).  createLine is called using the parameters that were passed to the drawSquare method. Since the createLine method returns a line then a line is added to the Canvas.


Line 28 is the constructor for the MainWindow class – this is the method that runs when the MainWindow is created – note that it does not have a return type.  Constructors don’t return values.

Line 30 – Initialize Componenet is a method in the Window class (see the term Window on line 26).  This is the code that actually creates the window.  If you add code before it then the items in the Window aren’t created yet – this is a common mistake.

Lines 32-37 – We simply call the drawSquare method.  This will create a square starting at point 10,10 and ending at point 65, 65.  When it is called it runs the drawSquare code (line 41) which then will call the createLine code.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s