Programming in C#Windows FormsWindows Forms

CSE 494R(proposed course for 459 Programming in C#)

Prof. Roger Crawfis

Creating a nice GUI

The next several slides will walk you thru a particular design that I like for my applications.

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

Select a C# Windows Application

Add your GUI elements

Resize the Form to be about 800 by 600, or whatever you like.

In this order, add the following elements from the Toolbox->Windows Forms.MenuStripStatusStripSplitContainer

GUI design

In the Properties window you can make changes to the content and appearance of these controls.

Add some status information Add some menu items Change the background colors.

GUI Design

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

GUI Design

OK. Let’s add some functionality.Work on these tasks:

Opening a file selected from the menu.Hiding and displaying the user-

interface panel.Setting the text for the number of

correct answers and the hint.

GUI Design

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.

Notice that the Form1.cs file has a hierarchy. Double-click on Form1.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 InitializeComponents().

Examine the code

Right-click the Form1.Designer.cs and select view code.

Browse through this, but do not change it.

Open File Dialogue

With windows forms and .Net this is really trivial. Follow these simple steps:

1. Drag an OpenFileDialog control to anywhere on your Form. Notice that it places it in a special window pane below your design.

2. Make sure you add a menu option to open a flash card collection (whatever that is).

Open File Dialogue

Adjust the OpenFileDialog’s properties1. Change the Title to “Select a topic to study”2. 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.

3. Set the Filter index to 1, such that mfc is the default format.4. Set the AddExtension to False.5. 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.

Double click the “Open …” menu item. This adds some template code and brings up the source code window (Form1.cs).

Add the following clause in the template for openToolStripMenuItem_Click:

if( this.openFileDialog1.ShowDialog() == DialogResult.OK){}

Programming in C#Windows FormsWindows Forms

CSE 494R(proposed course for 459 Programming in C#)

Prof. Roger Crawfis