Changes

Jump to: navigation, search

Creating a Simple C Sharp GUI Application with Visual Studio

3,402 bytes added, 21:07, 10 January 2008
Adding Components to the Windows Form
To access the Toolbox click on the ''Toolbox'' tab located along the left hand edge of the main Visual Studio window. This will display the Toolbox which contains a number of different categories of components available for addition to the Form.
If the ''All Common Components'' category is currently folded click on the small + sign to unfold the list of components. With the components visible drag and drop two Button components and two TextBox components onto the Form canvas position and resize them such that the Form appears as shown in the following figure.
[[Image:visual_studio_c_sharp_simple.jpg|A sample Sample Windows Form with Buttons and TextFields]]  == Changing Component Names == As components are added to the Form Visual Studio assigns default names to each one. It is via these names that any C# code will interact with the user interface of the application. For this reason it is important to specify meaningful names which identify the component when referenced in the C# source code. it is recommended, therefore, that the default names provided by Visual Studio be replaced by more meaningful ones. This and other properties relating to components are specified through the ''Properties'' panel which is located in the bottom right hand corner of the main Visual Studio window. Begin by selecting the top TextEdit component in the Form area so that the properties panel displays the properties for this component. Scroll to the top of the list of properties until the ''(Name)'' value is visible and change this name from ''textBox1'' to ''welcomeText'':  [[Image:visual_studio_c_sharp_properties.jpg|The Visual Studio Properties Panel]]  Repeat the above task by selecting each component in the Form in turn and changing the ''(Name)'' property. The second textBox should be named ''nameText'', the left hand button ''helloButton'' and the right hand button ''closeButton''. == Changing Component Properties == In addition to changing the names of components it is also possible to change a myriad array of different properties via the properties panel. To demonstrate this concept we will change the text on the two buttons such that they read "Hello" and "Close" respectively. Select helloButton and scroll down the list of properties to locate the ''Text'' value and change it from ''button1'' to ''Hello''. Repeat this for ''closeButton'' so that it displays ''Close''. To try out the application so far press the ''F5'' button on your keyboard to build and run the application. After a few seconds the executing application will appear. Enter some text into the TextBoxes to prove it is a live application. == Adding Behavior to a Visual Studio C# Application == The next task in creating our application is to add some functionality so that things happen when we press the two buttons in our form. This behavior is controlled via events. For example, when a button is pressed a ''Click'' event is triggered. All we need to do, therefore, is write some code for the ''Click'' events of our buttons. To display the code associated with the ''closeButton'' double click on it. The display will change to show the code for the application. Amongst the code is the ''closeButton_Click'' event method:  [[Image:visual_studio_event_code.jpg|Visual Studio Displaying the C# Code for a Button Click Event]]  When the closeButton is pressed by the user we want the application to exit. We can achieve this by calling the ''Close()'' method in the closeButton_Click event: <pre> Code here </pre> The next task is to read the text entered into ''nameText'' and use it to display a message in ''helloText''. This will take place when ''helloButton'' is pressed. Click on the ''Form1.cs [Design]'' tab above the code area to return to the visual view of the Form and double click on ''helloButton'' to access the code. This time we will be adding code to the ''helloButton_Click'' event method to read the value from ''nameText'', combine it with some extra text and then display the result in ''helloText''.

Navigation menu