Visual Studio GUI Lab 1
Craig Duckett – May 24, 2015
GUI Lab 1: Quick Tour of the Integrated Developer Environment (IDE)
Solution Explorer
The Solution Explorer helps you manage
projects in your solution. A “Solution” is a
container for projects and you can have many
projects in a solution. Solution Explorer lets you
browse and manage those projects and files.
Besides the standard commands of copying,
editing, renaming and deleting items, you also
have other commands available on contextual
menu when right-clicking on an item.
1
Here is a short list of most common commands you might use:
On a Project:






Add new items to the Project
Add existing items to the Project
View | Set Properties of a Project
Ad References
Unload a Project
Set a Start Up Project
On a Solution



Add a New Project to the Solution
Add existing Project to the Solution
Set a Start Up Project
On a Windows Form


View Code
View Designer
On any File

Exclude from Project
Note: If you do not see the Solution Explorer, you can access it
from the menu by going to View > Solution Explorer or invoking
Window > Reset Window Layout
2
Properties Window
In .NET everything has properties, from controls to
classes and even files. When a control is selected in the
Designer, the Properties Window will show design-time
properties and events that control which you can view
and edit. With Properties Window you can also view
/edit properties of project items selected in a Solution
Explorer.
The property name is shown on the left side and its value
is on the right side. Those values range from really
simple ones like a String or Boolean, to more complex
ones like drop-down lists or even dialog boxes.
Properties shown in gray are read-only.
If you want to explore all available properties and
methods of a particular control, use IntelliSense in the
Code Editor.
What is a Property? Properties are similar to fields except
that you define “Get’ and ‘Set’ methods which can contain code.
For example, you could add validation code or limit a range of
numbers in a Set method. Property also allows you to make fields
read-only.
3
Toolbox
The Toolbox provides a list of available components
/controls from which you can add them into the main
window when in Designer View. To get a list of all
available controls click on Toolbox on the left side of
the main window. You add controls to your form by
dragging a control to Designer surface. You can also
add control by just double clicking on it.
After it is added to the Designer, the necessary code
to create instance of that control will be generated in
the active form (you can find that code in .designer.cs
file of the form in InitializeComponent method).
If the Toolbox is empty without any controls, you
probably have Code Editor opened in the Main
Window, so switch back to Design View. Check the
next section on different ways to do that.
Note: Some controls are non-visual like OpenFileDialog.
To manage controls listed in the Toolbox, right-click on any control in the list. The Context menu will
show up with quite a few commands:




Cut, Copy, Paste, Delete
Rename Item to rename selected control
Choose Items to change which controls are listed in the Toolbox. This will open up
“Choose Toolbox Items” dialog window where you can add and remove controls from
the Toolbox.
Reset Toolbox to restore Toolbox to default settings.
Note: You can also manage Tabs that group listed controls by rightclicking on a Tab. In the above screen capture Common WPF Controls is
a tab.
4
Main Window Space
This is where you will spend most of the time when
developing an application. You will write code in the
Code Editor and add / rearrange controls to your form in
the Designer View.
When working in the Designer, you will also use other
sections of Visual Studio like Toolbox to drag and drop
controls to Designer surface and Properties Windows to
modify design-time properties and events of the
selected objects.
When control is added to the surface, the Designer will
automatically generate necessary code (if you have Form
named Form1, the code will be located at
Form1.Designer.cs in InitializeComponent method).
You will switch back and forth from a designer to Code
Editor frequently, so it is good to know different ways to
do that:



