In this lecture we are going to start adding some code.
We'll start by creating some variables.
Let's open up our code.
So in the design you make sure you've got the form selected.
Make sure the properties says form one and then click on View and click on code.
You can also hit F seven on your keyboard and that should give us the Skeletor code.
So this is a top level of of the code structure.
The picture box is designed mainly to display pictures but we want to use it to draw images and the
way we're going to achieve this is by using a bit map format to do the drawing.
So what that means is that we'll do all the drawing onto a bitmap and then display the bitmap in the
picture box component which will be displayed in the main window.
So for this to work the bitmap needs to be persistent.
What this means is that the same modified bitmap should be accessible from any method and method in
a way is a function for from any method we choose to create in our application.
And this involves what is known as a scope a scope and basically is the area where you can access a
method or function from.
For example if we created the bitmap in a method attached to the picture box component it would be destroyed
automatically when the application leaves that method and any changes we made to the picture box would
be lost.
But if we create the bitmap higher up the hierarchy which is somewhere here yeah if we create that higher
up in the current king creating entire up in the hierarchy in a method what that happens at that method
will then be inherited by each application component.
So if it is way up in the hierarchy with it can be inherited by other components that uses the application
that that way it be available to all of them.
So it will only be created and destroyed when the application is started and stopped.
So this is the most efficient way to create such methods so we're going to do that now.
So doing it this way will create a new bitmap each time the application loads.
And it also means that the data contained within that bitmap will also be accessible to every method
in the application.
So let's define the variables.
I'm just going to define it here so that it can be accessible to or application.
So let's define the bitmap variable first.
So type in bitmap which will be the type space followed by the name calling it BNP.
I'm gonna set that we're gonna create a new instance of that and to do that you type in the word new
type in the word bitmap.
All right we're gonna pass it some resolution.
This is the standard resolution that most screen use
but you know you can change that if you want.
What.
By setting the resolution that means you babe only able to draw within this dimension.
So if you draw outside that some of your drawings may appear on the edges.
So this is just specified for this application while you can tweak it if you wish.
So they could the code were written here on line 15 create a bitmap that I have called B MP and I have
also defined the size to be 10 to four by 7 6 8.
This is a common screen resolution.
What this means is that we can only draw on a canvas of this size.
So if your windows is any bigger you won't be able to draw in to the edges because of the screen size.
We have defined here.
I'm just going to add two other variables so that they can be accessible from anywhere within the application.
I'll add them on then I'll explain what they do in a minute.
So this would be a pen.
Give me the letter P create in your sense with the word new
and then pass it some parameters
and I'll create another parable which would be a boolean value which means true or false.
And how sad a default to force
so the other two variables I've created here is a pen.
So this pen here represents the pen color so that any of the palette palette buttons the colors on the
form can be changed.
Using that pen color and the next variable here I've set here is the drawing.
Basically what this would do will set this up and said that yes we'll set this so that whenever the
left mouse button is held it's held down over the picture box a tool you know to activate a draw me
so we'll do that will activate that via the picture box property.
So let's switch back to the Design Review and click on the.
Make sure you've got the picture box selected issued say picture box 1 so click on this event.
This same that looks like a lightning bolt.
What we're trying to do here.
We need to create a method that will simply toggle the value of the drawing boolean call the boolean
is either true or false or want a method that will toggle between the values of the drawing.
So when the mouse button is depressed it gives a different value when it is released.
It gives a different value to do this.
We need to look for the mouse events so this is a mouse down.
So where you've got the mouse down.
This is where we want to specify the code that will control this event.
So double click on the mouse down event and that should open up this event handler there.
So what I'm going to do here I'm going to change the name of this method from mouse down to mouse click
and the reason I have changed the name because I want it to be used by the mouse up event as well.
So when the user releases the mouse button it will also you know activate the code.
I'm going to quickly write some conditional statement here and if statement that will display that will
display a certain code based on the action of the user.
So the conditional statement are written here.
This is a conditional statement.
Basically what is saying that if this this variable here is access the drawing the default is false.
Else if it's not false then the drawing will be true.
So based on the mouse click OK on the mouse click or the mouse down key based on the button the users
presses it will activate either of this code based on that.
So that's it.
We are going to end this lecture here and in the next lecture will carry on writing some more code.
So I'm going to save that column got some yellow strips here and will progressed with further code in
the next lecture.
Thanks for watching.
Bye for now.