Desktop App Tutorial: Naming Constellation Stars

    I found a beginner's coding challenge that asked the coder to create an application with a Graphical User Interface (GUI). The challenge stipulated that the user should initially see a photo of the constellation of Orion. The application should contain a button, that when clicked will display the names of each of the stars in that constellation. There should be a second button that when clicked hides the names of the constellation. Finally, a button to exit the application should also be available. 

    I began by doing some research on how to best tackle a coding problem such as this. I found that best way to start would be in the laying out the controls I would need in the Windows Design Form. By beginning the challenge in this manner I can make sure to incorporate all the bits I would need the user to see and be able to interact with. Based on the challenge requirements I know I would need to implement label controls, button controls, and PictureBox controls.

    I began by using the PictureBox control to insert an image of the constellation of Orion. This control can show images in different formats (e.g., GIF, metafile, etc.,), I used JPG. I first had to add the control to the form, then I could choose the image from the controls image property. The image appeared clipped at first, this was because the PictureBox control has the SizeMode property set to "Normal" value at first. I changed the property to StretchImage so that I could resize the image vertically, I wanted to make more space for the star names.

      

    Next I started adding Label controls, which are used to show text on a form. In my case I used them to display the names of the stars. When you first insert a label in a form it is given a default name, font, size, and is visible. Given the challenge parameters, I had to change some of these defaults. Specifically, I needed to make the label's invisible when the program is first started, then toggle between visible and invisible when a button is clicked by the user. I went to the property setting for each label and changed the text property to the star name, then changed the control visibility to false. Setting visibility to false makes the label hidden when the app is run.

     

    Once the labels were done I three created buttons by using the Button control. I changed the text property for each to match their purpose. Although not asked by the challenge, I made a button control that when clicked would terminate the program. This concluded the basic layout of the application.

    With the layout finished I could finally start coding. I started off by writing code that would make the star names (label controls) visible. By double clicking on the "Show Star Names" button control Visual Studio opened a form1.cs file for the form, and created a click event handler. A form1.cs file is auto-generated code created by Visual Studio that can be further manipulated to write code for actions that are linked to the form (app display). A click event handler is a method that runs when a button is clicked by a user. In the form1.cs tab I wrote code that would make the star names visible when the user clicked the appropriate button. I wrote statements that included the label control's name, the property I wanted to address (in this case, "Visible") and set the value to "true". Setting the visible property to true displays the label. I repeated the same steps for the "Hide Star Names" button, however, I set the visible property to "false" which would hide the label. 

The last step I had to complete was creating an click event handler for the "Exit" button. Within this method I was able to write code that would terminate the program, and close the app window. As an added touch I adjusted the background color of the form.

The finished app worked as it should and followed the challenge parameters.

      

    In preparation for my next C# app adventure I plan on learning about numeric values and operators. I want to try to look for information on how to make an app that can take a user's numeric input and using mathematical operations generate an answer. Till next week!