Creating Your First Windows 8 Application
- 12/15/2012
Creating the User Interface
In this exercise, you’ll start building Web List by creating a new project and then using XAML Toolbox controls to construct the user interface.
Create a new project
Start Visual Studio 2012.
On the Visual Studio File menu, click New Project.
The New Project dialog box opens, as shown here:
The New Project dialog box provides access to the major project types available for writing Windows 8 applications, which are also called Windows Store apps. Since the most recent selection I made in this dialog box was Visual Basic, the Visual Basic templates are currently visible, but other programming templates and resources are also available, including those for Microsoft Visual C#, Microsoft Visual C++, and JavaScript.
In the Visual Basic template group, click the Blank App (XAML) project.
Visual Studio prepares the development environment for a basic Windows 8 application with no predefined controls or layout.
In the Name text box, type My Web List.
Visual Studio assigns the name My Web List to your project. (You’ll specify a folder location for the project later.) I’m recommending the “My” prefix here so you don’t confuse your new application with the Web List project I’ve created for you on disk.
Click OK to create the new project in Visual Studio.
)
Visual Studio cleans the slate for a new programming project and displays Visual Basic code associated with the blank application template in the IDE. Your screen will look like this:
)
You won’t spend too much time with this code right now. What you see is standard start-up code for a Windows 8 application created within Visual Studio, and it is stored in the file App.xaml.vb within the project. Although each project contains an App.xaml file, your work today will begin in the application’s user interface, which is stored in the MainPage.xaml file. You’ll display that user interface now and enhance it with Toolbox controls.
Create a user interface
Open Solution Explorer if it is not currently visible, and then double-click the file MainPage.xaml.
Visual Studio opens MainPage.xaml in a Designer window and shows the upper-left corner of the application’s main page. Below this page, you’ll see the Code Editor with several lines of XAML markup associated with the user interface page in the Designer window. As you add controls to the application page in the Designer window, the Code Editor reflects the changes by displaying the XAML statements that will create the user interface. Your screen should look like this:
Now let’s get to know the Designer window a bit better.
Click the scroll box in the Designer window’s vertical scroll bar and drag it down.
When you drag a scroll box in the Designer window, you can see more of the user interface you are working on.
Click the scroll box on the Designer window’s horizontal scroll bar and drag it right. (Likewise, when you drag a horizontal scroll box, you can see hidden parts of the user interface.)
Near the lower-left corner of the Designer window, you’ll see a Zoom tool, which allows you to zoom in on the current application page (to see more detail) or zoom out (to see more of the page). The current value of the Zoom tool is 100%. You can select a different value by clicking the Zoom tool’s drop-down button.
Click the Zoom drop-down button and then click Fit All.
The entire application page now fits within the Designer window. Depending on your screen resolution and the amount of screen space you have designated for the other IDE tools, you’ll see a somewhat smaller version of the page.
It is important to be able to quickly view different parts of the application page in different sizes while you build it. Sometimes you want to see the entire page to consider the layout of controls or other elements, and sometimes you need to view portions of the page up close. Now return to the original setting.
Click the Zoom drop-down button, and then click 100%.
Now you’ll open the Toolbox.
If the Toolbox is not currently visible, click the Toolbox tab or click the Toolbox command on the View menu.
The Toolbox window contains a large collection of user interface controls that you can add to your application. Because you are building an application for Windows 8, the types of controls that are displayed in the Toolbox are so-called XAML controls—that is, structured elements that control the design of an application and can be successfully organized on a page by the XAML parser within Visual Studio. There are other types of Toolbox controls for other types of applications (Windows forms controls, HTML controls for web applications, and so on), but you don’t have to worry about that now—Visual Studio automatically loads the proper controls into the Toolbox when you open a new solution.
Your screen should look like this:
For convenience, the Toolbox controls have been organized into two groups: Common XAML Controls (those controls that appear in many applications), and All XAML Controls (a list of all the XAML controls that are currently installed on your system). Keep in mind that the Toolbox window is like any other tool window in the Visual Studio IDE. You can move it, resize it, or pin it as needed. Most programmers have the Toolbox open while adding controls to a new page, and then they pin it to the side of the IDE, as you’ll do in the following step.
Next, you’ll practice adding a text box object to the page.
Click the TextBox control in the Toolbox, and then click the Auto Hide button on the Toolbox title bar to pin the Toolbox to the IDE, if it is not already pinned.
Remember that when you pin a window to the IDE, the Auto Hide pushpin points in the down direction. Putting the Toolbox in this position will stop it from obscuring any of the Designer window while you work.
Move the mouse pointer to the upper-left corner of the Designer window, and then drag right and down to create a rectangular-shaped text box object on the page.
When you release the mouse button, Visual Studio creates a XAML text box object on the page, as shown here. (You may need to reposition the Designer window to see what is shown in the illustration.)
)
)
)
The text box is currently enclosed with selection handles, indicating that the object is selected in the IDE. The property settings of the selected object are loaded into the Properties window, and below in the Code Editor, XAML markup for the text box object appears nested within a grid object. All Windows 8 app user interfaces created with XAML markup have a grid object as their base layout element, and the controls that you add to the page appear nested within this main grid.
Move and resize a text box
Point to the lower-right corner of the new text box object, click the sizing handle on the corner of the text box, and drag it to a new location.
As you drag the corner, the text box object will be resized, although the upper-left corner of the text box will remain in place.
Whenever an object is selected in the Designer window, you can resize it by using the sizing handles. As you make sizing adjustments, grid lines reveal the dimensions of the object in pixels, and you can use the grid lines to create objects of a uniform size, or to align an object with another object on the page. Your selected text box will also have little locking icons at the top and left edges of the text box. These locks indicate that the element is locked, or frozen, a set distance from the edge of the window, but you can adjust this by clicking the locks, which open and close like a toggle.
Click the middle of the text box object and slowly drag it around the application page.
The text box floats around the surface of the page, and the grid lines and sizing information adjust as you move the object.
It is very simple to move objects on a page in the Designer window. As you make these adjustments, note that your changes are recorded in XAML markup in the Code Editor, as well as in the Designer window.
Position the text box so that it is 40 pixels from the left edge of the page and 24 pixels from the top edge of the page, and has a height of 32 pixels and a width of 420 pixels.
These dimensions will be fine for the single-line text box that the user will use to enter the web address (URL) that they want to browse to when the program runs. Your Designer window should look like this:
Now you’ll add a button object to the page. The Toolbox should currently be visible, since you pinned it to the IDE.
Add a button object
Click the Button control in the Toolbox and then move the mouse pointer over the application page.
The mouse pointer changes to crosshairs and a button icon. The crosshairs are designed to help you draw the rectangular shape of the button on the page. You can also create a button with the default size by double-clicking the Button control in the Toolbox.
Drag the pointer down and to the right. Release the mouse button to complete the button, and watch it snap to the page.
Resize the button object so that it is 40 pixels high and 140 pixels wide.
Move the button object so that it is below the text box object. Snap lines will appear as you move the object, and the right edge of the button will snap to the right edge of the text box when aligned.
Your screen should look like this:
Now you’ll add a second (larger) text box object to the page. This text box object will contain the list of web sites that you visited while the Web List program was running.
Add a second text box
Use the horizontal scroll bar in the Designer window to make the right side of the application page more visible.
You’re going to add the second text box object to the right side of the application page.
Click the TextBox control in the Toolbox, move the mouse to the Designer window, and then create a second text box object on the page. Make the text box about the same width but much taller than the first one.
Visual Studio creates a second text box object on the page. Your screen will look like this:
Now you’ll add a large web browser window on the page to display information from the web sites that you visit. This object is created by using the WebView control in the Toolbox. WebView is not a full-featured web browser like Internet Explorer. However, it was added to the XAML Toolbox to give Visual Studio programmers a simple way to display live web information in a Windows 8 application.
Add a web view object
Click the WebView control in the Toolbox. (You’ll find it in the All XAML Controls section.)
Using the drawing pointer for the control, create a very large rectangular box on the page below the button object and second text box object.
The goal with this object is to display as much of the web browser as possible. However, for web content that extends beyond the viewing area, the web view object will allow users to scroll up and down to see more information.
After you create the object, you may wish to close the Toolbox window or adjust the amount of zoom magnification in the Designer window to make as much of the page visible in the IDE as possible.
Your final page should look like this in the Designer window:
In my Designer window, the zoom is set to Fit All (about 40 percent) so that I can see the entire application page. Also note how the Code Editor now shows XAML markup for four objects: a text box, a button, a second text box, and a web browser. Now you’re ready to customize your interface by setting a few properties.