Using menu by going to View > Code | Designer
Going to Solution Explorer, right-click on Form and select View Code / View Designer
from context menu.
In Solution Explorer double-clicking on the Form will open up the Designer View.
5
GUI Lab 2: Intro to Project Setup
1. Open Visual Studio
2. New Project
3. Visual C# > Console Application
a. Name: FirstConsole
b. Location: <save to folder on desktop>
c. Solution Name: FirstConsole
Reminder: What’s the Difference between a Solution and a Project?
- A Solution can contain multiple Projects
Files associated with a Solution: sln, suo
- A Project contains multiple files
GUI Lab 3: Intro to Solution Setup
1. Open Visual Studio
2. New Project
3. Other Project Types > Visual Studio Solutions > Blank Solution
a. Name: FirstSolution
b. Location: <save to folder on desktop>
c. Solution Name: FirstSolution
d. OK
4. Right-click on Solution > Add > New Project
5. Visual Basic > Console Application
a. Name: ConsoleVB
b. Location: <save to folder on desktop>
c. OK
6
6. Right-click on Solution > Add > New Project
7. Visual C# > WPF Application [Note: Windows Presentation Foundation]
a. Name: WpfAppCS
b. Location: <save to folder on desktop>
c. OK
7
GUI Lab 4: Navigating the Visual Studio IDE
1. Open Visual Studio
2. Open a Project
3. Double-click on a .cs file in the Solution Editor to view the code
4. DEMO: Tabs and drop-down tab menu
5. DEMO: Undocking tabs, docking tabs, multi-monitor support , etc
6. DEMO: Double-click header  Ctrl + double-click header
7. DEMO: Visualizer Cross
8. DEMO: Undocking Solution Explorer | Properties items
9. DEMO: Windows > Reset Window Layout
10. DEMO: Auto-Hide Feature  Toolbox ‘Pin’
11. DEMO: Full-Screen Mode  View > Full Screen (Shift + Alt + Enter)
12. DEMO: View Menu  Other Windows
13. DEMO: Ctrl + Tab  Active Windows | Active Files
Drag and Drop UI Design
WPF (Windows Presentation Foundation)
http://msdn.microsoft.com/en-us/library/aa970268.aspx
Windows Presentation Foundation (WPF) is a next-generation presentation system for building
Windows client applications with visually stunning user experiences. With WPF, you can create a
wide range of both standalone and browser-hosted applications. The core of WPF is a resolutionindependent and vector-based rendering engine that is built to take advantage of modern
graphics hardware. WPF extends the core with a comprehensive set of application-development
features that include Extensible Application Markup Language (XAML), controls, data binding,
layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and
typography. WPF is included in the Microsoft .NET Framework, so you can build applications that
incorporate other elements of the .NET Framework class library.
Windows Forms
http://msdn.microsoft.com/en-us/library/ms229601.aspx
Windows Forms (WinForms) is the name given to the graphical application programming interface
(API) included as a part of Microsoft .NET Framework, providing access to native Microsoft
Windows interface elements by wrapping the extant Windows API in managed code. The most
widely used of these is the User Interface Process Application Block, which is released by the
Microsoft Patterns & Practices group as a free download that includes the source code for quick
start examples.
8
Just like Abstract Window Toolkit (AWT), the equivalent Java API, Windows Forms was an early
and easy way to provide graphical user interface components to the .NET Framework. Windows
Forms is built on the extant Windows API and some controls merely wrap underlying Windows
components.
ASP .NET
http://www.asp.net/
ASP.NET is a development framework for building web pages and web sites with HTML, CSS,
JavaScript and server scripting. ASP.NET supports three different development models: Web
Pages, MVC (Model View Controller), and Web Forms



