Programming in C Windows Forms CSE 494 R

Programming in C# Windows Forms CSE 494 R (proposed course for 459 Programming in C#) Prof. Roger Crawfis

Creating a nice GUI l The next several slides will walk you thru a particular design that I like for my applications. l The design consists of a GUI panel on the left and a view panel on the right, with a status bar and a main menu.

Create a new Project l Select a C# Windows Application

Add your GUI elements l Resize the Form to be about 800 by 600, or whatever you like. l In this order, add the following elements from the Toolbox->Windows Forms. Menu. Strip l Status. Strip l Split. Container l

GUI design In the Properties window you can make changes to the content and appearance of these controls. l Add some status information l Add some menu items l Change the background colors. l

GUI Design l Build (Build->Build Solution) and run (Debug->Start without Debugging) your application. Try to achieve something that looks like this:

GUI Design l OK. Let’s add some functionality. l Work on these tasks: l Opening a file selected from the menu. l Hiding and displaying the userinterface panel. l Setting the text for the number of correct answers and the hint.

GUI Design l Your program should now look like this. New Title added Background image added

Examine the code Okay. We have the basic lay-out. Notice we have not done any programming yet. l Notice that the Form 1. cs file has a hierarchy. l l Double-click on Form 1. cs will open the designer. Right-click on this and select view code or right-click in the designer and select view code to show the source code. Note that it is a “partial class” and that the constructor calls Initialize. Components().

Examine the code l l Right-click the Form 1. Designer. cs and select view code. Browse through this, but do not change it.

Open File Dialogue l With windows forms and. Net this is really trivial. Follow these simple steps: 1. 2. Drag an Open. File. Dialog control to anywhere on your Form. Notice that it places it in a special window pane below your design. Make sure you add a menu option to open a flash card collection (whatever that is).

Open File Dialogue l Adjust the Open. File. Dialog’s properties 1. 2. 3. 4. 5. Change the Title to “Select a topic to study” In the Filter property add a string to aid in the right file type selection. Something like this: “All files (*. *)|*. *|My Flash Cards (*. mfc)|*. mfc”. Each pair here has the format (Text string to display | regular expression). Note that adding a space before the asterisk results in a different regular expression. Set the Filter index to 1, such that mfc is the default format. Set the Add. Extension to False. Make sure the Multiselect property is False.

Open File Dialogue Okay, we have now defined everything, such that the constructor is called and the properties are set. Nothing will happen though, we need to add some logic. l Double click the “Open …” menu item. This adds some template code and brings up the source code window (Form 1. cs). l Add the following clause in the template for open. Tool. Strip. Menu. Item_Click: l if( this. open. File. Dialog 1. Show. Dialog() == Dialog. Result. OK) { }

Programming in C# Windows Forms CSE 494 R (proposed course for 459 Programming in C#) Prof. Roger Crawfis