Through a couple of in-class work periods and some additional homework time, our first project will give us practice with event handling, a few basic .NET controls (buttons, textboxes, labels, and menus), a simple custom control, and a functional alternative to the system calculator.  Here's a screen shot of Ravi's sample calculator: (here's the exe and dll)

Part 0 – Setting up the Project

Creating a new project:

     1)     File->New Project

2)     Project Type: Visual C#.  Template: Windows Application

3)     Choose a location for your project and name your project hw1alias, where alias is your SEAS username.

Part 1 – Changing the background color

We’ll start by changing the default background color of the calculator.

     1)     Double click Form1.cs in the Solution Explorer (or right-click it and select View Designer).

2)     With Form1.cs in focus, either find the Properties tab or right click on the form and select Properties.

3)     Change the BackColor property of Form1 to a color of your choosing and make note of the color’s name.

We’ll now add a button that toggles the background color between the color we just chose and another color.

    1)     From the toolbox, drag a Button onto the bottom of our form.

2)     We now want to set up an event that is associated to the user clicking the button.  There are a few ways to associate a function with this event:

-The easiest way to do it is to double-click the button in Designer view.  This will set up   a function that will be called whenever the button is pressed.

-Highlight the button and view its Properties tab.  Click the lightning bolt icon to switch from the button’s properties to its events.  Find its Click event and double-click the textbox next to it.  This will generate a function that will be called whenever the button is pressed.

We should now be in the code view for Form1.  Within this function is where we want to put the code that will toggle between background colors.  Choose your two colors (take a look at the Color class) and write the logic.  Note that within the Form1 class, you have access to the running form object using the keyword this.  With access to this object, you have access to all the properties we saw listed in the Properties tab before.

 Compile and run!

Part 2 – Setting up the file menu

It is good practice to have a file menu for all your applications.  It is also good to keep with many of the Windows GUI conventions, such as having a menu item called File where major tasks such as Exit should be listed.

    1)     Drag a MenuStrip control from the Toolbox onto your form.  It will automatically put the menu at the top.

2)     Name the first menu category File.

3)     Make an item called Exit in the File menu.

We now want to add add functionality that happens whenever the Exit item is selected from the menu.  Just like when adding a function handler for the button click before, there are a couple ways to do this.

Once you have a function that will run when the Exit menu item is pressed, add the code that will terminate the application.  There are a couple ways to do this:

 this.Close()

Application.Exit()

Part 3 – Creating a simple custom control

We are ready to start adding some buttons for digits and operators, but we want to make them a little more visually interesting than the default buttons.  What we’d like to have are buttons that change color when the mouse is hovering over them and change to a different color when they are being pressed.  We can define a custom control that will allow us to to customize the basic button in this way.

Like everything else, there are several ways to do this.  The approach that we’ll use here is one that will allow us to reuse our custom control in other projects and will also all us to drag-and-drop our custom buttons just as we’ve been doing with all the built-in controls.  In the future, however, when we start getting practice with adding controls programmatically (ie, not using the Designer to drag-and-drop controls, but rather creating the controls and specfiying its location and other attributes all in code), we will see another way to handle custom controls.

     1)     In the Solution Explorer, right click the solution (not the project!) and select
Add->New Project.

2)     This time we want a Windows Control Library project.  Choose the same location as before and name your project something like FancyButton.

 We want our custom control to be based on the System.Windows.Forms.Button class, so in the code we change the inheriting class from UserControl to Button.  Let’s first implement the functionality that will change the button’s color when the mouse is over it.  The two events of the button we will use for this are MouseEnter and MouseLeave.  To add event handlers for these events, go to the Designer view of the custom control, locate the Properties tab, click the Events button (the lightning bolt), and double-click next to the event names to generate functions for the events.

 Now that we’ve customized our button a little, we need to build our custom control and set it up so that we can add our custom button to the Toolbox.

     1)     Before building, right click the Solution and select Project Dependencies.  We want the Calculator project to depend on the custom control.  This way, the custom control will be built first.

2)     Build the project.

3)     Right click anywhere in the toolbox and select Choose Items.

4)     Go get coffee because the first time you select Choose Items it can take a long, long time.

5)     Under the .NET controls tab, select browse and find the folder that contains your custom control project.  Go the bin/Debug directory and select the DLL associated to your custom control.

6)     Your custom control should now be available in the toolbox.

7)     Drag an instance of your custom button onto the form.

8)     Build/run and see what happens.

We now want to go back and add a bit more customization to our button.  We want the button to change color when it is being depressed.  Look at all the events of Button and figure out which events will be useful to achieve this goal.

Part 4 – Adding digit buttons

Now you should be able to drag and drop your custom buttons on to the form.  Resize the button and then you can copy and paste the button to create all the buttons for your digits and operators.  Rename each button you create so their names are meaningful.  A good possible format is btn0 for digit zero, btn1 for digit one, btnAdd for the add operator, etc.

Arrange the buttons in a useful way.

Add a textbox with the default text set to “0.”  You will need to set some other properties to make the text right-aligned and also so that the textbox is not editable from the mouse/keyboard.

Add event handlers to the digits buttons and the clear button so the textbox is properly updated for each of these buttons.

Part 5 – Complete calculator functionality

Add the event handlers for arithmetic operators (the four operations and equals).

Extra Credit

Here are some possible extra credit features.  You may also add your own if you wish, but extra credit for any additional functionality is not guarunteed.

• Backspace button (+2).
• Make the form not resizable (+1) OR figure out how to get the buttons to move nicely as the form is resized (+2).  You will want to look into the Anchor property.
• Set a max length for values in the display textbox and enforce it when updating the appending to the display (+2).
• Add support for keyboard control (+3).
• Add support for negative numbers (+3).