Web Pages (W3Schools)
http://www.w3schools.com/aspnet/webpages_intro.asp
MVC (W3Schools) http://www.w3schools.com/aspnet/mvc_intro.asp
Web Forms (W3Schools) http://www.w3schools.com/aspnet/aspnet_intro.asp
9
GUI Lab 5: Simple Windows Presentation Foundation (WPF) App
1.
2.
3.
4.
5.
6.
7.
8.
Open Visual Studio
New Project
Visual C# > WPF Application
Name: WpfApp2
Location: <save to folder on desktop>
OK
From the Toolbox, drag a Textbox and a Button to the middle of the MainWindow
Click on the Button, and in Properties window, click on the Properties tab and change
the Content from Button to Say Hello!
9. Double-click on the Say Hello! Button in the MainWindow
10. This will create a new CS file that contains a button1_Click method
11. Add the following line of code to the button1_Click method:
textBox1.Text = "Hello BIT276! You rock!";
12. Select Debug > Start without Debugging (Ctr+F5) to run the app.
13. Click the Say Hello! Button to test
10
14. You can change the properties of the form by manipulating various elements in the
Properties window (e.g., changing Common > Title; changing Brushes > Background).
15. From the Toolbox, drag a Label to the MainWindow and position it above the TextBox
16. In the Properties window, go to Common > Content to change label content to My First
App (or something else of your choosing)
17. From the Toolbox, drag another Button to the MainWindow and position it beside the
Say Hello! Button
18. In the Properties window, go to Common > Content to change content to Exit
19. Scroll down to the Visibility tab, and change Visibility to Collapsed
20. Test your app by running Ctrl + F5; the Exit button should not be visible. Close the app.
21. Double-click on the Say Hello! Button, and add the following two lines of code to the
button1_Click method:
label1.Content = "It's a Beautiful Thing!";
button2.Visibility = Visibility.Visible;
22. Test your app by running Ctrl + F5; click on the Say Hello! Button to see the label change
content and the Exit button appear. At this pointing, clicking on the Exit button does
nothing. Close the app.
23. Double-click on the Exit button to bring up the code window, and add the following line
of code to the button2_Click method:
this.Close();
24. Test your app by running Ctrl + F5; invoking the Exit button should now close the
program.
11
25. JUST FOR FUN: You can add other Toolbox objects to your app as well, e.g., the
Calendar.
HINT:
If you want blackout dates to appear on the Calendar, in Properties select Calendar >
BlackoutDates, then Add, and then you can alter the code:
<Calendar.BlackoutDates>
<CalendarDateRange Start="05/01/2013" End="05/27/2013 11:59 PM" />
</Calendar.BlackoutDates>
12
GUI Lab 6: Simple Windows Forms App
Before starting this lab, find a suitable JPG from the Internet (approximately 400 x 400 pixels) and save
to your Desktop.
1.
2.
3.
4.
5.
6.
7.
Open Visual Studio
New Project
Visual C# > Windows Form Application
Name: WindowsFormsApp1
Location: <save to folder on desktop>
Solution name: WindowsFormsApp1
From Properties, under Appearance tab, change the Text to My Windows Form App
8. Resize the Form1 form to 500 x 500 pixels, either by dragging the resizing handles, or by
entering the Width and Height in Properties > Layout
13
9. Change the form’s background color by selecting Properties > Appearance > BackColor
and using the dropdown menu to choose a palette and color.
10. Open the Toolbox, select the Common Controls tab, and drag-drop a Label to the form
(you can also double-click on the label in the Toolbox to add it to the form).
11. Click on the label1 label to customize its properties in Properties > Appearance > Text:
Welcome to BIT275/276! (or anything of your choosing). TextAlign to TopCenter.
12. Align the label in the top center of the form by dragging it with its handles
13. Configure the label’s font type, size, and color by clicking on it, and selecting Properties
> Appearance > Font and using the three ellipses […] for selection. Repeat for changing
its ForeColor.
14. From the Toolbox, drag-drop a PictureBox to the form, and adjust its size to better fit
the dimensions of the form.
15. Click the PictureBox to display its properties in the Properties window, and use
Appearance > Image to select the three ellipses […] to open the Select Resource popup
window. Select Project resource file, then the Import… button to browse to the JPG you
previously saved to your Desktop, then OK
16. To scale the image to the PictureBox’s size, select Behavior > SizeMode and pick
StretchImage
17. Save your Project, by selecting File > Save ALL
18. You can publish your application by selecting Build > Publish<name_of_app> and
selecting the type of publication you want to create.
a. Installed from a web site
b. Installed from a UNC path or file share
c. Installed from a CD-ROM or DVD-ROM
14
15